JamesQubee

Full-stack web developer

Working builds you can open and try: AI apps, 3D and interactive web, full-stack products.

Every project here is a concept build with real code, automated tests and a walkthrough video, and most have a live demo. Brands, people and data in them are fictional or public-domain.

3D & interactive Concept build

Copperhitch

3D trailer build-and-price configurator with rule checks, live pricing and CAD import

  • Three trailer types built from real dimensions; size, axles and tires reshape the 3D model itself
  • Rule engine checks fitment (lug count, load rating, rim size) and shows the price change before applying
  • Summary with specs, payment estimate, a share link that reopens the build and a one-page PDF build sheet
More detail
  • Price-list editor with validation, plus a one-line embed script that reports finished builds to the host
  • Pipeline turns an 11.3 MB CAD-style sample export into a 679 KB web model with paint and wheel slots

CAD stand-in 11.3 MB -> 679 KB GLB, 57k triangles, 8 draw calls; Lighthouse accessibility 100

  • React 19
  • React Three Fiber 9
  • three.js
  • TypeScript
  • Vite 8
  • Zod
  • pdf-lib
  • Blender + glTF-Transform

Tests: 34 unit + 27 browser (27/27 live) · 13 issues fixed in code review

Open live demo of Copperhitch (opens in a new tab)

AI apps Concept build

Handoff

AI support copilot that streams answers, runs tools, cites sources and asks before acting

  • Hand-written SSE client streams answers and resumes from the last committed step after a dropped connection
  • Approval cards built from each tool's schema; edits show as a diff, and a decline note redirects the agent
  • Citation chips appear while the answer streams; a passage the model never retrieved is marked unverified
More detail
  • Event inspector lists every SSE event and client action; a reload restores open approvals
  • Scripted mode by default plus a live OpenAI mode; the store back office is simulated

QA sweep 23/23; live OpenAI eval (3 runs): tool args 19/19, citations 13/13, approvals 5/5, about $0.0012 per run

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • OpenAI Responses API
  • Server-Sent Events
  • Vitest
  • Playwright

Tests: 79 unit + 7 component + 14 Playwright · 10 issues fixed in code review

Open live demo of Handoff (opens in a new tab)

3D & interactive Concept build

Roomwright

Browser 3D home and interior editor with floor plans, walk mode and an AI designer

  • Draw and move walls on a 2D plan; rooms, finishes and furniture stay attached in the 3D view
  • Drag furniture with wall snapping and collision checks; parametric kitchen cabinets and worktop
  • Time of day with a moving sun and lamps at dusk; walk through and open doors, drawers and appliances
More detail
  • AI designer edits the real model through typed commands, so every change is priced and undoable
  • Live design checks, a priced bill of materials, in-browser path tracing, English and Spanish UI

Whole home 160 draw calls / 350K triangles; Lighthouse accessibility 100 (software WebGL)

  • React 19
  • React Three Fiber 9
  • three.js
  • three-gpu-pathtracer
  • Zustand
  • Vite 8
  • Neon Postgres
  • OpenAI API

Tests: 106 unit + 50 browser (50/50 live) · 33 issues fixed in code review

Open live demo of Roomwright (opens in a new tab)

AI apps Concept build

Linger

AI character chat app with swipe matching, streaming replies and memory across days

  • Swipe deck and streaming chat with live GPT replies; characters recall facts from earlier days
  • Relationship engine: characters warm up, cool down and can leave the chat, and can be brought back
  • Gems and VIP ledger credits a twice-delivered payment webhook exactly once (checkout simulated)
More detail
  • Admin panel shows AI cost per user and per reply, with daily caps and a kill switch
  • 18+ age check, crisis-message handling, report queue, GDPR rights and Web Push notifications

QA 84/84 page views; measured $0.14-0.23 per 1,000 replies; first token p50 about 0.8-1.0 s; live GPT under a $1 per 24 h ceiling

  • Next.js 16
  • React 19
  • TypeScript
  • Postgres + pgvector
  • Drizzle ORM
  • Better Auth
  • OpenAI API
  • Web Push

Tests: 61 Vitest + 16 Playwright · 16 issues fixed in code review

Open live demo of Linger (opens in a new tab)

3D & interactive Concept build

Vanta Reach

Real-time multiplayer 2D space shooter for PC and phone browsers, with a game portal

  • Authoritative server with one Durable Object per sector; desktop and phone players share a sector
  • AI pilots and alien fleets keep sectors busy; lasers, rockets, shields, drones, missions, a world boss
  • Portal with accounts, cloud saves, leaderboards, news and an operator screen in English and Spanish
