🛒 Shoplify

A modern, full-stack e-commerce platform built with Django REST Framework & React

Features · Demo · Quick Start · API Docs · Contributing

---

📸 Demo

---

✨ Features

🛍️ Shopping Experience

• Product Catalog — Browse, search, and filter products with server-side pagination
• Product Details — Rich product pages with image gallery, description, specs, and reviews
• Top Products Carousel — Auto-rotating showcase of highest-rated products
• Search — Real-time keyword search across all products

🛒 Cart & Checkout

• Shopping Cart — Add/remove items, adjust quantities, persistent across sessions (localStorage)
• Multi-step Checkout — Guided flow: Login → Shipping → Payment → Place Order
• Order Tracking — View all past orders with delivery and payment status

👤 User Management

• JWT Authentication — Secure token-based login and registration
• User Profiles — Update name, email, and password
• Auto-login on Register — Seamless onboarding experience

🔧 Admin Dashboard

• Product Management — Create, edit, delete products with image upload
• User Management — View all users, promote to admin, delete accounts
• Order Management — View all orders, mark as paid/delivered

🏗️ Technical Highlights

• RESTful API — Clean, well-structured Django REST Framework API
• JWT Tokens — 7-day access tokens with 30-day refresh
• Rate Limiting — Built-in throttling (100/day anonymous, 1000/day authenticated)
• CORS Support — Pre-configured for local development
• Static File Serving — WhiteNoise for production-ready static files
• Seed Data — One-command database seeding with sample products

---

🏗 Tech Stack

Layer	Technology
Backend	Python 3.9+, Django 4.2 LTS, Django REST Framework
Frontend	React 18, Redux, React Router 6, React Bootstrap
Auth	JSON Web Tokens (SimpleJWT)
Database	SQLite (dev) — easily swappable to PostgreSQL
Build	Vite 6 (frontend), Gunicorn (production server)
Styling	Bootstrap 5, CSS3, Font Awesome 6
Animation	Framer Motion
HTTP	Axios
Static	WhiteNoise

---

🚀 Quick Start

Prerequisites

Tool	Version	Check with
Python	3.9+	python3 --version
Node.js	18+	node --version
npm	9+	npm --version

1. Clone the repository

git clone https://github.com/MrAliHasan/shoplify.git
cd shoplify

2. Backend setup

# Create & activate virtual environment
python3 -m venv venv
source venv/bin/activate        # macOS / Linux
# venv\Scripts\activate         # Windows

# Install dependencies
pip install -r requirements.txt

# Set up database & seed with sample data
python manage.py migrate
python manage.py seed_data

Seed data creates:

• Admin user: admin@shoplify.com / admin123
• 6 sample products with images (Airpods, iPhone, Camera, PlayStation, Mouse, Alexa)

3. Frontend setup

cd frontend
npm install
cd ..

4. Run the development servers

Option A — Separate servers (recommended for development):

# Terminal 1: Backend (port 8000)
source venv/bin/activate
python manage.py runserver

# Terminal 2: Frontend with hot reload (port 3000)
cd frontend
npm run dev

Visit http://localhost:3000 — Vite proxies API calls to Django automatically.

Option B — Django serves everything (production-like):

# Build the frontend
cd frontend && npm run build && cd ..

# Run Django
source venv/bin/activate
python manage.py runserver

Visit http://localhost:8000

---

📁 Project Structure

shoplify/
├── backend/                    # Django project configuration
│   ├── settings.py             # Database, auth, CORS, static files config
│   ├── urls.py                 # Root URL routing + SPA catch-all
│   └── wsgi.py                 # WSGI entry point (production)
│
├── base/                       # Main Django application
│   ├── models.py               # Product, Review, Order, OrderItem, ShippingAddress
│   ├── serializers.py          # DRF serializers (User, Product, Order, Review)
│   ├── signals.py              # Auto-set username to email on save
│   ├── admin.py                # Django admin registration
│   ├── views/
│   │   ├── product_views.py    # CRUD + search + pagination + reviews + image upload
│   │   ├── user_views.py       # Auth, registration, profile, admin user management
│   │   └── order_views.py      # Order creation, payment, delivery, listing
│   ├── urls/
│   │   ├── product_urls.py
│   │   ├── user_urls.py
│   │   └── order_urls.py
│   ├── management/
│   │   └── commands/
│   │       └── seed_data.py    # `python manage.py seed_data`
│   └── migrations/
│
├── frontend/                   # React SPA (Vite)
│   ├── index.html              # Vite HTML entry point
│   ├── vite.config.js          # Dev server proxy, build output config
│   ├── package.json
│   └── src/
│       ├── main.jsx            # React entry point
│       ├── App.jsx             # Router + layout
│       ├── store.js            # Redux store configuration
│       ├── index.css           # Global styles
│       ├── actions/            # Redux async action creators (axios calls)
│       │   ├── productActions.js
│       │   ├── userActions.js
│       │   ├── CartActions.js
│       │   └── OrderActions.js
│       ├── reducers/           # Redux reducers
│       ├── constants/          # Action type constants
│       ├── components/         # Reusable UI components
│       │   ├── Header.jsx      # Navigation bar
│       │   ├── Footer.jsx      # Newsletter + copyright
│       │   ├── Product.jsx     # Product card
│       │   ├── Rating.jsx      # Star rating display
│       │   ├── ProductCarousel.jsx
│       │   ├── SearchBox.jsx
│       │   ├── Paginate.jsx
│       │   ├── CheckoutSteps.jsx
│       │   ├── Loader.jsx
│       │   ├── Message.jsx
│       │   └── FormContainer.jsx
│       └── screens/            # Page-level components
│           ├── HomeScreen.jsx
│           ├── ProductScreen.jsx
│           ├── CartScreen.jsx
│           ├── LoginScreen.jsx
│           ├── RegisterScreen.jsx
│           ├── ProfileScreen.jsx
│           ├── ShippingScreen.jsx
│           ├── PaymentScreen.jsx
│           ├── PlaceOrderScreen.jsx
│           ├── OrderScreen.jsx
│           ├── ProductListScreen.jsx   # Admin
│           ├── ProductEditScreen.jsx   # Admin
│           ├── UserListScreen.jsx      # Admin
│           ├── UserEditScreen.jsx      # Admin
│           └── OrderListScreen.jsx     # Admin
│
├── static/images/              # Uploaded & default product images (MEDIA_ROOT)
├── resources/                  # Seed data, demo assets
├── requirements.txt            # Python dependencies (7 packages)
├── manage.py                   # Django management entry point
├── .env.example                # Environment variable template
├── .gitignore
└── LICENSE                     # MIT

