VOLT — Electronics Store Frontend

React e-commerce frontend for the Electronics Store Spring Boot backend.

Pages

Route	Page	Auth
/	Home — hero, categories, featured products	Public
/shop	Product catalogue with filter sidebar	Public
/product/:id	Product detail, add to cart, specs	Public
/cart	Cart management, totals, checkout CTA	Public
/login	Sign in	Public
/register	Create account	Public
/checkout	Delivery address → payment provider → pay	🔒
/orders	Order history with live tracker	🔒
/profile	Account info, password reset, status	🔒

Tech Stack

Tool	Usage
React 18	UI
React Router v6	Routing
Axios	HTTP client with JWT interceptor
Context API	Auth + Cart global state
Vite	Build + dev proxy
Google Fonts	Playfair Display, Outfit, JetBrains Mono

Quick Start

npm install
cp .env.example .env

# Start dev server (proxies /api → http://localhost:8080)
npm run dev
# → http://localhost:5173

# Production build
npm run build
npm run preview

Design System

Palette

• Cream background: #f5f0e8
• Charcoal text: #1a1a1a
• Amber accent: #c8860a
• Sand borders: #d4c4a8

Typography

• Playfair Display — headings, product names, logo
• Outfit — body text, buttons, UI
• JetBrains Mono — prices, SKUs, labels, codes

Backend Integration

All /api/* requests proxy to http://localhost:8080 in dev mode.

Set VITE_API_URL=https://your-api.com in .env for production.

Key Features

• JWT auth — token stored in localStorage, auto-attached via Axios interceptor
• Cart context — live cart state synced with backend after every action
• Smart filtering — URL-synced filters for sharing/bookmarking shop searches
• Checkout flow — address → place order → Paystack/Flutterwave payment init → redirect
• Order tracker — visual step indicator (Placed → Paid → Shipped → Delivered)
• Responsive — fluid grid layouts with clamp() typography
• Skeleton loading — shimmer placeholders during data fetches
• Protected routes — redirects unauthenticated users to login with return path