GY
Open to contract & senior frontend roles

Gede Yandi

Frontend Engineer building data-dense, production-grade interfaces.

I design and build complex dashboards, real-time monitoring, geospatial tools, and enterprise workflows in React and TypeScript — turning dense operational data into clear, usable product UI.

View Projects Download Resume
Bali, Indonesia LinkedIn GitHub Email
Portrait of Gede Yandi

  • 8+ yrs

    Frontend engineering

  • Dashboards

    Data-dense & KPI-heavy

  • Real-time

    Live monitoring UI

  • Geospatial

    Map-based operations

  • Auth & RBAC

    SSO & access control

  • Enterprise UI

    Complex product surfaces

Selected work

Production interfaces, built for dense real-world data

Five enterprise platforms across operational dashboards, real-time monitoring, geospatial field ops, hospitality, and access governance.

01Enterprise Dashboard

Digital Manufacturing Platform

A manufacturing operations dashboard for pulp, paper, power, and utility performance monitoring.

  • React
  • TypeScript
  • Redux Toolkit
  • ECharts
  • D3.js
  • Keycloak
  • CASL
  • Jest
  • React Testing Library

Highlights

  • Built KPI-heavy operational dashboards spanning Pulp, Paper, and Power modules.
  • Implemented gauges, production trends, and dense reporting tables for plant performance.
  • Designed role-aware enterprise dashboard patterns for operations and reporting.

Gallery · 4 screens

Technical notes

  • Dense data layout: multi-gauge headers, trend charts, and tabular drill-downs held together in a single scannable view.
  • Module-driven structure (Pulp / Paper / Power / Utility) demonstrates scalable, reusable dashboard composition.
  • Role-aware access via Keycloak and CASL, with visualization powered by ECharts and D3.
02Real-Time Operations

Integrated Control System

A real-time industrial control platform for logistics, inventory, mill performance, monitoring, and reporting.

  • React
  • TypeScript
  • Redux
  • socket.io
  • Leaflet
  • ECharts
  • Chart.js
  • Keycloak
  • i18n

Highlights

  • Built real-time supply-chain visibility surfaces across logistics, inventory, and mill performance.
  • Implemented map-heavy dashboards with inventory/tank monitoring and CCTV operational views.
  • Worked on variance reports, activity analytics, and multi-dimensional filtering.

Gallery · 5 screens

Technical notes

  • Combines a live operational map, inventory tables, and monitoring feeds into one control surface.
  • Reporting and governance views demonstrate variance analysis, drill-down, and access-controlled data.
  • Real-time data via socket.io, maps via Leaflet, analytics via ECharts / Chart.js, with i18n support.
03Geospatial Field Ops

Palm Health Monitoring Platform

A geospatial field operations platform for tree-health monitoring, validation, and mobile field workflows.

  • React
  • React Native
  • TypeScript
  • Leaflet
  • MQTT
  • FastAPI
  • PostgreSQL
  • Mobile UI

Highlights

  • Built a geospatial tree-health census map with live health-status layers and tree-level detail.
  • Implemented field validation and reconciliation flows from the map down to individual records.
  • Designed mobile companion screens for in-field scanning, validation, and photo evidence.

Gallery · 5 screens

Technical notes

  • Web console and mobile workflow share a single source of truth for tree-health status and ground-truth validation.
  • Geospatial layers, filter panels, and review queues show handling of large, location-bound datasets.
  • React + React Native frontend, Leaflet maps, MQTT live data, FastAPI + PostgreSQL backend.
04Hospitality Platform

RuangNyaman Hospitality Platform

A connected hospitality ecosystem for guest booking, partner onboarding, extranet management, and hotel operations.

  • React
  • TypeScript
  • Responsive UI
  • Dashboard UX
  • Mobile App Workflow
  • Booking Flow
  • Admin Panels

Highlights

  • Built a B2C booking portal with search, recommendations, and a responsive booking flow across web and mobile.
  • Implemented partner onboarding plus extranet inventory, rate, and OTA controls.
  • Designed HMS front-office operations and staging / release validation workflows.

Gallery · 4 screens

Technical notes

  • Spans four connected surfaces — guest booking, partner growth, extranet control, and hotel operations — under one design system.
  • Booking flow and admin panels demonstrate both consumer UX and dense operational UI.
  • Responsive React + TypeScript across web and a companion mobile booking experience.
05Identity & Access Governance

Seven Digital Portal

An enterprise IAM portal covering identity lifecycle, SSO enforcement, privilege governance, access request workflows, and audit compliance.

  • React
  • TypeScript
  • Keycloak
  • SSO / OIDC
  • CASL
  • RBAC
  • OpenAPI 3.0
  • REST APIs
  • Audit UI
  • Workflow UI

Highlights

  • Implemented Keycloak SSO with CASL-driven RBAC and a governed access request-to-approval workflow.
  • Built identity lifecycle automation surfaces — Workday sync, provisioning, and deprovisioning flows.
  • Designed audit log tables, API key management, and compliance reporting UI for access governance.

Gallery · 4 screens

Technical notes

  • Full identity lifecycle UI: provisioning request, multi-step approval, Workday sync, and deprovisioning — end to end.
  • Privilege governance surfaces include RBAC policy views, API key management, and access audit trails.
  • Security-oriented compliance UI: audit log tables, alert feeds, and reporting dashboards — patterns directly applicable to IAM and NHI security platforms.

