My Store

A small e-commerce front end built with React and Vite. Browse products, add them to a cart, adjust quantities, and check the running total — all client-side, backed by a public product API.

Features

• Home — landing page with a call to action into the shop
• Shop — product grid fetched live from Fake Store API, each card with quantity controls and an add-to-cart button
• Cart — running list of added items with per-item quantity adjustment, removal, and a computed total
• Navbar — persistent navigation with a live cart item count badge

Tech Stack

• React (Vite)
• React Router (react-router-dom) for client-side routing
• Plain CSS — no UI framework
• Fake Store API for product data

Project Structure

src/
├── components/
│   ├── Navbar.jsx
│   └── ProductCard.jsx
├── pages/
│   ├── Home.jsx
│   ├── Shop.jsx
│   └── Cart.jsx
├── App.jsx
├── App.css
└── main.jsx

Architecture Notes

• Cart state lives in App.jsx and is passed down as props. handleAddToCart, handleUpdateQuantity, and handleRemoveItem are the single source of truth for cart mutations — child components only call these handlers, they don't mutate cart state directly.
• ProductCard manages its own local quantity state for the "how many to add" selector, separate from the cart's per-item quantity.
• Routing is handled with react-router-dom's Routes/Route, wrapped in BrowserRouter at the main.jsx entry point.
• Styling is a single flat, monochrome stylesheet (App.css) — no CSS modules, no component-scoped styles.

Getting Started

npm install
npm run dev