Loading experience…
David Chandra
Contact

Senior Frontend Specialist · 8 Years of Experience

InterfacesThatFeelInstant.EcosystemsThatScale.

I don't just build interfaces — I consolidate complex business requirements into lightning-fast web and mobile applications.

Scroll to explore

01 — Core Specialization

Three Disciplines. One Standard.

  • 01

    Mobile Architecture

    Robust, native-feeling iOS & Android applications built with React Native — one codebase, two platforms, zero compromise on performance.

  • 02

    Web Engineering

    SEO-optimized, ultra-performant platforms with Next.js, React, and TypeScript — engineered for Core Web Vitals from the first commit.

  • 03

    Enterprise Hubs

    Consolidating fragmented tools — communication, task management, storage — into unified corporate ecosystems that teams actually enjoy using.

02 — Featured Impact & Experience

Eight Years of Shipped, Measurable Impact

Wistkey

Senior Analyst Programmer · Mar 2024 — Present
  • Built the Storeberry Store & Editor on Next.js — a visual commerce platform where merchants compose their storefronts in real time.
  • Delivered the FEHD website for Hong Kong's public sector, hardened with Playwright end-to-end test coverage.
  • Own frontend delivery across a parallel portfolio: GreenHoop web & apps and the SosoMall dashboard & apps.

Next Level Ventures

React Native Developer · 2023 — 2024
  • Engineered SuperInvestor, a React Native investment platform where real-time data and trust in every pixel are non-negotiable.
  • Shipped the FID App end to end — from architecture decisions to App Store and Play Store delivery.

Ditoko.com & Handmadenesia

Frontend Developer · 2018 — 2023
  • Built an e-commerce ecosystem from the ground up and scaled it across five years of product evolution.
  • Delivered Krako HR, an all-in-one platform consolidating people operations into a single product.
  • Led web & app performance optimization and shaped code-architecture standards adopted across the team.

03 — Deep Dive

Under the Hood

Active Production Systems

About Me

Hi, I'm David Chandra.

Senior Frontend Specialist — 8+ years shipping web and mobile products at production scale.

I specialise in Next.js on the web and React Native on mobile — the two ends of the modern product surface. Eight years in, my work has one throughline: consolidating complex business requirements into applications that are fast by default — multi-tenant SaaS platforms, government licensing systems, and fintech products with hard frame budgets.

Since 2025 I've been pursuing a Bachelor of Information Technology at Asia Cyber University — aligning nearly a decade of hands-on industry experience with the formal foundations of computer science.

Live Performance Monitor

--fps

Frame rate measured live from the WebGL scene behind this page — not a screenshot, not a claim.

100
Performance
100
Accessibility
100
Best Practices
100
SEO

Case Study 01 — Multi-Tenant SaaS · Worldwide

Storeberry Store & Editor

A visual commerce editor and multi-tenant SaaS on one Next.js core — a single React component tree powers the editing canvas and every live storefront.

The Challenge

Merchants register at mystoreberry.com/auth/login and expect an isolated storefront on their own dynamic subdomain, live seconds later — while the entire platform ships from one core repository, with zero drift between editor preview and production.

My Architectural Action

I engineered a shared rendering core: one component tree renders both the internal editor canvas — with fully serializable undo/redo state — and the published storefront. Above it, Next.js middleware resolves each request's Host header and rewrites it into a tenant-scoped route tree, so auth, editor, and every dynamic client subdomain are served by a single deployment.

Impact / Result

What a merchant composes in the canvas is, by construction, what customers see in production. Tenants provision instantly at registration, and every platform feature lands on all storefronts simultaneously.

mystoreberry.comauth · registerNext.js Middlewarecore repositoryhost → tenant rewriteEditor Canvasundo · redo stateLive Storefrontclient subdomain{tenant}.next.mystoreberry.com

one core · one canvas · n storefronts

  • Next.js
  • TailwindCSS
  • TypeScript
  • Figma

Coding Philosophy

Code is read far more often than it is written.
  • Clean over clever — readable, boring, reliable code that the next engineer thanks you for.
  • Modular by default: feature-sliced boundaries, thin components, logic in small testable units.
  • AI-accelerated workflow — modern AI tooling for scaffolding, review, and test coverage; human judgment for architecture.

Case Study 03 — Web & Mobile · ESG · Hong Kong

GreenHoop

Built with ASTD & Fujitsu HK

A high-collaboration build with ASTD & Fujitsu Hong Kong: one platform across web and mobile, digitising the recycling supply chain end to end — collection to certified end-product.

Data & Reporting — Five Guarantees

  • Traceable01
  • Trackable02
  • Transparent03
  • Verifiable04
  • Autonomous05

Automated Playwright end-to-end suites guard every pipeline stage — the five guarantees above are enforced by tests, not by promise.

Web
  • React.js
  • Material UI
  • TailwindCSS
  • TypeScript
  • Playwright
  • Figma
Mobile
  • React Native
  • TypeScript
  • Figma

Case Study 02 — GovTech · Hong Kong

