ShopSphere — Full-Stack E-commerce Platform

A fully responsive MERN-based commerce experience where shoppers can browse curated collections, manage carts, pay securely with Stripe, and admins can maintain the catalogue in real-time.

Features

• Product discovery with featured highlights, search, category chips, and responsive product grids.
• Persistent cart powered by local storage, quantity controls, and order summaries.
• Secure authentication with JWT-backed login/register flows and protected routes.
• Stripe checkout using Payment Intents, Payment Element UI, and post-payment order creation.
• Order history so customers can review purchases and statuses at any time.
• Admin console to create, update, feature, and delete products with live inventory tracking.
• MongoDB models for users, products, and orders plus Stripe-driven payment lifecycle.

Tech Stack

• Frontend: React 18, React Router 6, Axios, Stripe Elements, Vite build tooling.
• Backend: Node.js 20+, Express.js, MongoDB/Mongoose, JWT, Stripe SDK, express-validator.

Project Structure

.
├── client/           # Vite + React SPA
│   ├── public/
│   └── src/
│       ├── api/      # Axios instance
│       ├── components/
│       ├── context/  # Auth + cart providers
│       ├── hooks/
│       ├── layouts/
│       └── pages/
└── server/           # Express API service
    ├── src/
    │   ├── config/
    │   ├── controllers/
    │   ├── middleware/
    │   ├── models/
    │   ├── routes/
    │   ├── seeds/
    │   └── utils/
    └── .env.example

Getting Started

1. Prerequisites

• Node.js ≥ 18 (recommended 20+)
• MongoDB instance (local or cloud)
• Stripe account + API keys (test mode works great)

2. Environment variables

Copy the examples and fill in your values:

cp server/.env.example server/.env
cp client/.env.example client/.env

Update:

• MONGODB_URI to your Mongo connection string
• JWT_SECRET to a long random string
• STRIPE_SECRET_KEY (backend) + VITE_STRIPE_PUBLISHABLE_KEY (frontend)
• CLIENT_URL to the dev origin (default http://localhost:5173)

3. Install dependencies

cd server && npm install
cd ../client && npm install

4. Seed sample data (optional but useful)

cd server
npm run seed

This inserts curated demo products and ensures a default admin user:

• Email: admin@shopsphere.com
• Password: Admin123!

5. Run the dev servers

In one terminal for the API:

cd server
npm run dev

In another terminal for the client:

cd client
npm run dev

• API runs at http://localhost:5000
• Frontend runs at http://localhost:5173

Stripe Integration Notes

• The checkout flow creates a Payment Intent server-side so amounts are always trusted from MongoDB pricing.
• The React checkout uses the Payment Element for a globalized payment UI.
• Orders are persisted with the received paymentIntentId once confirmation succeeds.

API Overview

• POST /api/auth/register — create account & receive JWT
• POST /api/auth/login — authenticate & receive JWT
• GET /api/products — list products with pagination + search & category filters
• POST /api/products — create product (admin)
• PUT /api/products/:id — update product (admin)
• DELETE /api/products/:id — remove product (admin)
• POST /api/checkout — create Stripe Payment Intent (auth required)
• POST /api/orders — persist order after payment (auth required)
• GET /api/orders — fetch user orders (auth required)
• GET /api/orders/admin/all — all orders (admin)

Development Tips

• The frontend AuthContext automatically attaches JWTs to Axios requests.
• Cart state survives reloads; logging out clears it.
• Update styles via client/src/index.css; utility classes are provided for buttons, cards, grids, etc.
• Extend the admin panel by adding analytics or bulk actions in client/src/pages/AdminDashboard.jsx.

Next Steps

• Add unit/integration tests (Jest, React Testing Library, supertest) to protect core flows.
• Deploy frontend (Vercel/Netlify) and backend (Render/Fly/GCP) with environment configs per stage.
• Hook up webhooks (/api/webhooks/stripe) for asynchronous Stripe events if needed.

Enjoy building with ShopSphere! 🚀