Spectrum Store

Spectrum Store is a full-stack e-commerce experience built with Next.js, TypeScript, and shadcn/ui. Product data comes from the Fake Store API; the app adds JWT authentication (cookies), role-aware authorization, middleware, and an admin dashboard for managing products—aligned with secure routing and server actions patterns described in the project README.

Main features

• 🔒 Auth — Login and logout with JWT; session-friendly cookie handling
• 🌍 Storefront — Home grid, product listing with category filters, product detail (rating, price, add to cart)
• 🛒 Cart — Drawer for add/remove items
• 🔍 Search — Global product search
• 🎨 Theme — Light / dark mode toggle
• ✨ UX — Loading states and skeleton UI
• 📊 Admin — Dashboard with CRUD for products, pagination, search, and charts
• 🛡 Security — Authentication, authorization in the data layer, middleware, and validated server actions
• 🚀 SEO & performance — Meta tags, Next.js Image, and sitemap-oriented setup

Implementation notes

• Next.js 14 features with server actions, Axios, and Zod validation
• React Hook Form + Zod on both client and server where forms touch the API
• Recharts for dashboard visualization

• Next.js — App Router, server actions, SEO-focused structure
• TypeScript — End-to-end typing for UI and data flows
• Tailwind CSS + shadcn/ui — Accessible, composable UI
• React Hook Form + Zod — Form state and schema validation
• Axios — HTTP client for Fake Store API calls
• Recharts — Admin analytics charts
• JWT — Token-based auth with cookie-backed sessions

• Wired a catalog + cart flow against a public REST API while keeping auth and admin concerns explicit in middleware and server code
• Practiced defense in depth: validation on the server, protected routes, and a clear split between storefront and admin surfaces
• Shipped a responsive, theme-aware UI with loading and skeleton patterns suitable for real product listings