More detail
  • Stripe Checkout in test mode, a season pass and a simulated rewarded-video flow checked on the server
  • Offline sector runs the same shared simulation in the browser when the server is unreachable

Server tick 0.15-0.77 ms in Node for 1-30 pilots; cap 40 pilots per sector

  • Phaser 4
  • TypeScript
  • Cloudflare Workers + Durable Objects
  • Cloudflare D1
  • Astro 7
  • Stripe Checkout (test mode)
  • Blender

Tests: 106 unit/Worker + 20 browser (20/20 live) · 25 issues fixed in code review

Open live demo of Vanta Reach (opens in a new tab)

Full-stack Concept build

Pentimento

Members-only art vault and marketplace for human-made work, with artist process proof

  • $10/month membership unlocks full-resolution art; visitors see small watermarked previews
  • Each member's code is burned into served images; signed per-member image links expire within 10 minutes
  • Artists upload sketches and studio files as process proof and are verified by a reviewer before listing
More detail
  • Originals sell with a 5% platform fee and 95% plus shipping to the artist (Stripe Connect simulated)
  • Admin reconciles the simulated Stripe ledger against app orders; webhooks are signed and idempotent

QA 74/74 pages; live flow 22/22; 16 public-domain (CC0) works stand in for member art

  • Next.js 16
  • React 19
  • TypeScript
  • Drizzle ORM
  • Postgres (Neon / PGlite)
  • Better Auth
  • sharp
  • opentype.js

Tests: 52 Vitest + 22-step end-to-end flow · 12 issues fixed in code review

Open live demo of Pentimento (opens in a new tab)

3D & interactive Concept build

Petalune

In-browser virtual makeup try-on for lipstick, blush and eyeshadow on a portrait photo

  • Finds 478 face landmarks in the browser with MediaPipe; the photo is never uploaded anywhere
  • Custom WebGL2 shader blends makeup in OKLab and keeps skin texture, lip lines and highlights
  • 8 lipstick shades in four finishes, three blush placements, eyeshadow styles and 4 complete looks
More detail
  • Before/after slider, zoom, download and a look card that lists the products in the look
  • Rendering Lab checks every sample portrait and look live: teeth and eyes unchanged (Delta E 0.00)

Rendering Lab 7/7 checks on 10 portraits x 4 looks; 0 foreign requests on the live site

  • MediaPipe Tasks Vision
  • WebGL2 shaders
  • React 19
  • TypeScript
  • Vite 8
  • Vitest + Playwright

Tests: 32 unit + 20 browser · 9 issues fixed in code review

Open live demo of Petalune (opens in a new tab)

AI apps Concept build

Switchyard

Automation ops console: AI phone agents, n8n workflows, client onboarding and outreach

  • One console for AI phone-agent calls, onboarding, task tracker, approvals, outreach and integration health
  • 7 n8n workflows generated from code and run in a real local n8n instance, with an in-app runner kept at parity
  • Call flow with signed webhooks, transfers and SMS follow-ups; Retell, Twilio and Airtable are simulated
More detail
  • Outreach with lead lists, domains, campaign guardrails that auto-pause, and replies routed to the owner
  • Call transcripts stay in the console; Airtable and Slack get only routing facts and a link

QA 90/90 views; live phone-agent eval 10/10 on the final prompt; 1 more defect self-found and fixed

  • Next.js 16
  • React 19
  • n8n
  • Postgres
  • Drizzle ORM
  • OpenAI API
  • Tailwind CSS 4

Tests: 46 vitest + 9 e2e · 11 issues fixed in code review

Video walkthrough

3D & interactive Concept build

Paper Lagoon

Mobile-first 3D launch island that loads fast inside Instagram and TikTok in-app browsers

  • Tap to walk, drag to look; 8 objects glow as you approach and open music, video, merch and links
  • Poster and sign-up button appear before the 3D; 3D ready in 1.38 s on throttled 4G (lab test)
  • Sign-up form counts sign-ups but never stores what a visitor types
More detail
  • First-party analytics dashboard: time in scene, object opens, CTA taps, sign-ups, in-app source
  • Second brand at night from the same code, one content file and another lighting bake

564 KB total; poster 0.6-0.7 s, 3D ready 1.38 s on 4G (lab, no GPU); 22 draw calls, 38K triangles

  • three.js
  • React 19
  • TypeScript
  • Vite 8
  • Blender (Cycles bake)
  • Vercel Functions
  • Neon Postgres

Tests: 82 unit + 32 browser (32/32 live) · 18 issues fixed in code review

Open live demo of Paper Lagoon (opens in a new tab)

Full-stack Concept build

Lodestar

Multi-store e-commerce analytics: Shopify, Meta Ads and Google Ads in one dashboard

  • Revenue, spend, MER and platform ROAS for several stores side by side, converted at daily ECB rates
  • Connectors built to Shopify Admin GraphQL, Meta Marketing and Google Ads API shapes; run against local mocks
  • Sync engine with leases and idempotent upserts, plus a Data Health page showing each integration
More detail
  • Creative win rates per strategist from ad naming conventions, with versioned winning rules
  • Role-based views, editable tiles, UTM attribution vs platform ROAS, AI weekly summary with number checks

QA 60/60 views; end-to-end flows 18/18

  • Next.js 16
  • React 19
  • TypeScript
  • Postgres
  • Drizzle ORM
  • Tailwind CSS 4
  • OpenAI API

Tests: 37 (19 unit + 10 sync integration + 8 regressions) · 8 issues fixed in code review

Video walkthrough

3D & interactive Concept build

Proofroom motion mockups

Four animated one-page site mockups for fictional B2B brands, plus a before/after hub

  • Four brands (fintech SaaS, machining, architecture, robotics), each with its own motion style and link
  • Shared Next.js + GSAP + Lenis motion kit; motion is declared with data attributes on plain markup
  • Scroll-driven 3D robot arm modelled in code, with inverse kinematics running a palletizing cell
More detail
  • Hub shows each fictional brand's goals, its old site and a before/after slider, plus a showreel
  • Reduced-motion and no-JS fallbacks, covered by 265 automated QA checks at three screen widths

Lighthouse desktop 94-97 (Torvik 3D 82), accessibility 96-100

  • Next.js 16
  • React 19
  • GSAP 3.15
  • Lenis
  • React Three Fiber 9
  • three.js
  • Tailwind CSS 4

Tests: QA 265/265 + regressions 27/27 · 23 issues fixed in code review

Open live demo of Proofroom motion mockups (opens in a new tab)

Full-stack Concept build

Bandroom

Browser music tool: synthesized keyboard, drums and guitar with recording and MP3 export

  • Every sound is synthesized with Web Audio, no samples; all 88 keys measured in tune to within 0.004 cent
  • Record, layer instruments, play back and read a text note log; a 60 s take saves as MP3 in about 1.5 s
  • Embeds through an iframe with a versioned postMessage bridge, or as a custom element
More detail
  • Challenge mode lights the next notes and scores attempts; the host page re-checks the returned log
  • Two swappable hand-drawn SVG skins; multi-touch chords and glissando on phones and touch laptops

Guitar 156 positions within 0.07 cent; MP3 correlation 0.9999; first load 33.7 kB gzipped; tap-to-engine p50 1.2 ms

  • TypeScript
  • Vite 8
  • Web Audio API
  • WebAssembly MP3 encoder
  • SVG
  • postMessage bridge
  • Vitest
  • Playwright

Tests: 51 unit + 94 Chrome e2e · 19 issues fixed in code review

Open live demo of Bandroom (opens in a new tab)

More builds

Full-stack Concept build

Cluefold

Real-time co-op phone game for 2-5 players, sold through a simulated Shopify store

  • Each phone holds different clues; the server keeps the clock and checks every answer
  • One Durable Object per game is the single referee, with reconnects and checks for half-open sockets
More detail
  • Scripted (non-AI) character chat, hints, pause, scoring and a shareable results page
  • Admin with TOTP two-step sign-in, content editor, live spectating with game-master actions, reports and CSV
  • Paid order in a simulated Shopify store creates one game per unit; the link is in the confirmation email

local load test: 10 concurrent games at 86 ms median fan-out

  • Cloudflare Workers
  • Durable Objects
  • Cloudflare D1
  • React 19
  • Vite
  • Tailwind CSS 4
  • Liquid

Tests: 28 unit + 46 worker + 8 Playwright · 12 issues fixed in code review

Video walkthrough

3D & interactive Concept build

Timescope

Children's time-travel 3D globe: 5,000 years of borders and stories on CesiumJS

  • Time slider through 20 historical border maps from 3000 BC to 2000 on a 3D globe
  • 32 stories with Simple English Wikipedia text, Wikidata dates and credited Wikimedia Commons photos
More detail
  • Made for small hands: tap tolerance, locked tilt and controls of at least 44 px
  • Calm mode, strong colours, three text sizes, read-aloud and a plain list view for screen readers
  • Anonymous sign-in with progress in Firestore, offline sync and security rules tested on the emulator
  • React 19
  • TypeScript
  • CesiumJS 1.146
  • Firebase (Auth, Firestore)
  • Vite 8
  • Playwright

