NovaGear is a world-class, production-ready e-commerce platform built with Next.js 15 (App Router). It features a stunning, pixel-perfect design with emerald accents, powered by Tailwind CSS, shadcn/ui, and Framer Motion for premium micro-animations.
- Framework: Next.js 15+ (App Router)
- Language: TypeScript (Strict Mode)
- Styling: Tailwind CSS v3.4
- UI Components: shadcn/ui (Radix UI)
- Authentication: Auth.js v5 (@auth/nextjs)
- State Management: Zustand + Persist middleware
- Forms: React Hook Form + Zod
- Animations: Framer Motion
- Toasts: Sonner
- Icons: Lucide React
- Immersive Landing Page: 7 polished sections including Hero (with tech gradients), Featured Products, Why Choose Us, Testimonials, Categories, and Newsletter.
- Dynamic Shop Gallery: Real-time search and category filtering with smooth transitions.
- Premium Product Details: High-resolution presentation with detailed specs, pricing, and stock status.
- Secure Authentication: Robust login/register system with Credentials and Google OAuth providers.
- Inventory Management: Full CRUD operations for authorized users to add, view, and delete products.
- Persistent Global State: Cart items and inventory are persisted to local storage using Zustand.
- Responsive & Accessible: Fully optimized for mobile, tablet, and desktop with a focus on UX.
npm installCopy .env.local.example to .env.local and set your secrets.
cp .env.local.example .env.localMinimum required for authentication to work:
AUTH_SECRET: Generate one usingnpx auth secret
npm run dev- Live Demo: NovaGear on Vercel
- Test Credentials:
- Email:
demo@novagear.com - Password:
demo123
- Email:
| Route | View | Access |
|---|---|---|
/ |
Landing Page | Public |
/login |
Auth Portal | Public |
/shop |
Product Listing | Public |
/shop/[id] |
Item Details | Public |
/add-product |
Inventory Form | Protected |
/manage-products |
Inventory Table | Protected |
Designed and engineered for the future of digital commerce. 🚀