🛒 CodeAlpha Simple E-commerce Store

A full-stack Simple E-commerce Store built as Task 1 for the CodeAlpha Full Stack Development Internship.

The application provides a complete e-commerce workflow including product browsing, product details, authentication, shopping cart, checkout, order processing, and an administrative dashboard.

✨ Features

🛍️ Customer Features

🏠 Home page with featured products and categories
📦 Product listing
🔎 Product search
🗂️ Category filtering
📄 Product details with related products
🛒 Shopping cart
- Add products
- Update quantities
- Remove products
- Automatic total calculation
💳 Checkout with shipping information
👤 User registration
🔐 User login/logout
📦 Order processing
📋 My Orders
📊 Customer order history

🔐 Authentication & Security

JWT-based authentication
Password hashing with bcryptjs
Protected customer routes
Protected admin routes
Admin authorization middleware
Environment variables for sensitive configuration
Protected API endpoints

👨‍💼 Admin Features

📊 Admin dashboard
📈 Product, order, and revenue statistics
➕ Add products
✏️ Edit products
🗑️ Delete products
🖼️ Product image upload
📦 View customer orders
🔄 Update order status
🔐 Admin-only access

🛠️ Tech Stack

Layer	Technology
Frontend	HTML5, CSS3, Vanilla JavaScript
Backend	Node.js, Express.js
Database	MongoDB
ODM	Mongoose
Authentication	JWT
Password Security	bcryptjs
File Uploads	Multer
HTTP Client	Fetch API

🏗️ Application Architecture

┌──────────────────────────────┐
│          Frontend            │
│     HTML + CSS + JavaScript  │
└──────────────┬───────────────┘
               │
               │ Fetch API / REST API
               ▼
┌──────────────────────────────┐
│         Express.js           │
│      REST API + Server       │
└──────────────┬───────────────┘
               │
               │ Mongoose
               ▼
┌──────────────────────────────┐
│           MongoDB            │
│ Users / Products / Orders    │
└──────────────────────────────┘

The Express server provides the REST API and serves the static frontend from the same application.

📁 Project Structure

CodeAlpha_SimpleEcommerce/
│
├── backend/
│   ├── config/
│   │   └── db.js
│   │
│   ├── models/
│   │   ├── User.js
│   │   ├── Category.js
│   │   ├── Product.js
│   │   └── Order.js
│   │
│   ├── middleware/
│   │   ├── auth.js
│   │   └── upload.js
│   │
│   ├── controllers/
│   │   ├── authController.js
│   │   ├── productController.js
│   │   ├── categoryController.js
│   │   └── orderController.js
│   │
│   ├── routes/
│   │   ├── authRoutes.js
│   │   ├── productRoutes.js
│   │   ├── categoryRoutes.js
│   │   └── orderRoutes.js
│   │
│   ├── server.js
│   ├── seed.js
│   ├── package.json
│   └── .env.example
│
├── frontend/
│   ├── css/
│   │   └── style.css
│   │
│   ├── js/
│   │   ├── api.js
│   │   ├── auth.js
│   │   ├── cart.js
│   │   ├── utils.js
│   │   ├── navbar.js
│   │   ├── home.js
│   │   ├── products.js
│   │   ├── product-details.js
│   │   ├── cart-page.js
│   │   ├── checkout.js
│   │   ├── order-success.js
│   │   ├── my-orders.js
│   │   ├── login.js
│   │   ├── register.js
│   │   ├── admin-dashboard.js
│   │   ├── admin-products.js
│   │   ├── admin-add-product.js
│   │   ├── admin-edit-product.js
│   │   └── admin-orders.js
│   │
│   ├── images/
│   │
│   ├── admin/
│   │   ├── dashboard.html
│   │   ├── products.html
│   │   ├── add-product.html
│   │   ├── edit-product.html
│   │   └── orders.html
│   │
│   ├── index.html
│   ├── products.html
│   ├── product-details.html
│   ├── cart.html
│   ├── checkout.html
│   ├── login.html
│   ├── register.html
│   ├── my-orders.html
│   └── order-success.html
│
├── .gitignore
└── README.md

🚀 Getting Started

1. Prerequisites

Make sure the following are installed:

Node.js — LTS version recommended
MongoDB Community Server

MongoDB Atlas can also be used instead of a local MongoDB server.

Check the installed versions:

node --version
npm --version
mongod --version

mongosh is optional and is only required if you want to inspect the MongoDB database manually from the command line.

2. Clone the Repository

git clone https://github.com/MBen213/CodeAlpha_SimpleEcommerce.git
cd CodeAlpha_SimpleEcommerce

Then move into the backend directory:

cd backend

3. Install Dependencies

npm install

4. Configure Environment Variables

Create a .env file inside the backend directory.

Use .env.example as a template:

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/codealpha_ecommerce
JWT_SECRET=your_secure_jwt_secret

Important

Never commit your .env file to GitHub.

The repository should contain:

.env.example

and should not contain:

.env

5. Start MongoDB

Make sure your MongoDB server is running before starting the application.

On Windows, you can check the MongoDB service using:

services.msc

Look for the MongoDB service and make sure it is running.

6. Seed the Database

The project includes a seed script that creates sample categories, products, and an administrator account.

Run:

npm run seed

7. Start the Application

npm start

The application will be available at:

http://localhost:5000

Open this URL in your browser.

👨‍💼 Admin Access

The seed script creates an administrator account for development and testing.

The credentials are defined by the project's seed configuration.

Security: The default development credentials should never be used in a production deployment. Change the password and JWT secret before deployment.

📡 REST API

Authentication

Method	Endpoint	Description	Authentication
POST	`/api/auth/register`	Register a customer	Public
POST	`/api/auth/login`	Login	Public
GET	`/api/auth/me`	Get current user	Authenticated

Products

Method	Endpoint	Description	Authentication
GET	`/api/products`	Get products with search/filter	Public
GET	`/api/products/:id`	Get product details	Public
POST	`/api/products`	Create product	Admin
PUT	`/api/products/:id`	Update product	Admin
DELETE	`/api/products/:id`	Delete product	Admin

Orders

Method	Endpoint	Description	Authentication
POST	`/api/orders`	Create an order	Authenticated
GET	`/api/orders/my`	Get current user's orders	Authenticated
GET	`/api/orders`	Get all orders	Admin
GET	`/api/orders/:id`	Get an order	Owner/Admin
PUT	`/api/orders/:id/status`	Update order status	Admin

🛒 Shopping Flow

Browse Products
      ↓
View Product Details
      ↓
Add to Cart
      ↓
Update Cart
      ↓
Checkout
      ↓
Enter Shipping Information
      ↓
Create Order
      ↓
Order Confirmation
      ↓
View Order History

🔐 Authentication Flow

Register
   ↓
Login
   ↓
JWT Token
   ↓
Token stored in Browser
   ↓
Authorization Header
   ↓
Protected API Requests
   ↓
User / Admin Resources

Passwords are hashed with bcryptjs, and JWT tokens are used to authenticate protected API requests.

🧪 Testing Checklist

Before submission, verify the following:

📸 Screenshots

🏠 Home Page

🛍️ Products

📄 Product Details

🛒 Shopping Cart

💳 Checkout

📦 My Orders

👨‍💼 Admin Dashboard

🛠️ Product Management

📋 Order Management

📌 Project Notes

This project implements a simplified checkout process.
No real payment gateway is connected.
The shopping cart is stored client-side using localStorage.
Orders are permanently stored in MongoDB after checkout.
Product images are handled using Multer.
JWT is used for protected API endpoints.
Express serves both the REST API and the static frontend.
The project is intended for educational and internship purposes.

🎓 CodeAlpha Internship

This project was developed as part of the:

CodeAlpha Full Stack Development Internship

Task 1 — Simple E-commerce Store

Requirements Covered

✅ Product listings
✅ Shopping cart
✅ Product details page
✅ Order processing
✅ User registration/login
✅ Database for products, users, and orders
✅ Express.js backend
✅ HTML/CSS/JavaScript frontend

👨‍💻 Author

Mohamed Ben

Full Stack Web Developer | Software Engineer

📄 License

This project was created for educational and internship purposes as part of the CodeAlpha Full Stack Development Internship.

Name		Name	Last commit message	Last commit date
backend		backend
docs/screenshots		docs/screenshots
frontend		frontend
README.md		README.md

Method	Endpoint	Description	Authentication
GET	`/api/categories`	Get categories	Public
POST	`/api/categories`	Create category	Admin

Latest commit

History

Folders and files

Repository files navigation