Tests: 72 unit + 15 rules/auth + 47 e2e · 8 issues fixed in code review

Video walkthrough

3D & interactive Concept build

Halvorn E7

3D product site: a Cycles-rendered film hands over to a live WebGL model, with a CMS

  • Product modeled by Blender scripts; the Cycles hero film ends where the live WebGL model takes over
  • Scroll-driven story with an exploded view and CMS-driven callouts
More detail
  • Orbit viewer with three finishes; tap any part to read about it
  • Payload CMS in the same app: drafts, live preview and a 3D field to place callouts on the model
  • Pipeline page showing the model from blockout to clay, wireframe and final render

Lighthouse accessibility, best practices and SEO 100; performance 77 desktop / 46 mobile on software WebGL

  • Next.js 16
  • React 19
  • Three.js r186
  • React Three Fiber 9
  • GSAP ScrollTrigger
  • Lenis
  • Payload CMS 3
  • Blender 4.5 + Cycles

Tests: 35 unit + 26 e2e · 13 issues fixed in code review

Video walkthrough

Full-stack Concept build

Bellwyn

QR restaurant pager PWA: the customer's own phone rings when the order is ready

  • Customer scans a QR to link their phone to an order number; no app, no sign-up, no personal data
  • Full-screen alert with sound and vibration while the page is open, Web Push when it is not
More detail
  • Staff counter board: new order with QR, one-tap call, re-ring, and who saw the alert
  • Multi-tenant admin with branding, messages, staff tablets and analytics; Arabic and English (RTL)
  • Subscription billing and Square POS orders run against simulated Stripe- and Square-shaped services

call-to-ring p50 181 ms on the local dev server; customer page 14 KB gz JS

  • Cloudflare Workers
  • Hono
  • Durable Objects
  • Postgres
  • React 19
  • Preact
  • Web Push

Tests: 33 unit + 34 db + 20 e2e · 9 issues fixed in code review

Video walkthrough

3D & interactive Concept build

Scanfield

Mobile browser football game that trains checking your shoulder before the ball arrives

  • Check your shoulders while the pass travels, then tap the pitch to pass, turn or set it back
  • Players outside your view cone stay where you last saw them, so an old picture goes stale
More detail
  • Tap feedback is drawn in the first frame after touch; about 1 ms of JavaScript per tap
  • Coach board scores every option and shows your scanning timeline; each moment is a JSON scenario
  • Cloudflare Worker + D1 backend with a Pro paywall; payments and analytics are simulated in the demo

about 20 draw calls and 15k triangles per frame; about 220 KB gz bundle; 10 scenarios

  • Three.js
  • TypeScript
  • Vite 8
  • Cloudflare Workers
  • Cloudflare D1
  • Web Audio API

Tests: 77 unit + 76 worker + 36 e2e (189) · 13 issues fixed in code review

Open live demo of Scanfield (opens in a new tab)

3D & interactive Concept build

Neapline

Single-page crypto research concept where live Coinbase trades ripple a WebGL seascape

  • Each real BTC-USD trade from Coinbase's public feed sends a ripple through a seascape via a WebGL shader
  • Falls back to a recorded real market session; the header always says Live, Replay or Snapshot
More detail
  • Trade-idea table tracks each call's entry zone, targets and invalidation against live prices
  • Position-size calculator with risk, stop, leverage and fees that warns when liquidation precedes the stop
  • Night and day themes, design-notes overlay and a scripted chat preview; sea photos are AI-generated

Lighthouse desktop 96; accessibility, best practices and SEO 100

  • React 19
  • TypeScript
  • Vite 8
  • WebGL
  • GSAP
  • Lenis
  • Coinbase Exchange API

Tests: 114 vitest + 120/120 browser checks · 26 issues fixed in code review

Open live demo of Neapline (opens in a new tab)
Taskline screenshot

Full-stack Concept build

Taskline

Project tracker with accounts, Postgres, a REST API and a drag-and-drop board

  • Email and password accounts with database sessions in an HTTP-only cookie
  • Drag cards between columns by mouse, touch or keyboard; a failed save rolls the move back
More detail
  • Every request is scoped to the signed-in user; tests confirm no user can read another's data
  • One-click demo creates a private sample workspace that is deleted after 24 hours
  • Dashboard with open, due-this-week, overdue and completed counts and progress per project
  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Postgres
  • Drizzle ORM
  • Better Auth
  • dnd-kit

Tests: 45

Open live demo of Taskline (opens in a new tab)