← projects
Purecreate
A 3D apparel customizer that designs your shirt in real time and generates decals from a text prompt with DALL·E 3.
Context
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.
Approach
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.
Features
- 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
Architecture notes
- The 3D scene is dynamically imported (ssr: false) so heavy WebGL never blocks first paint.
- OpenAI calls live in Route Handlers — no separate Express server, server-side key only.
- Valtio holds reactive design state shared between the UI and the 3D scene.
Challenges
Outcome
A deployed 3D + AI customizer that turns a text prompt into a design on a rotating garment — and a clean Vite/Express → Next.js consolidation.
What I learned
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
Next steps
- 01Add saved designs
- 02Support more garment types
- 03Tighten mobile 3D controls