A responsive React storefront for browsing products, viewing details, managing a cart, and creating a client-side account profile. The visual system prioritises clear hierarchy, resilient image frames, and useful responsive behaviour.
- Responsive home, catalogue, product-detail, cart, and signup views
- Product images use
object-containinside consistent image frames—no cropping or overflow - Category filtering powered by the Fake Store API
- Cart quantities and totals managed with React Context
- Accessible form labels, focus states, and inline signup validation
flowchart TD
App[App + CartContext] --> Router[React Router]
Router --> Home
Router --> Product[Product details]
Router --> Cart
Router --> Signup
Home --> Catalog[Popular and best-seller components]
Catalog --> API[Fake Store API]
Product --> API
Product --> CartContext
Cart --> CartContext
sequenceDiagram
participant P as Product page
participant C as CartContext
participant S as Cart page
P->>C: Add product + quantity
C->>C: Merge matching product IDs
S->>C: Read cart items
S->>C: Increment / decrement quantity
C-->>S: Updated items and total
Prerequisites: Node.js 18+ and npm.
npm install
npm startOpen http://localhost:3000. Build an optimized production bundle with:
npm run buildsrc/
├── Pages/ # Route-level screens
├── components/ # Shared layout, catalogue, header, cart components
├── ContextAPI/ # Cart state and actions
├── apis/ # API endpoint helpers
└── svgs/ # Inline icon components
Product data currently comes from Fake Store API and signup validation is client-side only. Before production, connect authentication and checkout to a trusted backend, persist carts for signed-in users, and configure API error monitoring.
Grafana Faro is configured through src/faro.js. Add your collector endpoint to .env using .env.example as the template, then restart the development server. The integration records browser errors, Web Vitals, HTTP tracing, and React Router v5 navigation events.