ShopSphere 🛒

ShopSphere is a full-stack ecommerce web application built using the MERN stack.
It provides a modern online shopping experience with features like product browsing, authentication, cart management, order handling, and admin functionalities.

---

🚀 Tech Stack

Frontend

• React 18
• Redux Toolkit
• React Router v6
• Tailwind CSS
• React Hook Form
• React Alert

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• dotenv
• cors

---

📂 Project Structure

ShopSphere/
│
├── frontend-ShopSphere/
│
└── backend-ShopSphere/

---

⚙️ Prerequisites

Before running the project, make sure you have installed:

• Node.js (v18+ recommended)
• npm
• MongoDB Atlas account or local MongoDB setup

---

🔐 Environment Variables

Backend .env

Create a .env file inside:

backend-ShopSphere/

Add:

MONGO_URI=<your_mongodb_connection_string>

Example:

MONGO_URI=mongodb+srv://<user>:<password>@<cluster>/<db>?retryWrites=true&w=majority

⚠️ Do not commit real credentials.

---

Frontend .env

Create a .env file inside:

frontend-ShopSphere/

Add:

REACT_APP_API_URL=http://localhost:8080

---

📦 Installation

1️⃣ Clone Repository

git clone <your_repository_url>
cd ShopSphere

---

🖥️ Backend Setup

Open terminal inside:

backend-ShopSphere

Install Dependencies

npm install

Run Backend

Production Mode

npm start

Development Mode

npm run dev

Backend runs on:

http://localhost:8080

Health Check:

GET /

---

🎨 Frontend Setup

Open another terminal inside:

frontend-ShopSphere

Install Dependencies

npm install

Run Frontend

npm start

Frontend runs on:

http://localhost:3000

---

🔗 API Route Groups

Route	Description
/products	Product APIs
/categories	Category APIs
/brands	Brand APIs
/users	User APIs
/auth	Authentication APIs
/cart	Cart APIs
/orders	Order APIs

---

✨ Features

User Features

• User Authentication
• Product Listing
• Product Details
• Category Filtering
• Brand Filtering
• Add to Cart
• Order Placement
• Responsive UI

Admin Features

• Manage Products
• Manage Orders
• Manage Categories
• Manage Brands
• User Management

---

📸 Screenshots

🛠️ Available Scripts

Frontend

Command	Description
npm start	Run development server
npm test	Run tests
npm run build	Create production build

Backend

Command	Description
npm start	Run backend server
npm run dev	Run backend with auto reload

---

🌐 Frontend & Backend Integration

The frontend communicates with the backend API using:

REACT_APP_API_URL

For local development:

REACT_APP_API_URL=http://localhost:8080

Default deployed backend:

https://shopsphere-lu1j.onrender.com

Make sure the backend server is running before starting the frontend.

---

⚠️ Notes

• Keep both frontend and backend running together for full functionality.
• Ensure your MongoDB URI is valid and URL-safe.
• If PowerShell blocks npm scripts on Windows, use:

npm.cmd install
npm.cmd start

instead of:

npm install
npm start

---

📌 Future Improvements

• Payment Gateway Integration
• Wishlist Feature
• Product Reviews & Ratings
• Search & Sorting
• Order Tracking
• Email Notifications

---

👨‍💻 Author

Developed by Vaibhav Kumar

---