Piko Can Fly
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/ Link to repo found on my Patreon: https://www.patreon.com/PikoCanFly #django #fullstack #webdev #tutorial
Complete understanding of the topic
Hands-on practical knowledge
Real-world examples and use cases
Industry best practices
Take your learning to the next level with premium features