🛒 E-Commerce Website — Full-Stack Open Source Project

A modern, responsive, and feature-rich full-stack e-commerce platform built using Node.js, Express.js, MySQL, JWT, HTML, CSS, and Vanilla JavaScript.

This project includes:

• User authentication system
• Product browsing & filtering
• Shopping cart & checkout flow
• Wishlist system
• Admin dashboard
• Order management
• Responsive modern UI
• Open source contribution support

---

🌐 Live Demo

🚀 Live Website:
https://e-commerce-git-main-bhuvanshs-projects.vercel.app

---

📌 Features

👤 Authentication

• User Signup & Login
• JWT Authentication
• Refresh Token System
• Protected Routes
• Admin Role Support

🛍️ Shopping Features

• Product Listing
• Product Detail Page
• Search & Filtering
• Category Filtering
• Sorting System
• Recently Viewed Products
• Wishlist System
• Cart Drawer
• Full Cart Management

💳 Checkout & Orders

• Checkout Validation
• Order Placement
• Order History
• Address Management
• Shipping Calculation
• Tax Calculation

⚙️ Admin Features

• Add Products
• Edit Products
• Deletee Products
• Dashboard Overview
• User Management
• Order Monitoring

🎨 UI/UX

• Fully Responsive Design
• Modern Product Cards
• Toast Notifications
• Ripple Effects
• Smooth Animations
• Mobile Navigation
• Lazy Loaded Images

🔒 Security Improvements

• Helmet Security Middleware
• Request Rate Limiting
• Input Validation
• JWT Authentication
• Secure Cart & Checkout Flow
• Backend Total Verification

---

🛠️ Tech Stack

Technology	Usage
Node.js	Backend Runtime
Express.js	API Framework
MySQL	Database
JWT	Authentication
HTML5	Frontend Structure
CSS3	Styling
JavaScript	Frontend Logic
Vercel	Frontend Deployment

---

📂 Updated Project Structure

