← projects
Purecreate
A 3D apparel customizer that designs your shirt in real time and generates decals from a text prompt with DALL·E 3.
What it is
Problem
Designing custom apparel usually means clunky mockup tools or a slow back-and-forth with a designer — there's no fast, visual way to see an idea on the product and iterate.
Solution
A single Next.js app pairing a real-time react-three-fiber 3D garment canvas with DALL·E 3 decal generation: pick colors, type a prompt, and watch the design appear on a rotating shirt. It consolidates an older Vite + Express monorepo into one deployable app, with the OpenAI calls living in Route Handlers instead of a separate server.
What it looks like
Source assetAn original texture from the customizer's public asset library, used to test live material and decal changes on the garment.
Built with
Frontend
- Next.js 15
- React 18.3
- Tailwind CSS 3.4
3D
- react-three-fiber
- three.js
- Valtio
AI + API
- OpenAI DALL·E 3
- Next.js Route Handlers
Highlights
- Real-time 3D garment customizer (react-three-fiber)
- AI decal generation from a text prompt (DALL·E 3)
- Live color and texture controls
- Single deployable Next.js app — OpenAI in Route Handlers
Engineering
- Process 01
Collapse two deployments into one application
- Context
- The original Vite frontend and Express image API required separate hosting, environment wiring, and CORS configuration.
- Approach
- Move the image endpoint into a Next.js Node Route Handler and keep the OpenAI key server-side.
- Outcome
- Deployment and same-origin requests are simpler, but the image route inherits serverless duration and provider-latency limits.
- Process 02
Keep WebGL outside server rendering
- Context
- Three.js and its renderer depend on browser globals and add substantial client work.
- Approach
- Dynamically import the canvas with server rendering disabled while the rest of the application uses the App Router.
- Outcome
- The page shell can render independently, but the current renderer compatibility regression still has to be repaired before the demo is healthy.
Under the hood
Architecture notes
- The 3D scene is dynamically imported (ssr: false) so heavy WebGL never blocks first paint.
- OpenAI calls live in a Node.js Route Handler with a server-only key and a 60-second duration budget.
- Valtio holds reactive design state shared between the UI and the 3D scene.
- Moving the API and canvas under one origin removed the old Express server and its CORS boundary.
Challenges
- three.js touches browser globals, so the canvas must stay outside server rendering.
- The current public deployment is behind a Vercel security checkpoint, and a clean local install exposes a React renderer compatibility regression; the source is available, but the demo should not be presented as healthy.
Outcome
A source-available 3D and AI product prototype plus a completed architectural migration from a Vite/Express split deployment to a single Next.js application. The present demo still needs compatibility repair.
Roadmap & lessons
Lessons learned
- 01Dynamically importing the 3D scene keeps a heavy WebGL app fast to first paint.
- 02Collapsing a frontend + API monorepo into one Next.js app removes a whole deploy surface.
Next steps
- 01Repair the current renderer compatibility regression
- 02Restore a publicly accessible demo
- 03Add saved designs and more garment types