🛍️About Project

This project is a modern, full-featured eCommerce website built with Next.js 15 (App Router), optimized for performance, SEO, and responsiveness. It showcases a production-grade frontend built with Tailwind CSS, MUI (Material UI), and Radix UI, combined with secure backend integrations using MongoDB, Mongoose, and JWT authentication.

Core functionalities include user authentication, product management, admin dashboard, rich product descriptions (via CKEditor 5), and payment integration using Razorpay. The site uses React Query for powerful data-fetching and caching, Redux Toolkit for global state management, and Cloudinary for seamless media handling. Designed for scalability and clean code architecture, this project is ideal for portfolio, client work, or production use.

⚙️ Tech Stack

📦 Framework & Libraries

1. Next.js 15 – App Router, SSR, dynamic routing
2. React 19 – Component-based UI
3. Tailwind CSS – Utility-first styling
4. Shadcn UI – Modern component library
5. Material UI (MUI) – Modern component library
6. Material React Table – Modern dynamic table
7. TanStack Query – Powerful asynchronous state management
8. Radix UI – Headless, accessible UI primitives
9. Lucide React & React Icons – Icon libraries
10. Razorpay Payment Gateway – Advance payment solution

🧠 State & Data Management

1. Redux Toolkit – Scalable global state management
2. Redux Persist – State persistence across reloads
3. React Query (@tanstack/react-query) – Data fetching, caching, revalidation

📂 Backend & APIs

1. MongoDB + Mongoose – NoSQL database and ODM
2. JWT + bcrypt – Authentication and password hashing
3. Razorpay – Payment integration
4. Nodemailer – Transactional email support

✍️ Form & Content Tools

1. React Hook Form – Lightweight form validation
2. Zod – Schema validation
3. CKEditor 5 – Rich text editing
4. React Dropzone – File uploads
5. Cloudinary (next-cloudinary) – Image hosting and transformations

📊 Utilities & UX

1. Recharts – Data visualization
2. clsx & class-variance-authority – Conditional styling
3. Fuse.js – Fuzzy search
4. Slugify – URL-friendly slugs
5. React Slick + Slick Carousel – Product sliders
6. React Toastify & Sonner – Notifications and alerts
7. day.js – Date formatting

📃 Features

🛍️ Storefront

1. Browse products with categories, pricing, and image previews
2. Dynamic product details page with CKEditor-powered rich descriptions
3. Featured products section on homepage
4. Search functionality with fuzzy search using Fuse.js
5. Mobile-first, fully responsive design

🛒 Cart & Checkout

1. Add to cart, update quantity, or remove items
2. Order summary and total price calculation
3. Secure checkout process with Razorpay payment integration

👤 User Authentication

1. Register, login, and logout using JWT-based authentication
2. Protected routes for logged-in users
3. OTP-based input support with input-otp

🧑‍💼 Admin Panel

1. Product management: create, update, delete with image uploads (Cloudinary)
2. Order management: view, update, and track orders
3. User management and dashboard analytics (using Recharts)

🖼️ Media & UI

1. Cloudinary integration for image uploads and optimization
2. UI built with Tailwind CSS, Material UI (MUI), and Radix UI
3. Theme switching support with next-themes

🔔 Notifications & Feedback

1. Toast notifications with react-toastify and sonner
2. Form validation using React Hook Form and Zod

📦 Performance & Optimization

1. Data fetching via React Query with devtools support
2. Optimized images using Next.js and lazy loading
3. Redux Toolkit + Redux Persist for global state and localStorage sync.