E-commerce/
│
├── .agents/skills/
│   ├── accessibility-compliance/
│   ├── css/
│   ├── modern-javascript-patterns/
│   ├── responsive-design/
│   ├── semantic-html/
│   └── wcag-audit-patterns/
│
├── .github/
│   ├── ISSUE_TEMPLATE/
│   └── hiero-bot.yml
│
├── backend/
│   ├── config/
│   │   └── db.js
│   │
│   ├── controllers/
│   │   ├── admin.controller.js
│   │   ├── authController.js
│   │   ├── cartController.js
│   │   ├── chat.controller.js
│   │   ├── orderController.js
│   │   ├── pincodeController.js
│   │   ├── productController.js
│   │   ├── promo.controller.js
│   │   ├── recommendationController.js
│   │   └── wishlistController.js
│   │
│   ├── middleware/
|   |   ├── validators/
│   │   ├── adminMiddleware.js
│   │   ├── authMiddleware.js
│   │   ├── rateLimiter.js
│   │   └── rbacMiddleware.js
│   │
│   ├── models/
│   │   ├── Order.js
│   │   ├── Pincode.js
│   │   ├── Product.js
│   │   └── User.js
│   │
│   ├── routes/
│   │   ├── adminRoutes.js
│   │   ├── authRoutes.js
│   │   ├── cartRoutes.js
│   │   ├── chatRoutes.js
│   │   ├── index.js
│   │   ├── orderRoutes.js
│   │   ├── pincodeRoutes.js
│   │   ├── productRoutes.js
│   │   ├── promoRoutes.js
│   │   ├── recommendationRoutes.js
│   │   └── wishlistRoutes.js
│   │
│   ├── scripts/
│   │   └── seedProducts.js
│   │
│   ├── services/
│   │   ├── admin.service.js
│   │   ├── chat.service.js
│   │   ├── interactionService.js
│   │   ├── order.service.js
│   │   ├── promo.service.js
│   │   └── recommendationService.js
│   │
│   ├── sql/
│   │   ├── admin_dashboard_schema.sql
│   │   ├── chat.schema.sql
│   │   └── promo_schema.sql
│   │
│   ├── utils/
│   │   ├── helpers.js
│   │   └── socketManager.js
│   │
│   ├── .env.example
│   ├── docker-compose.yml
│   ├── package-lock.json
│   ├── package.json
│   ├── schema.sql
│   └── server.js
│
├── frontend/
│   ├── assets/
│   │   ├── data/
│   │   ├── images/
│   │   └── videos/
│   │
│   ├── components/
│   │   ├── cart-drawer.html
│   │   ├── footer.html
│   │   └── navbar.html
│   │
│   ├── scripts/
│   │   ├── Buy1Get1.js
│   │   ├── about.js
│   │   ├── admin.js
│   │   ├── animations.js
│   │   ├── auth.js
│   │   ├── back-to-top.js
│   │   ├── blog.js
│   │   ├── cart-drawer.js
│   │   ├── cart.js
│   │   ├── chat-widget.js
│   │   ├── checkout.js
│   │   ├── compare.js
│   │   ├── components.js
│   │   ├── config.js
│   │   ├── contact.js
│   │   ├── dashboard-orders.js
│   │   ├── dashboard-overview.js
│   │   ├── dashboard-settings.js
│   │   ├── dashboard-wishlist.js
│   │   ├── dashboard.js
│   │   ├── delivery.js
│   │   ├── early_summer.js
│   │   ├── help.js
│   │   ├── hero.js
│   │   ├── home-init.js
│   │   ├── mens.js
│   │   ├── order.js
│   │   ├── ordersHistory.js
│   │   ├── pincode.js
│   │   ├── privacy.js
│   │   ├── product-actions-home.js
│   │   ├── product-actions.js
│   │   ├── product-cards-home.js
│   │   ├── product-render.js
│   │   ├── product-reviews.js
│   │   ├── product-variants.js
│   │   ├── product.js
│   │   ├── profile.js
│   │   ├── recentlyViewed.js
│   │   ├── recommendations.js
│   │   ├── related-products.js
│   │   ├── script.js
│   │   ├── seasonal.js
│   │   ├── shop-controls.js
│   │   ├── shop.js
│   │   ├── success.js
│   │   ├── terms.js
│   │   ├── toast.js
│   │   ├── tshirt.js
│   │   ├── ui.js
│   │   ├── utils.js
│   │   ├── wishlist.js
│   │   └── womens.js
│   │
│   ├── styles/
│   │   ├── about.css
│   │   ├── admin.css
│   │   ├── animations.css
│   │   ├── auth.css
│   │   ├── back-to-top.css
│   │   ├── base.css
│   │   ├── blog.css
│   │   ├── cart.css
│   │   ├── chat-widget.css
│   │   ├── checkout.css
│   │   ├── components.css
│   │   ├── contact.css
│   │   ├── dashboard.css
│   │   ├── delivery.css
│   │   ├── early_summer.css
│   │   ├── help.css
│   │   ├── hero.css
│   │   ├── layout.css
│   │   ├── order.css
│   │   ├── privacy.css
│   │   ├── product-card.css
│   │   ├── product.css
│   │   ├── profile.css
│   │   ├── seasonal.css
│   │   ├── shop.css
│   │   ├── style.css
│   │   ├── success.css
│   │   ├── terms.css
│   │   ├── tshirt.css
│   │   └── wishlist.css
│   │
│   ├── Buy1Get1.html
│   ├── about.html
│   ├── admin.html
│   ├── blog.html
│   ├── cart.html
│   ├── checkout.html
│   ├── compare.html
│   ├── contact.html
│   ├── dashboard.html
│   ├── delivery.html
│   ├── early_summer.html
│   ├── help.html
│   ├── index.html
│   ├── mens.html
│   ├── order.html
│   ├── privacy.html
│   ├── product.html
│   ├── profile.html
│   ├── robots.html
│   ├── seasonal.html
│   ├── shop.html
│   ├── signin.html
│   ├── signup.html
│   ├── sitemap.xml
│   ├── success.html
│   ├── terms.html
│   ├── tshirt.html
│   ├── vercel.html
│   ├── wishlist.html
│   └── womens.html
│
├── .env.example  
├── .gitattributes        
├── .gitignore
├── AGENTS.md             
├── CHANGELOG.md          
├── CODE_OF_CONDUCT.md    
├── CONTRIBUTING.md
├── LICENSE        
├── README.md
├── SECURITY.md
├── TODO.md
├── ecommerce.sql 
├── package-lock.json
├── package.json   
├── skills-lock.json               
└── test.js                

