🛒 ShopHub — Full-Stack eCommerce Application

ShopHub is a production-ready, full-stack responsive eCommerce portal. Designed with rich modern layouts, it incorporates robust stateless authentication, administrative catalog management, real-time reviews, shopping carts, wishlists, and seamless MongoDB Atlas cloud database integration.

🔗 Live Production URL: shophub-pi-weld.vercel.app

---

✨ 1. Key Features

• 🔑 Secure JWT Authentication: Salt-hashed passwords using bcryptjs and secure tokens via jsonwebtoken with route guards (<ProtectedRoute>).
• 📦 Dynamic Catalog Manager (Admin Panel): Fully functional dashboard featuring stats, product tables (Edit/Delete), and custom product insertion via Multer image file upload.
• 🛒 Cart & Wishlist Engines: Global Context-driven states persisting across sessions via LocalStorage.
• ✍️ Real-Time Customer Reviews: Seamless review sub-resource creation verified by unique user logic.
• 📱 Edge-to-Edge Fluid UI: Designed using TailwindCSS to adapt seamlessly from narrow mobile displays up to high-resolution viewports.
• 🧪 SQA Verified: Zero compilation warnings and a 100% passing rate on the E2E API integration suite.

---

🛠️ 2. Tech Stack

• Frontend: React 19, Vite 8, TailwindCSS 3, React Router v6, Axios, Context API.
• Backend: Node.js, Express, Multer (image uploads), BcryptJS, JSON Web Token (JWT).
• Database: MongoDB Atlas (Cloud Cluster) managed via Mongoose ODM.
• Testing: Custom E2E integration test suite (test_api.js).

---

📂 3. Repository Structure

├── client/                     # Frontend Vite + React project
│   ├── src/
│   │   ├── api/                # Axios interceptors configuration
│   │   ├── components/         # Shared UI & Guard elements
│   │   ├── context/            # Auth, Cart, Wishlist Providers
│   │   ├── pages/              # Responsive routing views
│   │   └── main.jsx
│   └── tailwind.config.js
├── server/                     # Backend Node + Express project
│   ├── config/                 # DB connections
│   ├── controllers/            # Controller business logic
│   ├── middleware/             # Protected / Upload middleware
│   ├── models/                 # Mongoose schemas
│   ├── routes/                 # Express API endpoints
│   └── server.js
├── .env.example                # Global environment template
├── test_api.js                 # SQA integration test script
├── CHANGELOG.md                # Semantic release changes log
└── CONTRIBUTING.md             # Contributor development standards

---

🚀 4. Installation & Local Development

1. Prerequisite Setup

Clone the repository and create your local environment files based on the .env.example:

git clone https://github.com/Najeeb1106/ecommerce-fullstack-design.git
cd ecommerce-fullstack-design

2. Seeding the Database

Configure your MONGO_URI in server/.env and run the seeder:

cd server
npm install
npm run seed

3. Spin up Server & Client

Open two separate terminal windows:

# Terminal 1: Start Backend (localhost:5000)
cd server
npm run dev

# Terminal 2: Start Frontend (localhost:5173)
cd client
npm install
npm run dev

---

🧪 5. SQA Test Suite Verification

Run the integration tests locally to confirm database and API state compatibility:

node test_api.js

Expected output:

================================================================================
  SHOPHUB API - TEST SUMMARY
================================================================================
  Total Tests Executed: 10
  Passed Tests: 10
  Failed Tests: 0
  Success Rate: 100%
================================================================================

---

📄 6. License

Distributed under the MIT License. See LICENSE for more details.