CodeAlpha Task 1: Simple E-commerce Store

A full stack online store built for the CodeAlpha Full Stack Development Internship. The store is called Parcel. Shoppers can browse products, open a product page, fill a cart, register or log in, and place an order.

Features

Requirement from the task	What is built
Product listings	Grid of products with search, category filter and sorting
Product details page	Image, price, rating, description, stock status, quantity picker
Shopping cart	Add, change quantity, remove; kept in the browser so it survives a refresh
Order processing	Server checks stock, calculates prices, saves the order, reduces stock
User registration / login	Passwords hashed with bcrypt, sessions use JWT tokens
Database for products, users, orders	MongoDB with three collections: products, users, orders

Extra touches: order history page, free shipping over $100, out-of-stock handling, responsive layout.

Tech stack

• Frontend: HTML, CSS, JavaScript (no framework)
• Backend: Node.js and Express.js
• Database: MongoDB with Mongoose
• Auth: JSON Web Tokens (jsonwebtoken) and bcryptjs

Project structure

CodeAlpha_EcommerceStore/
├── client/               Frontend, served by Express
│   ├── *.html            index (shop), product, cart, checkout, login, register, orders
│   ├── css/style.css
│   └── js/               common.js (API, auth, cart, header) + one script per page
└── server/
    ├── app.js            Express app: routes, static files, error handler
    ├── server.js         Starts the server and connects to MongoDB
    ├── seed.js           Loads starter products into the database
    ├── models/           User, Product, Order
    ├── routes/           auth, products, orders
    ├── middleware/auth.js  Checks the JWT on protected routes
    └── utils/

Run it locally

You need Node.js 18 or newer and MongoDB (installed locally, or a free MongoDB Atlas cluster).

# 1. Install dependencies
npm install

# 2. Create your settings file
cp .env.example .env        # on Windows: copy .env.example .env
# then open .env and set JWT_SECRET to any long random text.
# If you use MongoDB Atlas, also paste your connection string into MONGO_URI.

# 3. Add starter products (needs internet; run once)
npm run seed

# 4. Start the store
npm start

Open http://localhost:5000.

API endpoints

Method	Endpoint	Auth	Purpose
POST	/api/auth/register	No	Create an account
POST	/api/auth/login	No	Log in and get a token
GET	/api/auth/me	Yes	Current user
GET	/api/products	No	List products (?search=, ?category=, ?sort=)
GET	/api/products/categories	No	List categories
GET	/api/products/:id	No	Single product
POST	/api/orders	Yes	Place an order
GET	/api/orders/mine	Yes	My orders
GET	/api/orders/:id	Yes	One of my orders

How it works

1. Browsing. The shop page calls GET /api/products with the current search, category and sort, and draws the cards.
2. Cart. Items are stored in the browser's localStorage. The header badge updates whenever the cart changes.
3. Login. The server hashes the password with bcrypt and returns a JWT. The browser saves it and sends it as Authorization: Bearer <token> on protected requests.
4. Placing an order. The browser sends only product ids and quantities. The server loads the real prices from MongoDB, checks the stock, reduces it with a conditional update (so the last item cannot be sold twice), works out shipping and the total, and saves the order. If anything fails halfway, the reserved stock is put back.
5. Security basics. Passwords are hashed, totals are never trusted from the browser, orders can only be read by their owner, request bodies are type-checked to block NoSQL injection, and all data is escaped before it is shown on a page.

Notes

• Payments are a demo. "Card (demo)" does not collect or charge anything.
• npm run seed first tries to pull fresh product data (including real photos) from the free DummyJSON API. If that request fails for any reason (no internet, antivirus/firewall blocking Node, a restrictive network), it automatically falls back to the offline catalogue bundled in server/seed-data.json. The offline catalogue uses generated placeholder graphics labelled with each product's name instead of real photos, since it doesn't depend on any external image service either.