Interactive 3D Van Customization Tool
Budget: $1,500 – $3,000 CAD
I'm looking for an experienced developer to create a 3D van customization tool for our website. This tool should allow users to design their own vans (Mercedes-Sprinter, Ford-Transit, or Ram-ProMaster) with a focus on interior layout, fixtures, and additional equipment.
Key Features:
3D Customization: Users can modify interior layouts and add accessories.
Real-time Price Estimation: Users get instant pricing as they customize.
AI-generated Teaser Video: Short videos showcasing custom designs and user-uploaded content.
TypeScript-first stack: React 18, react-three-fiber, Three.js r171 WebGPU, Zustand, Node 20, PostgreSQL.
AI-accelerated development with Cursor: code generation, repo-wide refactors, inline explain/fix loops.
Responsibilities:
Steer Cursor to enhance development.
Enforce best practices in coding.
Deliver production-ready code.
Ideal Skills and Experience:
Strong expertise in TypeScript and React.
Proficiency in 3D graphics with Three.js and WebGPU.
Experience with PostgreSQL and Node.js.
Familiarity with AI development tools, especially Cursor.
Strong problem-solving skills and attention to detail.
Looking forward to collaborating on this exciting project!
2 Scope & Core Features
# Module Success criteria
1 3-D Configurator WebGPU canvas loads < 2 s on desktop / < 4 s on mobile; users drag-drop modules, swap colors, toggle options; FPS ≥ 45 on mid-range laptop.
2 Dynamic Pricing Engine Price updates ≤ 200 ms per change; supports bundle discounts & tax rules; server-validated on checkout.
3 Quotation → Deposit Checkout Stripe + GST, saves order & config snapshot (glTF + JSON) in Postgres; email PDF quote + build-slot calendar invite.
4 AI Teaser Generator (v1) After checkout: user uploads family photo + picks destination; system calls Runway API → returns 1080p ≤ 30 s MP4 within 3 min.
5 Admin Panel (Minimal) CRUD for option catalog, price lists, promo codes; order dashboard with status lane (deposit / in build / complete).
6 Infrastructure & CI/CD Docker-compose dev stack; GitHub Actions lint+test+build; Vercel front-end deploy; Fly.io or Railway for Node API & Postgres.
5 Milestone Timeline (14 weeks total)
Week Deliverable
1 Repo bootstrap; PROJECT_CODEX.md; CI green.
2–4 3-D viewer loads van shells + color/material swaps.
5–6 Option catalog API, Zustand store, live pricing.
7–8 Checkout flow (Stripe test mode) + order DB.
9 AI teaser MVP (placeholder clip) + Redis queue.
10–11 Mobile polish, performance, PWA install prompt.
12 Admin panel CRUD + basic auth (Clerk).
13 Security / accessibility pass, load-test ≥ 500 concurrent users.
14 Launch on staging, hand-off docs, go-live prep.
6 What Success Looks Like
95 + Lighthouse performance & PWA scores on configurator route.
Any product manager can add a new option group via Admin → instant live.
Customer-to-quote time < 10 minutes from blank page to payable deposit.
Codebase passes pnpm test with ≥ 85 % coverage and no ESLint errors.
Clear, version-controlled Cursor prompt history & ADR log so the next dev can onboard in < 2 hours.
7 Ideal Contractor Profile
3 + years React / TypeScript with at least one production Three.js / react-three-fiber project (links or repo welcome).
Comfort with Fastify/Express, PostgreSQL (Prisma), Docker, CI/CD.
Proven experience pair-programming with AI tools (Cursor, Copilot or similar).
Eye for WebGPU performance and mobile optimization.
Fluent English communication; async-friendly; overlaps 2 hours daily with Pacific Time for stand-up.
Key Features:
3D Customization: Users can modify interior layouts and add accessories.
Real-time Price Estimation: Users get instant pricing as they customize.
AI-generated Teaser Video: Short videos showcasing custom designs and user-uploaded content.
TypeScript-first stack: React 18, react-three-fiber, Three.js r171 WebGPU, Zustand, Node 20, PostgreSQL.
AI-accelerated development with Cursor: code generation, repo-wide refactors, inline explain/fix loops.
Responsibilities:
Steer Cursor to enhance development.
Enforce best practices in coding.
Deliver production-ready code.
Ideal Skills and Experience:
Strong expertise in TypeScript and React.
Proficiency in 3D graphics with Three.js and WebGPU.
Experience with PostgreSQL and Node.js.
Familiarity with AI development tools, especially Cursor.
Strong problem-solving skills and attention to detail.
Looking forward to collaborating on this exciting project!
2 Scope & Core Features
# Module Success criteria
1 3-D Configurator WebGPU canvas loads < 2 s on desktop / < 4 s on mobile; users drag-drop modules, swap colors, toggle options; FPS ≥ 45 on mid-range laptop.
2 Dynamic Pricing Engine Price updates ≤ 200 ms per change; supports bundle discounts & tax rules; server-validated on checkout.
3 Quotation → Deposit Checkout Stripe + GST, saves order & config snapshot (glTF + JSON) in Postgres; email PDF quote + build-slot calendar invite.
4 AI Teaser Generator (v1) After checkout: user uploads family photo + picks destination; system calls Runway API → returns 1080p ≤ 30 s MP4 within 3 min.
5 Admin Panel (Minimal) CRUD for option catalog, price lists, promo codes; order dashboard with status lane (deposit / in build / complete).
6 Infrastructure & CI/CD Docker-compose dev stack; GitHub Actions lint+test+build; Vercel front-end deploy; Fly.io or Railway for Node API & Postgres.
5 Milestone Timeline (14 weeks total)
Week Deliverable
1 Repo bootstrap; PROJECT_CODEX.md; CI green.
2–4 3-D viewer loads van shells + color/material swaps.
5–6 Option catalog API, Zustand store, live pricing.
7–8 Checkout flow (Stripe test mode) + order DB.
9 AI teaser MVP (placeholder clip) + Redis queue.
10–11 Mobile polish, performance, PWA install prompt.
12 Admin panel CRUD + basic auth (Clerk).
13 Security / accessibility pass, load-test ≥ 500 concurrent users.
14 Launch on staging, hand-off docs, go-live prep.
6 What Success Looks Like
95 + Lighthouse performance & PWA scores on configurator route.
Any product manager can add a new option group via Admin → instant live.
Customer-to-quote time < 10 minutes from blank page to payable deposit.
Codebase passes pnpm test with ≥ 85 % coverage and no ESLint errors.
Clear, version-controlled Cursor prompt history & ADR log so the next dev can onboard in < 2 hours.
7 Ideal Contractor Profile
3 + years React / TypeScript with at least one production Three.js / react-three-fiber project (links or repo welcome).
Comfort with Fastify/Express, PostgreSQL (Prisma), Docker, CI/CD.
Proven experience pair-programming with AI tools (Cursor, Copilot or similar).
Eye for WebGPU performance and mobile optimization.
Fluent English communication; async-friendly; overlaps 2 hours daily with Pacific Time for stand-up.