CodeAlpha_Simple E-commerce Store

Task 1 — CodeAlpha Internship Project

A fully functional, modern e-commerce store built with HTML, CSS, JavaScript (frontend) and Django + Python (backend), featuring user authentication, a real database, shopping cart, wishlist, and order processing.

---

🚀 Tech Stack

Layer	Technology
Frontend	HTML5, CSS3, Vanilla JavaScript
Backend	Django 5, Django REST Framework
Database	SQLite (via Django ORM)
Auth	Token-based authentication (DRF)

---

✨ Features

• 🛍️ Product Listings — 20 products across 6 categories with filters & sorting
• 🔍 Search — Live product search (Ctrl+K)
• 🛒 Shopping Cart — Add, remove, update quantities; persists across sessions
• ❤️ Wishlist — Save products for later
• 👤 User Auth — Register & Login with token authentication
• 📦 Order Processing — Full 3-step checkout (Shipping → Payment → Review)
• 📋 Order History — View all past orders per user
• 🎟️ Coupon Codes — e.g., LUXE20 for 20% off
• 🌙 Dark Theme — Premium glassmorphism UI design
• 📱 Responsive — Mobile-first design with hamburger nav
• ⚙️ Django Admin — Manage products, orders, and users

---

📁 Project Structure

CodeAlpha_Simple_Ecommerce/
├── README.md
├── frontend/                          ← Frontend (open index.html)
│   ├── index.html               ← Entry point
│   ├── css/
│   │   ├── style.css            ← Design system & tokens
│   │   ├── components.css       ← UI components
│   │   └── pages.css            ← Page layouts
│   └── js/
│       ├── data.js              ← Mock product data
│       ├── store.js             ← Cart & wishlist state
│       ├── components.js        ← Reusable UI renderers
│       ├── pages.js             ← Page renderers (10 pages)
│       ├── app.js               ← SPA router & global logic
│       └── api.js               ← Django REST API client
│
└── backend/                     ← Django backend
    ├── manage.py
    ├── requirements.txt
    ├── db.sqlite3               ← SQLite database (auto-created)
    ├── luxe/
    │   ├── settings.py
    │   └── urls.py
    └── store/
        ├── models.py            ← Product, Cart, Order, User models
        ├── serializers.py       ← DRF serializers
        ├── views.py             ← REST API views
        ├── urls.py              ← API URL routing
        ├── admin.py             ← Django admin config
        └── fixtures/
            └── products.json    ← Seed data (20 products)

---

⚙️ Setup & Installation

Prerequisites

• Python 3.10+
• A modern web browser

1. Clone / Download the project

git clone https://github.com/yourusername/CodeAlpha_Simple_Ecommerce.git
cd CodeAlpha_Simple_Ecommerce

2. Set up the backend

# Navigate to backend folder
cd backend

# Create virtual environment
python -m venv .venv

# Activate it (Windows)
.venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create database & tables
python manage.py makemigrations store
python manage.py migrate

# Load 20 seed products
python manage.py loaddata store/fixtures/products.json

# Create admin user
python manage.py createsuperuser

3. Start the backend server

python manage.py runserver

Server runs at: http://localhost:8000

4. Open the frontend

Simply open UI/index.html in any browser — no server needed for the frontend.

---

🔗 URLs

URL	Description
UI/index.html	Frontend store
http://localhost:8000/admin/	Django Admin panel
http://localhost:8000/api/products/	Products API
http://localhost:8000/api/auth/register/	Register endpoint
http://localhost:8000/api/cart/	Cart API
http://localhost:8000/api/orders/	Orders API

---

🗄️ API Endpoints

Method	Endpoint	Description
POST	/api/auth/register/	Create account
POST	/api/auth/login/	Login → get token
GET	/api/auth/me/	Current user info
GET	/api/products/	List products (filterable)
GET	/api/products/<id>/	Product detail
GET	/api/categories/	Category list
GET	/api/cart/	Get user's cart
POST	/api/cart/add/	Add item to cart
POST	/api/wishlist/toggle/<id>/	Toggle wishlist
POST	/api/orders/create/	Place order
GET	/api/orders/	Order history

---

🎮 Usage

1. Open UI/index.html in your browser
2. Click 👤 Login in the navbar to register or log in
3. Browse products on the Shop page
4. Add items to your Cart or Wishlist
5. Use coupon code LUXE20 at checkout
6. Complete the 3-step checkout flow
7. View past orders by clicking your username → My Orders

---

👨‍💻 Author

CodeAlpha Internship — Task 1
Built with ❤️ using Django + Vanilla JS

---

📄 License

This project is for educational purposes as part of the CodeAlpha internship program.