Shoppora – MERN Shopping App

Shoppora is a full-stack MERN shopping application where users can browse products, filter by categories, add products to the cart, and pay using PayPal. Admins can log in to manage products, orders, and site features.

---

Features

User

• Browse products with images, descriptions, and prices
• Filter products by categories
• Search products
• Add products to cart
• Checkout using PayPal
• View payment success or failure pages

Admin

• Admin login for sellers/managers
• Add, edit, and delete products
• Manage orders and view order details
• Manage site features

General

• JWT-based user authentication & session management
• Protected routes for admin and users
• Responsive design

---

Tech Stack

• Frontend: React, Redux Toolkit, React Router, TailwindCSS
• Backend: Node.js, Express.js, MongoDB, Mongoose
• Authentication: JWT
• Payments: PayPal
• Deployment: Render

---

Installation

1. Clone the repo

git clone https://github.com/yourusername/shoppora.git
cd shoppora

2. Install Backend dependencies

cd backend
npm install

3. Install Frontend dependencies

cd ../client
npm install

4. Set up Environment Variables

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
PAYPAL_CLIENT_ID=your_paypal_client_id

5. Run the application

Start Backend

cd backend
npm run dev

Start Frontend

cd ../client
npm run dev

Backend will run on http://localhost:5000

Frontend will run on http://localhost:5173

Folder Structure

shoppora/
├── backend/
│   ├── controllers/      # Route handlers for API
│   ├── models/           # MongoDB models
│   ├── routes/           # API routes
│   ├── middleware/       # Middleware functions
│   └── server.js         # Entry point for backend
├── client/
│   ├── src/
│   │   ├── components/   # Reusable React components
│   │   ├── pages/        # React pages for routes
│   │   ├── store/        # Redux store and slices
│   │   └── App.js        # Main React app component
│   └── vite.config.js    # Vite configuration
└── README.md             # Project documentation

**7. Screenshots

Contact

• Email: Shiveshanand8742@gmail.com

HAPPY CODING