---

📡 API Reference

All endpoints return JSON. Authentication uses Authorization: Bearer <token> header.

Products

Method	Endpoint	Auth	Description
GET	/api/products/	Public	List products (paginated, searchable)
GET	/api/products/<id>/	Public	Get single product with reviews
GET	/api/products/top/	Public	Top 5 rated products
POST	/api/products/create/	Admin	Create new product
PUT	/api/products/update/<id>/	Admin	Update product details
DELETE	/api/products/delete/<id>/	Admin	Delete product
POST	/api/products/<id>/reviews/	User	Submit a product review
POST	/api/products/upload/<id>/	Public	Upload product image

Query Parameters for GET /api/products/:

• keyword — Search by product name (case-insensitive)
• page — Page number (8 products per page)

Example Response:

{
  "products": [
    {
      "_id": 1,
      "name": "Airpods Wireless Bluetooth Headphones",
      "image": "/media/airpods.jpg",
      "brand": "Apple",
      "category": "Electronics",
      "price": "89.99",
      "rating": "4.50",
      "numReviews": 12,
      "countInStock": 10,
      "reviews": []
    }
  ],
  "page": 1,
  "pages": 1
}

Users & Authentication

Method	Endpoint	Auth	Description
POST	/api/users/login/	Public	Login → returns JWT + user data
POST	/api/users/register/	Public	Register → returns JWT + user data
GET	/api/users/profile/	User	Get current user profile
PUT	/api/users/profile/update/	User	Update name, email, password
GET	/api/users/	Admin	List all users
GET	/api/users/<id>/	Admin	Get user by ID
PUT	/api/users/update/<id>/	Admin	Update user (name, email, admin status)
DELETE	/api/users/delete/<id>/	Admin	Delete user

Login Request:

POST /api/users/login/
{ "username": "admin@shoplify.com", "password": "admin123" }

Login Response:

{
  "token": "eyJ0eXAiOiJKV1QiLC...",
  "_id": 1,
  "username": "admin@shoplify.com",
  "email": "admin@shoplify.com",
  "name": "Admin",
  "isAdmin": true
}

Orders

Method	Endpoint	Auth	Description
POST	/api/orders/add/	User	Place a new order
GET	/api/orders/myorders/	User	Get current user's orders
GET	/api/orders/<id>/	User	Get order details (owner/admin)
PUT	/api/orders/<id>/pay/	User	Mark order as paid
PUT	/api/orders/<id>/deliver/	Admin	Mark order as delivered
GET	/api/orders/	Admin	List all orders

---

⚙️ Configuration

Environment Variables

Copy .env.example to .env:

cp .env.example .env

Variable	Default	Description
DJANGO_SECRET_KEY	django-insecure-dev-only-...	Django secret key (change in production!)
DJANGO_DEBUG	True	Enable debug mode
DJANGO_ALLOWED_HOSTS	127.0.0.1,localhost	Comma-separated allowed hosts

Switching to PostgreSQL

Replace the DATABASES section in backend/settings.py:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'shoplify',
        'USER': 'your_user',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '5432',
    }
}

Then install the driver: pip install psycopg2-binary

---

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Tips

• Backend auto-reloads on file changes (runserver)
• Frontend has HMR via Vite (npm run dev)
• API is browsable at http://localhost:8000/api/products/ (DRF UI)
• Admin panel at http://localhost:8000/admin/ (use seed credentials)

---

📝 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

Made with ❤️ by Ali Hassan

⭐ Star this repo if you found it helpful!