Mission 8 of 12
Build a Responsive Clothing Store
Build a responsive online clothing store - product catalog, product pages and a cart - with product data in PostgreSQL on Railway and images in Supabase Storage. Looks great on every screen.
By the end of this mission: “I can build a responsive, multi-page store with a cart, backed by PostgreSQL and Supabase Storage.”
The tech stack for this mission
React
React Router
Bootstrap
PostgreSQL
Railway
VercelWhat you learn, checkpoint by checkpoint
Checkpoint A
Build the catalog and product pages with routing
- Build the catalog grid and individual product pages
- Wire up React Router for catalog, product and cart routes
- Compose reusable product-card and layout components
Checkpoint B
Load products from PostgreSQL and images from Supabase Storage
- Store products in PostgreSQL and read them into the catalog
- Upload and serve product images from Supabase Storage
- Link each product page to its PostgreSQL row
Checkpoint C
Add the cart, make it responsive, and deploy
- Add a cart - add, remove and update quantities
- Make the whole store responsive with Bootstrap breakpoints
- Test the full flow and deploy to Vercel
AI companion mode · AI as Reviewer
You write the code · AI reviews it
Companion suggests refactors and reviews PRs. You write the code; AI catches what you miss. You decide what to accept.
What proves you’re done
Deployed responsive store + portfolio case study
Every mission ships something real and public. If you can’t explain it, you can’t submit it.
Reading is not building.
This mission is part of the paid 12-week programme - but the way we teach is free to try. The free trial puts you inside Sigmo, the learning portal our students use daily, with the 6 Projects in 6 Days precourse: real projects, real code, published to your own GitHub.
Start the free trialReady for the real thing?
The AI-Native Software Development Programme - all 12 missions with a live cohort, daily Buildroom, and mentors watching your back.