# Shop-Nexus 🛒

A modern **MERN Stack** (MongoDB, Express, React, Node.js) E-Commerce platform with **Tailwind CSS** for responsive styling. This project includes a complete **frontend (React)** and **backend (Node.js/Express)** with essential e-commerce features.

<!-- Replace with actual screenshot -->

![Shop-Nexus Demo](https://via.placeholder.com/800x400.png?text=Shop-Nexus+Demo)

<!-- Replace with actual screenshot -->

## Features ✨

- **User Authentication** (Register/Login with JWT)
- **Product Catalog** with Categories & Filters
- **Shopping Cart** Functionality
- **Order Management** System
- **Product Reviews & Ratings**
- **Admin Dashboard** (Manage Products/Orders)
- **Responsive Design** with Tailwind CSS
- **Payment Integration** (Stripe/PayPal - TODO)
- **Search & Pagination**

## Tech Stack 🛠️

| Frontend       | Backend              | Database     | Styling      |
| -------------- | -------------------- | ------------ | ------------ |
| React 18       | Node.js 16+          | MongoDB      | Tailwind CSS |
| React Router 6 | Express.js           | Mongoose ODM | Headless UI  |
| Redux Toolkit  | JWT Authentication   | Cloudinary   | Heroicons    |
| Axios          | Multer (File Upload) |              |              |

## Project Structure 📂

### Client (Frontend)

shop-nexus/ └── client/ ├── public/ │ ├── index.html │ └── assets/ # Static assets └── src/ ├── components/ # Reusable UI components │ ├── cart/ │ ├── product/ │ ├── ui/ │ └── ... ├── pages/ # Route-based pages │ ├── Home.jsx │ ├── ProductDetails.jsx │ ├── Cart.jsx │ └── ... ├── store/ # Redux store │ ├── slices/ │ └── store.js ├── utils/ # Helper functions ├── App.jsx # Main App component ├── main.jsx # Entry point └── tailwind.config.js

### Server (Backend)

shop-nexus/ └── server/ ├── config/ │ ├── db.js # MongoDB connection │ └── cloudinary.js # Cloudinary config ├── controllers/ # Route controllers │ ├── authController.js │ ├── productController.js │ └── ... ├── models/ # MongoDB models │ ├── User.js │ ├── Product.js │ └── ... ├── routes/ # API routes │ ├── authRoutes.js │ ├── productRoutes.js │ └── ... ├── middleware/ # Custom middleware │ ├── auth.js │ └── error.js ├── .env # Environment variables └── server.js # Entry point

## Installation 🚀

### Prerequisites
- Node.js (v16+ recommended)
- MongoDB Atlas URI or local MongoDB
- Cloudinary account (for image uploads)

### Setup Instructions

1. **Clone the repository**
   ```bash
   git clone https://github.com/your-username/shop-nexus.git
   cd shop-nexus

2. Backend Setup

   cd server
   npm install
   cp .env.example .env  # Update with your credentials

3. Frontend Setup

   cd ../client
   npm install

4. Environment Variables Create .env files in both folders with required variables.

   Server (.env)

   MONGO_URI=your_mongodb_uri
   JWT_SECRET=your_jwt_secret
   CLOUDINARY_CLOUD_NAME=your_cloud_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret

   Client (.env)

   REACT_APP_API_URL=http://localhost:5000/api/v1

Running the App ▶️

1. Start Backend Server

   cd server
   npm run dev

   • Runs on http://localhost:5000

2. Start Frontend

   cd ../client
   npm start

   • Runs on http://localhost:3000

Deployment 📦

Backend

• Deploy to Render, Railway, or AWS
• Set environment variables in production

Frontend

• Deploy to Vercel, Netlify, or AWS Amplify
• Set production API endpoint

Contributing 🤝

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

---

Happy Coding! 🚀
Built with MERN + Tailwind CSS