🛒 Forever - Full Stack MERN E-commerce Clothing Store

A modern full-stack e-commerce clothing website built with React, Node.js, Express, MongoDB, and Tailwind CSS. Complete online shopping platform with user authentication, shopping cart, product filtering, and admin dashboard.

---

🔥 Keywords

MERN Stack E-commerce | React Shopping Cart | Node.js E-commerce | Online Clothing Store | Full Stack Web Application | MongoDB E-commerce | React Tailwind E-commerce | JavaScript Shopping Website | Responsive E-commerce | Admin Dashboard | Product Management

---

✨ Features

🛍️ Customer Features

• 🔐 User Authentication - Secure Login & Registration
• 🛒 Shopping Cart - Add, Remove, Update Items
• ❤️ Wishlist - Save Favorite Products
• 🔍 Smart Search - Find Products Instantly
• 🏷️ Category Filter - Men, Women, Kids
• 👕 Type Filter - Topwear, Bottomwear, Winterwear
• 💰 Price Sorting - Low to High, High to Low
• 📦 Order Placement - Easy Checkout Process
• 📜 Order History - Track All Orders
• 💵 Cash on Delivery - Convenient Payment Option
• 📱 Fully Responsive - Mobile, Tablet, Desktop
• 🔔 Toast Notifications - Real-time Feedback
• 📧 Newsletter Subscription - Stay Updated

👨‍💼 Admin Features

• 📊 Admin Dashboard - Complete Control Panel
• ➕ Add Products - Upload New Items with Images
• 📋 Product List - View & Manage All Products
• 📦 Order Management - Track & Update Orders
• 🖼️ Cloudinary Integration - Cloud Image Storage

---

🛠️ Tech Stack

Frontend	Backend	Database	Styling	Tools

---

📸 Screenshots

🏠 Homepage

🛍️ Product Collection

📄 Product Details

🛒 Shopping Cart

👤 User Login

📦 Place Order

➕ Add Product (Admin)

📝 Product List (Admin)

📋 Orders Page (Admin)

---

⚙️ Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB
• Cloudinary Account

1. Clone the Repository

git clone https://github.com/ARQUM21/forever.git
cd forever

2. Install Dependencies

# Install Frontend Dependencies
cd frontend
npm install

# Install Backend Dependencies
cd ../backend
npm install

# Install Admin Dependencies
cd ../admin
npm install

3. Environment Variables

Create .env file in backend folder:

env

PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Create .env file in frontend folder:

env

VITE_BACKEND_URL=http://localhost:5000

4. Run the Application

# Run Backend
cd backend
npm run dev

# Run Frontend (new terminal)
cd frontend
npm run dev

# Run Admin (new terminal)
cd admin
npm run dev

5. Open in Browser

Frontend: http://localhost:5173
Admin:    http://localhost:5174
Backend:  http://localhost:5000

📁 Folder Structure

forever/
│
├── 📂 frontend/
│   ├── 📂 src/
│   │   ├── 📂 assets/
│   │   ├── 📂 components/
│   │   │   ├── BestSeller.jsx
│   │   │   ├── CartTotal.jsx
│   │   │   ├── Footer.jsx
│   │   │   ├── Hero.jsx
│   │   │   ├── LatestCollection.jsx
│   │   │   ├── Navbar.jsx
│   │   │   ├── NewsLetterBox.jsx
│   │   │   ├── OurPolicy.jsx
│   │   │   ├── ProductItem.jsx
│   │   │   ├── RelatedProducts.jsx
│   │   │   ├── SearchBar.jsx
│   │   │   └── Title.jsx
│   │   ├── 📂 pages/
│   │   │   ├── About.jsx
│   │   │   ├── Cart.jsx
│   │   │   ├── Collection.jsx
│   │   │   ├── Contact.jsx
│   │   │   ├── Home.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Orders.jsx
│   │   │   ├── PlaceOrder.jsx
│   │   │   └── Product.jsx
│   │   ├── 📂 context/
│   │   │   └── ShopContext.jsx
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── .env
│   ├── .gitignore
│   ├── vercel.json
│   └── package.json
│
├── 📂 admin/
│   ├── 📂 src/
│   │   ├── 📂 components/
│   │   │   ├── Login.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── Sidebar.jsx
│   │   ├── 📂 pages/
│   │   │   ├── Add.jsx
│   │   │   ├── List.jsx
│   │   │   └── Orders.jsx
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   └── index.css
│   ├── .env
│   ├── .gitignore
│   ├── vercel.json
│   └── package.json
│
├── 📂 backend/
│   ├── 📂 config/
│   │   ├── cloudinary.js
│   │   └── mongodb.js
│   ├── 📂 controllers/
│   │   ├── cartController.js
│   │   ├── orderController.js
│   │   ├── productController.js
│   │   └── userController.js
│   ├── 📂 middleware/
│   │   ├── adminAuth.js
│   │   ├── auth.js
│   │   └── multer.js
│   ├── 📂 models/
│   │   ├── orderModel.js
│   │   ├── productModel.js
│   │   └── userModel.js
│   ├── 📂 routes/
│   │   ├── cartRoute.js
│   │   ├── orderRoute.js
│   │   ├── productRoute.js
│   │   └── userRoute.js
│   ├── server.js
│   ├── .env
│   ├── .gitignore
│   ├── vercel.json
│   ├── package.json
│   └── package-lock.json
│
└── README.md

---

🔮 Future Enhancements

• Payment Gateway Integration (Stripe/Razorpay)
• Email Notifications
• Product Reviews & Ratings
• Multiple Payment Options
• Discount Coupons

---

🤝 Contributing

Contributions are welcome! Feel free to open issues and pull requests.

1. Fork the repository
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

---

📧 Contact

Muhammad Arqum Tariq

---

⭐ Show Your Support

Give a ⭐ if you like this project!

---

📄 License

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

---

Made with ❤️ by Muhammad Arqum Tariq