Quantum E-commerce — Technical Documentation

A concise guide to the project.

1. Project Overview

Quantum E-commerce is a single-page e-commerce web application for electronics (headphones, wearables, gaming gear, VR, speakers, laptops). It has two sides:

Customer side — browse products by category, search, view product details, manage a cart, and place orders.
Admin side — a dashboard to manage products (create / update / delete) and view all orders and users.

There is no custom backend server. The app is a React SPA that talks directly to Firebase (Authentication + Cloud Firestore) from the browser. Firestore real-time listeners keep product, order, and user data live without manual refreshes.

Repository: https://github.com/ShaikhAman01/Quantum-e-commerce

2. Features

Area	Feature
Customer	Home page with hero banner, categories, and featured products
Customer	Browse all products, filter by category, search
Customer	Product detail page
Customer	Cart with quantity increment/decrement (persisted in `localStorage`)
Customer	Checkout via “Buy Now” modal (name, address, pincode, mobile)
Customer	User dashboard showing personal order history
Auth	Email/password signup & login, plus Google sign-in (popup)
Auth	Role-based routing — `user` vs `admin` roles
Admin	Dashboard with tabs and counts for Products / Orders / Users
Admin	Add, update, and delete products
Admin	View and delete orders; view registered users
UX	Toast notifications (`react-hot-toast`), loading spinners, scroll-to-top on route change

3. Tech Stack

Layer	Technology	Notes
UI framework	React 18	Function components + hooks
Build tool	Vite 5	Dev server + production bundling
Routing	React Router DOM v6	Client-side routing
Global state (cart)	Redux Toolkit + react-redux	Cart slice only
Global state (data)	React Context (`MyState`)	Products, orders, users from Firestore
Backend-as-a-Service	Firebase 10	Auth + Cloud Firestore
Styling	Tailwind CSS 3 + Material Tailwind	Utility-first CSS, prebuilt dialog/input components
Icons	lucide-react, react-icons	—
Notifications	react-hot-toast	—
Hosting	Vercel	SPA rewrite via `src/vercel.json`

4. Architecture Overview

The app is client-only: React in the browser communicates directly with Firebase services. State is split between Redux (cart) and Context (Firestore data).

┌────────────────────────────── Browser ──────────────────────────────┐
│                                                                     │
│   React SPA (Vite build)                                            │
│   ┌───────────────┐   ┌────────────────────┐   ┌────────────────┐   │
│   │ Redux Toolkit │   │ Context (MyState)  │   │ localStorage   │   │
│   │ cart slice    │   │ products / orders  │   │ cart + user    │   │
│   └───────┬───────┘   │ / users (realtime) │   └────────────────┘   │
│           │           └─────────┬──────────┘                        │
└───────────┼─────────────────────┼───────────────────────────────────┘
            │                     │  onSnapshot / addDoc / deleteDoc
            ▼                     ▼
      (client only)      ┌─────────────────────────────┐
                         │          Firebase           │
                         │  ┌───────────┐ ┌─────────┐  │
                         │  │   Auth    │ │Firestore│  │
                         │  │ email+pw, │ │products │  │
                         │  │  Google   │ │order    │  │
                         │  └───────────┘ │user     │  │
                         │                └─────────┘  │
                         └─────────────────────────────┘

Key design points: