Engineering Lab · 20 projects

Show, don't tell.

20 working projects that each prove a senior-level skill: design systems, accessibility, performance at scale, AI interfaces, realtime collaboration, offline-first data, WebGL and product UX. Everything is hand-built with no UI libraries and runs right here in your browser.

• 🎛️01

  Token Studio

  A live design-token editor that themes a whole component kit and audits its own contrast.

  • Design tokens
  • CSS custom properties
  • OKLCH color

  Open the demo
• ♿02

  Accessible Components

  Combobox, dialog, tabs, menu, toast and slider, built from scratch to the WAI-ARIA patterns.

  • WAI-ARIA APG
  • Focus management
  • Keyboard UX

  Open the demo
• 🔍03

  A11y Inspector

  Contrast checker, color-vision simulator and focus-order visualizer in one audit tool.

  • Color science
  • SVG filters
  • Accessibility auditing

  Open the demo
• 🌀04

  Motion Lab

  A spring-physics playground and motion guidelines for when animation helps and when it hurts.

  • Spring physics
  • FLIP animations
  • Gesture handling

  Open the demo
• 📊05

  100k-Row Data Grid

  Sort, filter, resize and edit 100,000 rows at 60fps with a hand-rolled virtualized grid.

  • Virtualization
  • Rendering performance
  • Keyboard grid nav

  Open the demo
• 📈06

  Analytics Dashboard

  A responsive product analytics dashboard with hand-built, accessible SVG charts.

  • Data visualization
  • SVG
  • Responsive layout

  Open the demo
• ⚡07

  Performance Lab

  Interactive experiments that make React and browser performance visible.

  • React rendering
  • Profiling
  • Debounce/throttle

  Open the demo
• 💹08

  Live Market Feed

  A high-frequency realtime ticker that handles thousands of updates per second gracefully.

  • Realtime UI
  • Backpressure
  • Batching

  Open the demo
• ✨09

  AI Chat Interface

  The conversational UX patterns I design for production AI: streaming, citations, tools.

  • AI UX
  • Streaming UI
  • Tool calls

  Open the demo
• 👥10

  Multiplayer Cursors

  Realtime presence and a shared canvas. Open it in two tabs and they sync.

  • Realtime sync
  • BroadcastChannel
  • CRDT basics

  Open the demo
• 📝11

  Offline-First Notes

  A notes app that works with no network, persists to IndexedDB and syncs when you're back.

  • IndexedDB
  • Offline-first
  • Sync queues

  Open the demo
• 🔀12

  State Machines

  Complex UI flows modeled as finite state machines, with a live visual of the machine.

  • Finite state machines
  • Statecharts
  • Async flows

  Open the demo
• 🎨13

  Shader Studio

  A live GLSL editor with presets, uniforms and instant hot-reloading WebGL.

  • WebGL
  • GLSL
  • GPU programming

  Open the demo
• 🧭14

  Infinite Canvas

  A Figma-style whiteboard: pan, zoom, draw shapes, select and transform, with undo.

  • Canvas 2D
  • Coordinate systems
  • Hit testing

  Open the demo
• 👟15

  3D Product Configurator

  A Three.js product customizer: materials, colors and parts, with a shareable config.

  • Three.js
  • PBR materials
  • 3D UX

  Open the demo
• 📦16

  Upload Pipeline

  Drag-and-drop images, compress them in a Web Worker, and upload in resumable chunks.

  • Web Workers
  • OffscreenCanvas
  • File APIs

  Open the demo
• 🗂️17

  Kanban Board

  Drag-and-drop task board that works by mouse, touch and keyboard, with optimistic updates.

  • Drag and drop
  • Keyboard DnD
  • Optimistic UI

  Open the demo
• 🧾18

  Smart Forms

  A multi-step form with schema validation, autosave, conditional logic and great errors.

  • Form UX
  • Schema validation
  • Autosave

  Open the demo
• ✍️19

  Markdown Editor

  A Notion-flavored editor with slash commands, live preview and a hand-written parser.

  • Parsing
  • Text editing UX
  • Slash commands

  Open the demo
• 🌍20

  Global UI (i18n)

  One UI in eight locales: RTL layouts, plural rules, dates, currency and time zones.

  • Internationalization
  • Intl APIs
  • RTL layout

  Open the demo