A single-page e-commerce application built with React, React Router, and the Context API. Users can browse a live product catalog, view product details, manage a global shopping cart, and go through a mock-authenticated checkout — all without a single full browser page reload.
Built as Sprint 6 of a frontend engineering residency, focused on client-side routing and cross-component state management.
- Live site: https://shopzone-nine-dun.vercel.app/
- GitHub repo: https://github.com/Ankan226/shopzone
BrowserRouterwith routes for/,/shop,/contact- Dynamic routing to
/product/:idon product click - Product data hydrated via
useParams()+ a live fetch to the product API
CartContextbuilt with the Context API (no Redux, no prop drilling)- "Add to Cart" dispatches items into global state from the Product page
- Navbar cart badge re-renders instantly across every route
/cartroute calculates and displays the aggregate total price
- Cart state synced to
localStorage— survives a hard refresh /loginroute with a "Login as Guest" mock authentication action/checkoutis a protected route — unauthenticated users are redirected to/loginautomatically
| Layer | Tech |
|---|---|
| Framework | React (Vite) |
| Routing | react-router-dom |
| State | Context API (Cart + Auth) |
| Data source | dummyjson.com/products |
| Persistence | localStorage |
| Deployment | Vercel |
git clone https://github.com/Ankan226/shopzone.git
cd shopzone
npm install
npm run devVisit http://localhost:5173.
| Route | Description | Protected |
|---|---|---|
/ |
Home / welcome banner | No |
/shop |
Product grid (live API data) | No |
/product/:id |
Product detail + Add to Cart | No |
/cart |
Cart items + total price | No |
/contact |
Static contact form UI | No |
/login |
Mock guest login | No |
/checkout |
Order summary + place order | Yes |