Technical focus

A frontend toolkit tuned for complex products

Tools I reach for on complex products — charting and mapping, live data feeds, access control, and the testing layer that keeps it shippable.

Frontend

  • React
  • TypeScript
  • Next.js
  • React Query
  • Zustand
  • Redux Toolkit
  • Tailwind CSS
  • Responsive UI

Data Visualization

  • ECharts
  • Recharts
  • D3.js
  • Chart.js
  • KPI dashboards
  • Dense data tables

Real-Time & Maps

  • socket.io
  • MQTT
  • WebSocket
  • GraphQL Subscriptions
  • Leaflet
  • Geospatial UI

Auth & Access Control

  • Keycloak
  • SSO / OIDC
  • OAuth2.0
  • JWT
  • CASL
  • RBAC

Testing

  • Playwright (E2E)
  • Jest
  • React Testing Library
  • Vitest
  • Appium

Backend / Full-Stack

  • Node.js
  • FastAPI
  • PostgreSQL
  • MongoDB
  • REST APIs
  • OpenAPI 3.0 / Swagger
  • React Native

Tools & DevOps

  • Git
  • GitHub
  • CI/CD
  • Vercel
  • Docker
  • Postman

AI-Assisted Development

  • Claude Code
  • Codex
  • AI pair programming
  • LLM tooling

Resume

Profile at a glance

Frontend engineer focused on the data-heavy side of product UI — dashboards, real-time monitoring, and geospatial operations tools. I work in React and TypeScript, turning dense multi-source data into interfaces that are fast, role-aware, and easy to act on.

Key strengths

  • Data-dense dashboards: gauges, charts, KPI grids, and dense tables
  • Real-time UI driven by socket.io / MQTT live data
  • Geospatial interfaces and map-based field workflows with Leaflet
  • Auth, SSO, and RBAC with Keycloak and CASL
  • Reusable, maintainable component systems
  • Responsive web interfaces and React Native mobile flows

Focus areas

  • Enterprise dashboards
  • Real-time monitoring
  • Geospatial operations
  • Access governance
  • Booking & hospitality

Download the resume

Frontend-focused. Covers dashboards, real-time UI, geospatial tools, and enterprise workflows.

Download Resume (PDF)

Career

Where I've worked

Eight years across agribusiness, hospitality, and fintech — building production frontends, field-ops mobile apps, and real-time systems.

  1. Full-Stack Engineer

    Ace Resource Advisory Services Sdn Bhd

    Aug 2022 – May 2026

    Remote · Malaysia·Agribusiness

    Built and maintained production platforms for enterprise agribusiness clients — data-dense dashboards, real-time field operations, and a cross-platform mobile app.

    • Built sortable, filterable, paginated dashboards with real-time updates via Socket.io & MQTT, Recharts visualizations, and Keycloak-based authentication flows.
    • Delivered a React Native field-ops app — GPS tracking, drone map rendering, image capture & health detection, and server-side analysis surfaced on web dashboards.
    • Wrote Playwright E2E, React Testing Library component tests, and Appium mobile test suites; shipped consistently via CI/CD working async across time zones.
    • React
    • TypeScript
    • Node.js
    • FastAPI
    • Socket.io
    • MQTT
    • Recharts
    • Keycloak
    • React Native
    • Playwright
    • PostgreSQL

  2. Frontend Engineer

    PT. Ruang Nyaman Abadi

    Mar 2021 – Mar 2022

    Bali, Indonesia·Hospitality

    Built customer-facing web and mobile booking experiences for ruangnyaman.id — a full OTA hospitality platform.

    • Built web and mobile booking apps (React.js, React Native) using React Query for server state and Zustand for global state.
    • Implemented multi-merchant payment flows, partner back office, and onsite booking systems.
    • Translated Figma references into clean, reusable components — pushed back when UX didn't work and validated output against real operational needs.
    • React
    • React Native
    • TypeScript
    • React Query
    • Zustand
    • Responsive UI

  3. Full-Stack Engineer

    Blockchain Zoo

    Sep 2018 – Jan 2021

    Remote·Fintech · Blockchain

    Built frontend and backend features for two products in a small, self-directed startup team.

    • Built React frontends for Fidentiax Insurance Marketplace and ZooBC Explorer — component architecture and state management.
    • Implemented GraphQL subscriptions for real-time data feeds on ZooBC Explorer.
    • Worked across the stack with Node.js and MongoDB in a fast-moving early-stage environment.
    • React
    • Node.js
    • GraphQL
    • MongoDB
    • JavaScript

  4. Full-Stack Engineer

    PT. Sekar Menuh Eventama

    Sep 2017 – Jul 2018

    Bali, Indonesia·Event Management

    Built web-based event management systems from scratch for a Bali-based event company.

    • Designed and implemented event management systems end-to-end using Vue.js and Laravel.
    • Covered front-end UI (Vue.js, JavaScript, HTML, CSS) and backend API (Laravel, PHP).
    • Vue.js
    • Laravel
    • PHP
    • JavaScript
    • HTML
    • CSS

Open to contract & senior frontend roles

Open to frontend-heavy product work.

Email is the best way to reach me.

g3d3.development@gmail.comReview projects
LinkedIn GitHub Resume