Скачать или смотреть Building a Feature-Rich Django Website with HTMX, APIs, Auth & Async Views—Step by step Tutorial 10

In this Django tutorial, we’ll build a complete movie details page for our Movie Spot app using Django, HTMX, Bootstrap, and external movie APIs. This step-by-step guide will cover API integration, user authentication, and real-time updates using HTMX for a seamless user experience.

🚀 What You’ll Learn in This Video:
✅ How to fetch movie details using an external API
✅ Django authentication system for secure user logins
✅ Using HTMX for real-time updates without refreshing the page
✅ Managing user lists (Adding & Removing movies)
✅ Creating modals for deleting movies dynamically
✅ Implementing reverse_lazy for user redirects after login
✅ Bootstrap integration for a clean, responsive UI

💡 Who is this for?
Perfect for Django beginners & intermediate developers looking to build interactive, real-time web applications using modern frontend tools like HTMX.

🔗Code:
📂 Follow along: Clone this branch →
https://github.com/PikoCanFly/Django-...

📂 Final Code:
https://github.com/PikoCanFly/Django-...


🕒Chapters:
🎬 Project Overview & Setup
⏳ 00:00 - Our Django + HTMX + Bootstrap site so far
⏳ 00:49 - The features we will add in this video
⏳ 01:41 - Project overview

🛠 Building the List Detail View
⏳ 03:02 - Define List Detail View (views.py - Functional View)
⏳ 03:35 - Get Object or 404 (fetch list from the database)
⏳ 04:12 - Query the database for list items (movies)
⏳ 04:45 - Fetch movie details from TMDB API (Python requests library)
⏳ 08:33 - Return statement + List detail template
⏳ 09:30 - Context Dictionary (passing variables from view to template)
⏳ 11:53 - List detail template logic

🔗 Routing & Template Updates
⏳ 12:29 - Map list view in urls.py
⏳ 13:32 - Link to list detail page (anchor | href)
⏳ 14:29 - Attribute error: 'tuple' object has no attribute 'get' (Debugging)
⏳ 14:48 - Page is empty because I forgot about block content 😅
⏳ 15:23 - Fix the layout with Bootstrap

🎭 Adding Movies to Lists (Dynamic UI Updates)
⏳ 16:25 - New feature: add movies to lists through landing page
⏳ 17:35 - Pass user lists through landing page view
⏳ 18:58 - Add Movie Form in a Bootstrap dropdown
⏳ 19:03 - Implement Bootstrap Toast notifications
⏳ 19:56 - Link to User Hub as a button in dropdown

🎥 Movie Details Formatting
⏳ 21:55 - Separate cast/directors/genres by commas (Django's forloop.last)
⏳ 23:06 - Add delete button to movie cards and style with Bootstrap

🗑 Movie Deletion with HTMX & Modals
⏳ 24:48 - Show delete button only to list owners
⏳ 25:46 - Define Delete Movie View
⏳ 27:50 - If POST request, delete movie & return updated list (partial template)
⏳ 30:33 - urls.py path to delete movie view
⏳ 31:29 - Updated list partial template logic
⏳ 32:36 - Delete Confirmation Modal (dynamic ID, hx-post, hx-swap, hx-target)
⏳ 36:31 - Card Anchor Element vs Modal (Bug Fix 🐞)
⏳ 37:20 - Modal Delete Button works! 🎉

🏗 Final Touches & Redirects
⏳ 37:35 - If page is empty, show Find More Movies button/link
⏳ 39:41 - Make Bootstrap Toast Clickable (redirect to list detail page)
⏳ 43:23 - Testing Delete Functionality
⏳ 44:20 - Redirect on login using reverse_lazy
⏳ 45:56 - Great work! ⭐🌟









Join this channel to get access to perks:
   / @pikocanfly  

#django #tutorial #htmx #fullstack#bootstrap