Frontend engineer, 10+ years building complex, data-heavy UIs.
For the past three years I've taken the DCWiz AI canvas from an empty repo to a product used in enterprise demos: real-time sessions, workflow tooling, charts, and file previews in React and Next.js. When it helps, I go deeper into APIs, auth, testing, and CI.
shipping production products across AI, media & gaming
cut critical fetch times with parallelisation & caching
built the DCWiz AI canvas from scratch, now used in enterprise demos
led frontend Keycloak / NextAuth through two major upgrades
About
I build data-heavy enterprise UIs, from prototypes in Figma to production in React. Lately that has meant AI-assisted workflow canvases, real-time interfaces, and frontends that stay usable as features pile on.
I use AI tools to move faster on prototyping and debugging, with code review and automated tests as guardrails. I also turn recurring UI into shared MUI patterns so teams ship more consistently.
Previously at Garena and Warner Music, now a Frontend / Full Stack Engineer at NTU (Red Dot AI).
Next.js, React, TypeScript, MUI, Redux Toolkit, React Flow, ApexCharts, RTK Query, NextAuth, i18n
Playwright, Cypress, GitHub Actions, Postman
Node.js, Python (FastAPI), WebSockets/SSE, Postgres, Keycloak, Docker
Figma, design systems, accessibility-aware UI, data visualisation
Selected work
Red Dot AI Rebrand: Wix → Webflow, Solo
Took the company rebrand end to end. Migrated the corporate site from Wix to Webflow and built a second site, Red Dot Space, from scratch. Both shipped to production within a month.
- Migrated rda.ai from Wix to Webflow, and built reddot.space from scratch
- Leaned on Claude and Claude MCP for refactoring and CMS iteration, saving roughly 8 days
- Set up SEO, GA4, and Google Search Console on both sites
- Built an internal branding system: a shared brand design system, plus self-serve name card and email signature generators
DCWiz AI Canvas: real-time workflow builder
Built from scratch in Next.js and React Flow, and grown into a production tool used in enterprise demos. Connect nodes, inspect live data, review outputs, and move through dense flows without losing context.
- Built real-time multi-user sessions with SSE streaming for live agent runs
- Shipped rich previews: image upload (MinIO), multi-sheet XLSX, HTML report nodes, chart templates
- Refined the canvas UX with keyboard shortcuts, focus modes, and edge visibility controls
- Turned recurring UI into reusable node patterns, export flows, and multilingual tooling
DCWiz platform: simulation, monitoring & AI recommendations
The broader enterprise analytics product: Figma prototypes through a Next.js + MUI architecture refactor, with FastAPI/Pydantic aligned to the frontend.
- Cut critical fetches from ~4s to ~1s with request parallelisation and caching
- Led the frontend Keycloak/NextAuth integration through two major upgrades (v6→v9, v22→v25)
- Delivered simulation, monitoring, and AI-recommendation modules: version history, model comparison, view-only access, XLSX export
- Standardised on MUI across modules and added Cypress E2E with responsive layouts
Figma Make Bot: AI-Assisted Design Automation
Side project: turns a topic, spec, or URL into a Figma Make prompt, submits it, and iterates via screenshot-based review and targeted fixes.
- Structured prompts from ideas, docs, and reference URLs
- Automated submit/retry in Figma Make with follow-up fixes
- Screenshot review for fidelity and demo readiness; logged iterations
Client Portal: Royalties Data & Insights
Enterprise royalties portal: rebranding and analytics enhancements with client stakeholders.
- High-traffic analytics views in production
- Monthly sprint deliveries with enterprise clients
Analytics: Android App
Enterprise Android analytics app: shipped pending features, UX improvements, and ongoing maintenance.
- Delivered features from development through release and support
- Improved stability and in-app UX
Earlier work: demos, campaigns & microsites
Internal OKTA demo clone of the analytics app; responsive event and campaign sites across SEA; gaming event and community microsites.
How I work with design
I turn requirements and wireframes into Figma prototypes, then into reusable MUI components and workflow patterns, especially for canvas controls, preview states, and data-heavy screens.
- Shared component library across modules and workflows
- Reusable patterns for canvas controls, previews, and dense data UI
- Work with PMs and researchers to validate UX before and after build
Beyond work
Before AI, I spent about a decade in gaming. At Garena I was the only frontend developer in Malaysia, shipping campaign sites and microsites for League of Legends and EA Sports across Southeast Asia.
I still spend weekends on event floors. I've stage-managed the PUBG Mobile Malaysia National Championship, run guest liaison for the MLBB Southeast Asia Cup, and worked backstage at Comic Fiesta on and off from 2013 to 2024.