FEHD Licensing System

Mission-critical licensing infrastructure for Hong Kong's Food & Environmental Hygiene Department — one authenticated gateway, two isolated portals.

  • Role-Based Access Control at the architecture level: the gateway resolves each user's role at authentication and routes them into one of two fully isolated portals — separate surfaces, synchronised licensing data.
  • Licensing Portal (public): business owners track their operations, update registered business data, and check licence application status across Hong Kong.
  • Internal Portal (restricted): FEHD officers fill, process, and verify licence registration workflows end to end.
  • Every role-gated path ships behind automated Playwright end-to-end suites — in the public sector, a green pipeline is the release gate.
Auth Gatewayrole resolution · rbacLicensing Portalpublic · businessInternal Portalgov staff

isolated portals · synchronized data

  • React.js
  • TailwindCSS
  • TypeScript
  • Playwright
  • Figma

Archived Ventures & Engineering Case Studies

Products that have since been sunset — the engineering decisions still hold.

Archive 01 — Enterprise Hub · Indonesia

Archived

Krako HR

An all-in-one corporate workspace built at startup speed on React Native — consolidating WhatsApp-class chat, Trello-class task boards, and Drive-class document storage into a single hub.

Zero → production-ready in under 30 days

Real-Time Chat

Pusher over WebSockets with channel access scoped to employee divisions, plus native push notifications — conversations never leak across organizational boundaries.

Geofencing Attendance

GPS-validated check-in that blocks attendance outside the office radius. Clock in after 09:00 and a conditional state workflow intercepts the record, requiring a late-reason form before it commits.

State-Driven Task Boards

Task management modelled as explicit state transitions instead of fragile drag-and-drop — every move is a validated status change.

Feature-Splitting

Delivery footprint split per platform: web ships only Chat & Tasks, while the mobile app carries the full ecosystem. One codebase, minimal bundles.

GPS Geofenceblock outside radius≥ 09:00 → reason formPusher · WSdivision channelspush notificationsReact Nativecentralized hubWebchat · tasks onlyMobilefull ecosystem

sensors · sockets · split delivery

  • React Native
  • Pusher
  • WebSockets
  • TypeScript

Archive 02 — E-Commerce Migration · Indonesia

Archived

Ditoko.com

A direct-to-consumer commerce platform — the store is the seller, not a marketplace — rebuilt end to end from a legacy client-side stack onto Next.js.

  • Total ecosystem migration: legacy CSR re-architected on Next.js with SSR + Incremental Static Regeneration — thousands of product pages served statically, indexed by search engines, and regenerated on demand.
  • Conversion-first flow: browse → product page → order via WhatsApp gateway integration, no in-app checkout. Instant page loads directly lifted the WhatsApp order conversion rate.
  • Companion Android app delivered with React Native, sharing the product domain model with the web platform.
Legacy CSRclient-side renderingNext.js SSR · ISRthousands of product pagesseo · instant loadsWhatsApp Gatewaydirect order apifull rebuildorder intent

csr → ssr/isr → conversion

  • Next.js
  • React Native
  • TypeScript

Archive 03 — Fintech Cross-Platform · Worldwide

Archived

SuperInvestor & FID App

Cross-platform investment products — React Native on iOS/Android, Next.js on web — where real-time market data meets a hard 60fps rendering budget.

  • Dynamic financial charting optimised at the render layer: memoised series transforms and frame-budget profiling to eliminate dropped frames during live market updates.
  • Redux as the single source of truth — complex state normalised once, synchronised in real time, and hydrated identically into the web and mobile shells.
  • One ingestion pipeline: REST/GraphQL feeds the store, so every platform renders the same tick at the same moment.
REST · GraphQLmarket data ingestionRedux Storenormalize · hydratereal-time syncWebnext.jsMobilereact native

one store · every screen · 60fps

  • React Native
  • Next.js
  • Redux
  • TypeScript

Archive 04 — Foundational Build · Indonesia

Archived

Handmadenesia

Early-career e-commerce and event platform — and the project where raw design mockups became a disciplined, reusable component system.

  • Partnered with the IT Lead and UI/UX designers working in Sketch, translating raw mockups into a modular frontend component library.
  • One visual language, two runtimes: design atoms mapped to matching React (web) and React Native (Android) components — consistent by construction.
Sketchraw design mockupsAtomic UI Systemtokens · atoms · moleculesreusable · consistentReactwebReact Nativeandroid

design → system → screens

  • React
  • React Native
  • Sketch

Education

Enrolled Oct 2025In Progress

Asia Cyber University

Bachelor of Information Technology (B.Sc.)

Pursuing a formal degree to align theoretical foundations with 8 years of hands-on industry experience.

2015 — 2018

SMK Strada Daan Mogot

High School Diploma — Interactive Technology & Video Graphics

04 — Contact

Let's Build Something High-Performance Together.

Whether it's a mobile app that needs to feel native, a web platform that needs to be instant, or a fragmented toolchain that needs to become one ecosystem — I'd love to hear about it.

© 2026 David Chandra