A full-stack Django e-commerce web application for a fashion/clothing brand — built with product catalog management, cart & wishlist, Razorpay-powered checkout, cloud-hosted media, and a serverless deployment on Vercel.
- Problem Statement
- Target Users
- Project Info
- Tech Stack
- Features
- Folder Structure
- Installation
- Environment Variables
- Usage
- Screenshots
- API Documentation
- Performance
- Challenges Faced
- Future Improvements
- Testing
- Deployment
- Contributing
- License
- Acknowledgements
- GitHub Stats
Independent fashion sellers and small clothing brands need a complete, working online storefront — not just a static catalog, but real cart management, wishlists, secure payments, and order tracking — without relying on expensive third-party platforms. RUNE is a from-scratch implementation of that full purchase flow, built to demonstrate a production-style e-commerce stack end to end.
- Online shoppers browsing and purchasing clothing (dresses, tops, menswear, womenswear, accessories)
- Recruiters and technical reviewers evaluating full-stack development capability
- Developers looking for a reference Django + Cloudinary + Vercel deployment example
| Project Type | Full Stack Web App |
| Current Status | Deployed (Vercel) — actively maintained |
| Author | @slashthose |
Frontend
- HTML5, CSS3 (custom, hand-built — no CSS framework)
- Vanilla JavaScript (
fetchAPI for async cart/wishlist actions) - Google Fonts (Fraunces + Inter)
Backend
- Python 3.12
- Django 6.0.7
Database
- PostgreSQL, hosted on NeonDB (serverless Postgres)
Media & Static Assets
- Cloudinary — persistent storage for user/product-uploaded images (
django-cloudinary-storage)
Key Libraries
django-import-export— bulk CSV/Excel product import via Django admindj-database-url— Postgres connection parsingpsycopg2-binary— Postgres driverpython-dotenv— local environment variable loadingrazorpay— payment gateway SDKgunicorn— WSGI application server
Authentication
- Django's built-in auth system, wired through a custom
accountsapp (registration, login, logout)
APIs Used
- Razorpay Payment Gateway API
- Cloudinary Media API
Deployment
- Vercel (
@vercel/pythonruntime)
Other Tools
- Git & GitHub
- Django Admin (product/category/customer/wishlist management)
- 🔐 User registration, login, and logout
- 🗂️ Product catalog organized by category (Tops, Dresses, Men, Women, Accessories, Shirts)
- 🔍 Product search
- 🖼️ Product detail pages with image gallery, size selection, and quantity stepper
- 🛒 Add to Cart (async, no page reload)
- ❤️ Add to Wishlist (async, no page reload)
- 📦 Cart management — update quantity, remove items
- 💳 Checkout flow with Razorpay payment integration and payment verification
- 📬 Order placement, order confirmation, and order history
- 🗃️ Django admin panel for managing products, categories, customers, and wishlists
- 📤 Bulk product import/export via CSV/Excel (django-import-export)
- ☁️ Cloud-hosted product images (Cloudinary) — persistent across deployments
- 📱 Responsive layout
Fullstack-Project/
├── ecommerce/ # Project root (Django BASE_DIR)
│ ├── ecommerce/ # Django config package
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ ├── core/ # Main app — products, categories, cart, wishlist, orders
│ ├── accounts/ # Custom auth app — login / register / logout
│ ├── templates/
│ │ └── core/
│ │ ├── index.html
│ │ ├── category.html
│ │ ├── product_detail.html
│ │ ├── cart.html
│ │ ├── wishlist.html
│ │ ├── checkout.html
│ │ ├── search_results.html
│ │ ├── order_confirmation.html
│ │ └── order_history.html
│ ├── static/
│ │ └── images/ # Design assets (banners, category thumbnails)
│ ├── media/ # Local-only fallback — production uses Cloudinary
│ └── manage.py
├── requirements.txt
├── vercel.json
└── README.md
Note: adjust this tree if your actual app locations differ slightly — this reflects the structure as last confirmed during development.
- Python 3.12+
- Git
- A PostgreSQL database (e.g. a free NeonDB project)
- A free Cloudinary account
- A Razorpay account (test mode keys are fine for development)
git clone https://github.com/slashthose/Fullstack-Project.git
cd Fullstack-Project/ecommercepython -m venv venv
# Windows
venv\Scripts\activate
# macOS/Linux
source venv/bin/activatepip install -r requirements.txtCreate a .env file inside the ecommerce/ project folder (see Environment Variables below).
python manage.py migratepython manage.py createsuperuserpython manage.py runserverVisit http://127.0.0.1:8000/ to view the site, and http://127.0.0.1:8000/admin/ for the admin panel.
Create a .env file with the following keys:
# Django
DJANGO_SECRET_KEY=
DJANGO_DEBUG=False
ALLOWED_HOSTS=localhost,127.0.0.1,.vercel.app
# Database (NeonDB / Postgres connection string)
DATABASE_URL=
# Cloudinary
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
# Razorpay
RAZORPAY_KEY_ID=
RAZORPAY_KEY_SECRET=
⚠️ Never commit your.envfile. Confirm it's listed in.gitignore. When deploying, these same variables must be added separately in your hosting platform's environment variables settings —.envfiles are not deployed with your code.
- Browse the homepage to explore featured categories and collections.
- Click into a category (e.g. Dresses, Men, Women) to view the filtered product grid.
- Click a product to open its detail page — view images, select a size, choose a quantity.
- Add the item to your cart or wishlist.
- Register or log in to proceed to checkout.
- Review your cart, proceed to checkout, and complete payment via Razorpay.
- View your order confirmation, and track past orders from your order history page.
- Store admins can log into
/admin/to add, edit, or bulk-import products and categories.
Landing Page
Category Page
Order Detail Page
Cart
Checkout
All endpoints below are server-rendered Django views; the cart/wishlist endpoints are called asynchronously via fetch() and return JSON.
| Method | Endpoint | Description | Response |
|---|---|---|---|
| GET | / |
Homepage | HTML |
| GET | /category/<category_name>/ |
Category product listing | HTML |
| GET | /product/<product_id>/ |
Product detail page | HTML |
| GET | /search/ |
Product search | HTML |
| POST | /cart/add/<product_id>/ |
Add item to cart | { "cart_count": int } |
| POST | /cart/update/<product_id>/ |
Update cart item quantity | { "cart_count": int } |
| POST | /cart/remove/<product_id>/ |
Remove item from cart | { "cart_count": int } |
| GET | /cart/ |
View cart | HTML |
| POST | /wishlist/add/<product_id>/ |
Add item to wishlist | { "wishlist_count": int } |
| POST | /wishlist/remove/<product_id>/ |
Remove item from wishlist | { "wishlist_count": int } |
| GET | /wishlist/ |
View wishlist | HTML |
| GET/POST | /checkout/ |
Checkout page | HTML |
| POST | /place-order/ |
Place an order | JSON |
| POST | /payment/verify/ |
Verify Razorpay payment | JSON |
| GET | /order/<order_id>/confirmation/ |
Order confirmation page | HTML |
| GET | /orders/ |
Order history | HTML |
| GET | /order/<order_id>/ |
Order detail | HTML |
| GET/POST | /accounts/user_login |
User login | HTML |
| GET/POST | /accounts/user_register |
User registration | HTML |
| GET | /accounts/user_logout |
User logout | Redirect |
All POST requests require a valid Django CSRF token, sent via the X-CSRFToken header.
- Static design assets served via WhiteNoise with compression enabled
- Product images served via Cloudinary's CDN, avoiding load on the app server entirely
- Database connections use
conn_max_agepooling viadj-database-urlto reduce connection overhead on NeonDB
- Silent storage misconfiguration:
DEFAULT_FILE_STORAGEwas removed in Django 5.1 in favor of theSTORAGESdict — using the old setting caused uploads to silently fall back to local disk storage with no error raised, which took careful debugging to trace back to a Django version mismatch. - Ephemeral filesystem on serverless deployment: locally-stored media files don't persist across deployments on Vercel, requiring a move to Cloudinary for all user/product-uploaded images.
- Static vs. media asset separation: design assets (category banners, hero images) needed to be served as static files rather than treated as media, requiring template and settings changes plus WhiteNoise configuration.
- Serverless static file bundling: Vercel's Python runtime doesn't automatically run
collectstatic, requiringWHITENOISE_USE_FINDERSand explicitincludeFilesconfiguration invercel.json. - Nested project directory structure: a doubly-nested
ecommerce/ecommerce/layout madeBASE_DIR-relative paths (andvercel.jsonbuild paths) easy to misconfigure.
- Add product reviews and ratings
- Add product filtering by price, size, and color
- Add pagination for large category listings
- Add email notifications for order confirmation and shipping updates
- Add a "recently viewed products" section
- Add discount codes / coupon support
- Add guest checkout (without requiring account registration)
- Add multi-image zoom/lightbox on product detail pages
- Add an inventory low-stock warning system in admin
- Add order status tracking (processing, shipped, delivered)
- Add a returns/refund request flow
- Add unit and integration test coverage
- Add caching (e.g. Redis) for category and product listing pages
- Add a recommendation engine for related products
- Add multi-currency support
- Add a mobile app or PWA version
- Add analytics dashboard for admin (sales, top products, traffic)
- Manual Testing: All core flows (browsing, cart, wishlist, checkout, payment, order history) have been manually tested across the development and deployed environments.
- Unit Testing: Not yet implemented — planned as a future improvement using Django's
TestCaseframework. - Edge Cases: Verified behavior for empty cart/wishlist states, unauthenticated access to protected routes (redirects to login), and out-of-stock products.
- Security Testing: CSRF protection verified on all state-changing endpoints; environment secrets kept out of version control.
- Performance Testing: Not yet load-tested; recommended before scaling to production traffic.
Currently deployed on Vercel using the @vercel/python runtime.
{
"builds": [
{
"src": "ecommerce/ecommerce/wsgi.py",
"use": "@vercel/python",
"config": { "includeFiles": ["ecommerce/static/**"] }
}
],
"routes": [
{ "src": "/(.*)", "dest": "ecommerce/ecommerce/wsgi.py" }
]
}Remember to set all environment variables directly in your hosting platform's dashboard — they are not read from a committed .env file.
Other deployment options this project could be adapted for:
- Render / Railway — persistent filesystem, simpler static file handling
- Docker — containerized deployment for any cloud provider
- AWS / Azure / Google Cloud — for larger-scale production hosting
Contributions are welcome!
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name - Make your changes and commit:
git commit -m "Add your feature" - Push to your fork:
git push origin feature/your-feature-name - Open a Pull Request describing your changes
Please open an issue first for major changes so we can discuss the approach.
This project is licensed under the MIT License.
MIT License
Copyright (c) 2026 Sakshi
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- Django — web framework
- Cloudinary — media storage and delivery
- NeonDB — serverless Postgres hosting
- Razorpay — payment gateway
- Vercel — deployment platform
- Google Fonts — Fraunces & Inter typefaces
Built with 🖤 by Sakshi