---

🚀 Local Setup Guide

📋 Prerequisites

Before starting, make sure you have the following installed:

• Node.js (v18 or higher recommended)
• npm
• MySQL Server
• Git
• VS Code (recommended)

Verify installation:

node -v
npm -v
mysql --version
git --version

---

1️⃣ Clone Repository

git clone https://github.com/AnthropicBots/E-commerce.git
cd E-commerce

---

⚙️ Backend Setup

2️⃣ Navigate to Backend Folder

cd backend

---

3️⃣ Install Dependencies

npm install

Wait for all packages to install successfully.

---

4️⃣ Create MySQL Database

Login to MySQL:

mysql -u root -p

Enter your MySQL password when prompted.

Create the database:

CREATE DATABASE ecommerce;

Verify database creation:

SHOW DATABASES;

You should see:

ecommerce

---

5️⃣ Import Database Schema

Inside the backend folder run:

mysql -u root -p ecommerce < schema.sql

This command creates all required tables.

---

6️⃣ Create Environment File

Create a .env file inside the backend/ folder.

Copy values from .env.example.

Example:

DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=ecommerce

JWT_SECRET=your_secret_key

PORT=5000
FRONTEND_URL=http://127.0.0.1:5500

⚠️ Important

If your MySQL root account has a password:

DB_PASSWORD=your_mysql_password

If your MySQL root account has no password:

DB_PASSWORD=

---

7️⃣ Start Backend Server

Run:

npm run dev

If the above command is unavailable:

npm start

Backend will run at:

http://localhost:5000

---

8️⃣ Verify Backend Setup

A successful startup should show messages similar to:

Database connected successfully
Server running on port 5000

If you see these messages, your backend setup is complete.

---

🌐 Frontend Setup

9️⃣ Open Frontend Folder

Open the project in VS Code.

Navigate to:

frontend/

---

🔟 Run Frontend

Using VS Code Live Server:

1. Open index.html
2. Right Click
3. Select Open with Live Server

Frontend will run at:

http://127.0.0.1:5500

---

🔧 Common Setup Issues

MySQL Access Denied

Error:

Access denied for user 'root'@'localhost'

Solution:

• Verify MySQL is running
• Check DB_USER
• Check DB_PASSWORD
• Test login manually:

mysql -u root -p

---

Unknown Database 'ecommerce'

Error:

Unknown database 'ecommerce'

Solution:

CREATE DATABASE ecommerce;

Then import:

mysql -u root -p ecommerce < schema.sql

---

Cannot Find Module

Error:

Cannot find module ...

Solution:

npm install

inside the backend folder.

---

Port Already In Use

Error:

EADDRINUSE

Solution:

Change:

PORT=5001

inside .env.

---

Still Facing Issues?

Please create a GitHub issue and include:

• Operating System
• Node.js version
• npm version
• Screenshot of terminal
• Full error message
• Steps already tried

Maintainers will help you resolve the issue.

---

🎯 Learning Goals

This project demonstrates:

• Full-stack web development fundamentals
• REST API development using Node.js & Express
• MySQL database integration and query handling
• JWT-based authentication & authorization
• Frontend UI/UX design and responsive layouts
• DOM manipulation and dynamic rendering
• Cart, checkout, and order management systems
• Admin dashboard development
• Real-world e-commerce application architecture
• API integration between frontend and backend
• Open-source project structuring and collaboration
• Debugging, validation, and error handling

---

👨‍💻 Maintainers & Organization

This project is developed under the Anthropic Bots organization.

👑 Organization Owner

Mohit Yadav

• Founder & Owner of Anthropic Bots
• Passionate about Full-Stack Development & Software Engineering
• Focused on building scalable real-world applications

---

🛠️ Project Maintainer

Bhuvansh Kataria

• Active maintainer of this E-Commerce project
• Responsible for feature development, backend integration, bug fixes, and open-source improvements
• Contributing towards improving project structure, security, and overall user experience

---

💡 This project is actively maintained and improved through open-source collaboration.

Contributions, suggestions, and improvements are always welcome.

---

📜 License

This project is licensed under the MIT License and is free to use for learning and educational purposes.

---

⭐ If you like this project, consider giving it a star on GitHub and supporting the repository!