🛍️ ReactStore — Full-Stack E-Commerce Platform

A modern, full-stack e-commerce web application built with React, Node.js, Express, MongoDB, and Clerk Authentication. ReactStore delivers a complete shopping experience for customers alongside a protected admin dashboard for managing products and orders.

Live Demo · Features · Tech Stack · Getting Started · API · Roadmap

🌐 Live Demo

Resource	Link
🛒 Website	react-ecommerce-nine-lyart.vercel.app
🚀 Backend API	react-ecommerce-backend-0tqa.onrender.com
📦 Repository	github.com/MrGaurav695/react-ecommerce

Note: The backend is hosted on Render's free tier, so the first request after a period of inactivity may take a few seconds to spin up.

✨ Features

👤 Customer

🔐 Secure registration and login via Clerk
🛍️ Browse the full product catalog
🔎 Detailed product view pages
🏷️ Filter products by category
🛒 Add to cart, adjust quantities, and remove items
💳 Streamlined checkout flow
📦 Place orders and track order history
🔍 View individual order details
📱 Fully responsive design across mobile, tablet, and desktop

👑 Admin

🔐 Protected, role-gated admin dashboard
📦 View, add, edit, and delete products
📋 View all customer orders
🔄 Update order status
📊 Centralized store and order management

🔐 Authentication & Authorization

ReactStore uses Clerk for authentication, with role-based access control enforced on both the frontend and backend.

Role	Access
Customer (authenticated)	Products, Product Details, Cart, Checkout, Orders, Order Details
Admin (authorized)	Admin Dashboard, Product Management, Order Management

Backend routes are additionally guarded by authentication and admin-authorization middleware, so protection isn't reliant on the frontend alone.

🛠️ Tech Stack

Frontend React.js · React Router · Redux · Bootstrap · Axios · React Hot Toast · React Loading Skeleton · Clerk Authentication

Backend Node.js · Express.js · MongoDB · Mongoose · Clerk Express · CORS · dotenv

Deployment Vercel (Frontend) · Render (Backend) · MongoDB Atlas (Database) · GitHub (Source Control)

🏗️ Project Structure

react-ecommerce/
├── Client/                 # React frontend
│   ├── public/
│   └── src/
│       ├── api/            # Axios API calls
│       ├── components/     # Reusable UI components
│       ├── pages/          # Route-level pages
│       └── redux/          # State management
│
├── Server/                 # Express backend
│   ├── config/
│   ├── controllers/
│   ├── middleware/         # Auth & admin guards
│   ├── models/             # Mongoose schemas
│   ├── routes/
│   └── server.js
│
└── README.md

🔄 Architecture

                 ┌──────────────┐
                 │     User     │
                 └──────┬───────┘
                        │
                        ▼
              ┌───────────────────┐
              │  React Frontend   │
              │     (Vercel)      │
              └─────────┬─────────┘
                        │ Axios (REST API)
                        ▼
              ┌───────────────────┐
              │  Express Backend  │
              │     (Render)      │
              └─────────┬─────────┘
                        │
          ┌─────────────┴─────────────┐
          ▼                           ▼
  ┌────────────────┐         ┌──────────────────┐
  │  Clerk Auth    │         │  MongoDB Atlas   │
  └────────────────┘         └──────────────────┘

📦 Product Management

Admins have full CRUD control over the product catalog:

Create → Read → Update → Delete

All products are stored in MongoDB Atlas and served through REST APIs.

🛒 Order Management

Customers place orders through the checkout flow. Each order captures:

Customer information
Products and quantities
Shipping address & method
Payment method
Subtotal, shipping cost, and total price
Order status

Order statuses: Pending → Confirmed → Shipped → Delivered (or Cancelled)

Admins can update order status directly from the dashboard.

🌐 API Endpoints

Products

Method	Endpoint	Description
`GET`	`/api/products`	Get all products
`GET`	`/api/products/:id`	Get a single product
`POST`	`/api/products`	Create a product (admin)
`PUT`	`/api/products/:id`	Update a product (admin)
`DELETE`	`/api/products/:id`	Delete a product (admin)

Orders

Method	Endpoint	Description
`POST`	`/api/orders`	Place a new order
`GET`	`/api/orders`	Get all orders (admin)
`GET`	`/api/orders/user/:userId`	Get a user's order history
`GET`	`/api/orders/:id`	Get order details
`PUT`	`/api/orders/:id/status`	Update order status (admin)

⚙️ Environment Variables

Client — `Client/.env`

REACT_APP_API_URL=your_backend_api_url
REACT_APP_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key

Server — `Server/.env`

PORT=5000
MONGODB_URI=your_mongodb_connection_string
CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
CLIENT_URL=your_frontend_url

⚠️ Never commit .env files or secret keys to GitHub. Make sure both are listed in .gitignore.

🚀 Getting Started

Prerequisites

Node.js (v16+)
npm or yarn
A MongoDB Atlas account
A Clerk account (for API keys)

1. Clone the repository

git clone https://github.com/MrGaurav695/react-ecommerce.git
cd react-ecommerce

2. Start the backend

cd Server
npm install
npm start

Runs at → http://localhost:5000

3. Start the frontend

Open a new terminal:

cd Client
npm install
npm start

Runs at → http://localhost:3000

🌍 Deployment

GitHub
 ├── Client ──► Vercel
 └── Server ──► Render ──► MongoDB Atlas

Layer	Platform
Frontend	Vercel
Backend	Render
Database	MongoDB Atlas
Auth	Clerk

🔒 Security

Clerk-based authentication
Protected frontend and admin routes
Backend authentication & admin-authorization middleware
CORS configuration
Environment-variable-based secret management
Protected API operations

📸 Screenshots

🏠 Home Page

🛍️ Products Page

🛒 Shopping Cart

📦 Orders

👑 Admin Dashboard

📋 Admin Orders

🎯 What I Learned

Building ReactStore helped me strengthen skills in:

React component architecture & React Router
Redux state management
REST API design and Node.js/Express development
MongoDB & Mongoose data modeling
Clerk authentication and role-based authorization
Full CRUD implementation and Axios integration
Responsive UI development
Environment variable & secrets management
Git/GitHub workflows and production deployment (Vercel, Render, MongoDB Atlas)

🚧 Roadmap

💳 Real payment gateway integration
⭐ Product reviews and ratings
❤️ Wishlist
🔍 Advanced product search & filters
📊 Advanced admin analytics
🎟️ Coupon and discount system
📧 Order confirmation emails
🖼️ Product image upload management
📈 Sales analytics dashboard

👨‍💻 Author

Gaurav Shirsath
Computer Engineering Student

GitHub

⭐ Support

If you found this project useful or interesting, consider giving the repository a ⭐ on GitHub — it helps a lot!

📄 License

This project was created for learning, development, and portfolio purposes.

Name		Name	Last commit message	Last commit date
Client		Client
Server		Server
screenshots		screenshots
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation