Green Star Store
A full-featured ecommerce storefront with real seeded data and a mocked checkout.
Tech stack
- React
- TypeScript
- Vite
- Tailwind CSS
- React Router
- PostgreSQL
- Vitest
Product catalog with search, filtering, sorting and infinite scroll; product pages with image galleries and reviews; cart, wishlist and promo codes; and a validated multi-step checkout with order confirmation and history. Products, reviews and orders are real data seeded into Postgres and served from a small serverless API.
Features
- Home page with a hero, category tiles and a top-rated rail; product cards show sale pricing plus low-stock and out-of-stock badges.
- Shop page pairing a filter sidebar (category, price range, minimum rating, in-stock only) with a sort control and an infinite-scroll grid.
- Product pages with an image gallery, stock status, a quantity control, and a reviews section with a rating breakdown.
- Cart with quantity edits, line removal, promo codes and a live order summary; wishlist items move to the cart individually.
- Three-step checkout — shipping, mocked payment, review — with a step indicator and per-step validation.
- Order confirmation with an order number and estimated delivery, plus an Orders page listing past orders by email.
About this project
A portfolio ecommerce build that runs on real data rather than fixtures: the product catalog, reviews and orders are seeded into a Neon Postgres database and served through a small set of serverless API routes.
The storefront leads with a hero, category tiles and a top-rated rail. Product cards surface sale pricing and low-stock and out-of-stock badges. The shop page pairs a sidebar of filters (category, price range, minimum rating, in-stock only) with a sort control and an infinite-scroll grid.
Each product has an image gallery, stock status, a quantity control, and add-to-cart and wishlist actions, plus a reviews section with a rating breakdown. The cart supports quantity edits, line removal, promo codes and a live order summary with subtotal, shipping and tax, feeding a multi-step, validated checkout.
Payments are mocked — no real charge is ever made.