Build an E-commerce Website with Python Django & TailwindCSS - Complete Project Tutorial

In this step-by-step tutorial, we'll be creating a fully functional e-commerce website using Django. You'll learn how to build a site where users can browse products by categories, add items to their cart, and manage their orders from start to finish. We'll also make it easy to expand your site by adding more products and categories, and tracking user orders.

The best part? We'll use TailwindCSS to style the website, making it look professional with minimal effort. TailwindCSS is a powerful framework that makes designing beautiful websites faster and easier than ever.

By the end of this video, you'll have a sleek, modern e-commerce site that showcases the power of Django and TailwindCSS. Whether you're a beginner or looking to sharpen your skills, this tutorial has something for you.

Timestamps:

00:00 - What We Will Make - Website Demo
00:47 - Create Empty Directory and Open it in Visual Studio Code
01:09 - Project Prerequisites
02:09 - Create and Activate Virtual Environment (venv)
02:41 - Install Django
03:10 - Create Django Project

Setting up Tailwind:

04:05 - Create package.json [npm init]
04:30 - Install Tailwind
05:10 - Configure Tailwind
06:01 - Point to Template Files [tailwind.config.js + settings.py]
07:13 - Tailwind Directives + Creating Static Directory
08:07 - Create Custom Watch Command/Script to Watch for Changes in Templates
10:39 - Add Path to Static Dir
12:10 - Create Templates Folder and base.html

Product App:

15:00 - Create Products App
16:00 - Define Models (Products App)
16:20 - Define Category Model
18:00 - Define Product Model
24:45 - Define Product App Views
30:35 - Create urls.py and Configure URLs (Products App)
33:45 - Create Templates
35:45 - Install Pillow and Configure Media Settings
39:35 - makemigrations + migrate
41:25 - Add Path to Products App's Templates to Tailwind.config.js
42:07 - Create Superuser
43:02 - Register Category Model and Product Model in Admin.py
46:30 - Add Products and Categories from Admin Site
48:20 - Create Navbar, Footer, and Category Bar
59:28 - Show Products and Categories in products/list.html and products/detail.html

Cart App:

01:17:50 - Create Cart App
01:18:30 - Define Cart Models
01:23:28 - Define Cart Views [cart_add and cart_detail]
01:33:00 - Create Cart App Templates [detail.html]
01:34:00 - Cart App's urls.py
01:41:02 - Configure add_item Form in Detail Template
02:02:34 - Define cart_remove View

Orders App:

02:19:00 - Create Orders App
02:20:52 - Define Orders' Models
02:27:39 - Define Views and Order Create Form
02:39:01 - Add Code to Orders' Templates and Configure URLs
02:45:29 - Make Migrations (Orders App)
02:47:21 - Register Order Models in Admin

🔗Resources and Links:

Django Docs:
https://docs.djangoproject.com/en/5.0/



Github Repo:
https://github.com/PikoCanFly/E-comme...

🧡 If you have found this content useful consider becoming my Patreon: 💜
  / pikocanfly  


-----

If you're considering hosting your app on DigitalOcean, it’d be awesome if you used my referral link! You'll get $200 in free credits, and I'll get $25.

Here is the link: https://m.do.co/c/58e570dc13ea


#django #fullstack #webdev #tutorial