A Star Shop
Overview
A Star Shop is a clothing storefront, live at web-astar.vercel.app. It presents an A*Star Collection of eight products across four categories (hoodies, tees, jackets, and pants) with IDR pricing, a cart, stock badges, and a product-detail modal, and it gates ordering behind a customer account.
Problem
The storefront needs a browsable catalog with real stock states, and ordering needs to be tied to customer accounts.
Role
Web Developer
Key Decision
Keep browsing on a single-page catalog with a product-detail modal instead of separate product routes, and gate ordering behind an account: an out-of-stock card cannot be opened, and placing an order prompts sign-up or sign-in.
Solution
A Next.js + React storefront styled with Tailwind CSS and backed by Supabase auth. The A*Star Collection grid shows category, IDR price, and stock badges (one product renders OUT OF STOCK); the product-detail modal shows the image, price, and available count. Registering captures name, phone, and address, and the cart tracks the shopper's picks.
Outcome
Live at web-astar.vercel.app. Eight products across four categories (hoodies, tees, jackets, pants) with IDR pricing, cart, stock badges, and an account-gated order flow on Next.js + Supabase.
Gallery
Stack
- Next.js
- React
- Tailwind CSS
- Supabase
- Vercel