VIBE-E-Commerce

Production level e-commerce app

Comment

🛒 E-commerce Platform

A full-stack e-commerce web application. It offers a seamless shopping experience with full inventory management, secure authentication, and support for PayPal and bank payments.

✨ Features

  • 🛍️ Product browsing and search
  • 🛒 Shopping cart with quantity adjustments
  • 👤 User authentication (JWT, cookies)
  • 🔐 Role-Based Access Control (RBAC) for admin/user
  • 📦 Inventory management for admins
  • 💳 PayPal and bank payment integration
  • 🧾 Order tracking and history
  • ⚡ Caching for improved performance
  • 📱 Responsive UI with Tailwind CSS + Setup for DaisyUI
  • 🔄 Redux Toolkit for state management
  • 🧠 Backend built with Express & Node.js
  • 🗃️ MongoDB for data persistence
  • 🛡️ Security best practices: Helmet, CORS, rate limiting, etc.
  • ☁️ Image upload with Multer
  • 🔐 Protected routes & authorization

🛠️ Tech Stack

Frontend

  • React
  • Tailwind CSS
  • DaisyUI
  • Redux Toolkit
  • Cloudinary

Backend

  • Node.js
  • Express.js
  • Redis
  • Paypal payment integrated
  • MongoDB + Mongoose
  • JWT, Cookies
  • Multer
  • Cloudinary

🔧 Getting Started

1. Clone the Repository

git clone https://github.com/your-username/your-repo-name.git
cd Full-Stack-E-Commerce-MERN-APP

2. Set Up Environment Variables

Create a .env file in both /frontend and /backend with your configuration like:

Example for backend

PORT=5000
NODE_ENV=development
MONGO_URI="your_mongo_uri"
JWT_SECRET="your_jwt_secret"
JWT_EXPIRE=30d
CLIENT_URL="your-client-url"
PAYPAL_CLIENT_ID=your_paypal_id
REDIS_URL="your-redis-url"

Do this env for front end

NODE_ENV=development
VITE_SERVER_URL="your-server-url"

3. Install Dependencies

Using docker 

  docker-compose up

Using npm

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install
cd ..
npm install
npm run dev

📸 Screenshots

Admin Dashboard

image

Home page

image

Login page

image

Orders page

image

Reviews and suggestions

image

And more... Video for clarifying

Suggestions

  • Add stripe its already configured for it
  • Mobile app version (React Native)
  • Real-time order status updates with WebSockets

👨‍💻 Author

  • 👨‍💻 Ahmed Issawy
  • 📍 Cairo, Egypt
  • 🔗 LinkedIn

📄 License U can use the project for any thing

Share this project:

Updates