Django, HTMX and DaisyUI Components - Building a To-Do List App

In this video, we'll build a to-do list app with Django, HTMX and DaisyUI.
Starter Code: github.com/bugbytes-io/htmx-d...
We'll walk through adding the model and form classes, as well as styling page elements with DaisyUI component classes.
We'll then learn how to submit data using HTMX, and how to update the DOM in response to those requests, again with DaisyUI components responsible for the styles. We will see how to mark to-dos as completed, and how to remove them from the database and front-end (with help from custom HTMX events).
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:43 DaisyUI
02:12 Creating Todo Django model class
04:06 Fetching and Displaying Todos
06:57 Adding TailwindCSS & DaisyUI
10:12 Adding DaisyUI Table component
11:21 Create Todo form class
13:29 Improving form styles with django-widget-tweaks
16:42 Adding HTMX to project
20:49 Creating partial template with django-template-partials
29:05 Marking to-do complete with HTMX
33:54 Deleting Todo with HTMX
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
▶️ Full Playlist:
• Django & HTMX
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/htmx-d...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Starter Code: github.com/bugbytes-io/htmx-d...
DaisyUI: daisyui.com/
DaisyUI Install: daisyui.com/docs/cdn/
DaisyUI Button: daisyui.com/components/button/
DaisyUI Table: daisyui.com/components/table/
django-widget-tweaks: pypi.org/project/django-widge...
HTMX: htmx.org/docs/#installing
Django-template-partials: github.com/carltongibson/djan...
Adding CSRF Token to HTMX Request: django-htmx.readthedocs.io/en...
#python #django #webdevelopment #htmx

[@ParhamSalamati]

This was sooooo properly tailored to give as much information as possible in ~40 minutes that exceeded my expectations on value vs time spent on a video! THANK YOU FOR DOING THIS!

[@bugbytes3923]

Thanks a lot! Glad it was useful! :)

[@ibrahimyakupaydn]

Using Django , htmx in my recent project, this video helps me a lot. Good to know daisy UI. Thanks for the video.

[@bugbytes3923]

Thanks a lot! Glad it has helped!

[@Alex-rj6fo]

Thank you for your work, I do not miss your video with training Django and htmx

[@bugbytes3923]

Thanks a lot!

[@onealoneal7047]

I really like the way you going straight forward to what we are expecting for from you when we read the titles of your videos.
Your work its just amazing!

[@bugbytes3923]

Thanks a lot for the nice comment!

[@AmoahDevLabs]

I love DaisyUI. Thanks for sharing

[@bugbytes3923]

Thanks for watching!

[@krisvanhouten1543]

Dude, loved this content. I've been hearing a lot about HTMX lately, and have been wanting to learn Django/Python so this video was a nice starter.

[@bugbytes3923]

Thanks a lot dude! Glad to hear that.

[@siddharthakhanal9424]

Thank you for your invaluable content! I've been a long-time viewer, learning so much from your videos. I'd greatly appreciate more Wagtail CMS tutorials, as there's a scarcity of quality content online. Your expertise would make a significant impact. Gratefully looking forward to it!

[@bugbytes3923]

Thanks a lot for the nice comment! I'd like to do some Wagtail videos, for sure. Hopefully early in the new year, perhaps?

[@raffritter6766]

Very smooth, appreciate it:)

[@bugbytes3923]

Thanks a lot!

[@mariocortes2670]

Thanks for your content.

[@bugbytes3923]

Thanks as always for the support!

[@myoji5580]

HTMX contents always is very good.

[@bugbytes3923]

Cheers!

[@prashlovessamosa]

Thanks for making Awesome stuff.

[@nadetdevfullstack7041]

Excellent!

[@bugbytes3923]

Thanks!

[@user-xu7jz4li7e]

Awesome.

[@bugbytes3923]

Thanks!

[@repotranstech9614]

Another cool video.

[@bugbytes3923]

Thanks!

[@monorepo]

This was nice! Love DaisyUI.
Litestar, HTMX, DaisyUI when ;)

[@bugbytes3923]

Thanks! Awesome idea, let's see if I can create something :D

[@prashlovessamosa]

Thanks for awesome videos.

[@bugbytes3923]

Thank you!

[@winz1527]

Great video

[@bugbytes3923]

Thanks a lot!

[@RobertoFabrizi]

Amazing video thank you!! A bit ot, but is there a no js framework component library for unocss?

[@mahmoudramadan6581]

Amazing

[@bugbytes3923]

Thanks a lot!

[@hammoudamoujehed6112]

Wonderful video! Can you explain how to add the toast message for this exercise?

[@serychristianrenaud]

Thanks

[@bugbytes3923]

Thanks for watching!

[@user-pp1do4zq7p]

Cool, nice to learn about tools and components that will make Django Templating alot easier and modern! Is there a similar UI library to create a dashboard? Maybe a more streamlined way to integrate ChartJS using alpine or hyperscript or something along those lines?

[@bugbytes3923]

Thank you! Good questions there - will have a look to see, but I'm not currently aware of a charting library that uses Alpine/Hyperscript.

[@lt8cn]

this video is better than before, and can you add more form like django inlineform, incloude main form and tow or more subform, and subform can add more rows. crud in one page. Thank you make so many great videos!

[@bugbytes3923]

That's awesome - thanks a lot!

[@knwanze]

I've seen a similar pattern somewhere else for inserting the new to-do item in the list by using hx-swap: afterbegin or beforeend. My question is if you're updating the DB with a new list item is it not easier to just fetch all the to-dos and swap innerHTML with the partial of list items and call it a day? Or are there advantages to doing the other way?

[@ZodakZach]

Wow i literally am making my capstone project and my idea was to use django, with htmx , tailwind with daisyui like this exact setup but with postgreSQL for db. and then i came across this video and its already been done lol great minds think alike ig but yeah seems like a good tech stack.

[@bugbytes3923]

Awesome, glad this was helpful! Good luck with your project!

[@frameff9073]

Good thank

[@bugbytes3923]

Thanks!

[@Woeden]

Good ol Django

[@prashlovessamosa]

Wanna Say God
.😅

[@gabrielpasv]

Have you considering create a tutorial about django and multi tenancy ? Maybe with django-tenants package ? Thanks

[@htlcnn]

Could you please show how to add a Modal to confirm deletion? Thanks.

[@christopheanfry2425]

Very nice video but not very recommended to use cdn in production. The Django Tailwind package works very well!!! Have you tried it?

[@omaral-halabiah2851]

thanks very much for your efforts,
if we want to add "edit_todo" functionality to update tr inplace using htmx and template_partials , how we can do that ?

[@deidyomega]

Have a btn that replaces the closest tr with a new tr that includes a form (using partials would be smart here too).

[@n.a3642]

Can you say what partials are please? Super noob here@@deidyomega

[@user-yi5vl1jd8h]

17:05 How should I do it in production?

[@natehardy3311]

Not gonna say a lot. Just thank you 😊

[@bugbytes3923]

Thanks a lot!

[@amine63404]

Please, we need a tutorial about django All auth, it's a great solution and the good turotials like yours are missing.

[@bugbytes3923]

Great suggestion - I'll hopefully add this soon.

[@aman4069]

I still don't understand what Django extensions are used for?? Could you please explain to me

[@AlexeyDzuba]

Hi comrade! I searched for a video about django's formset. For example, you sell stationery and issue invoices. So, the database contains Items table (field 'name') and an Invoices table (fields foreign to name and 'Quantity'). At the frondend, user create a new Invoce, then add line by line Items, and then save it by one button. Also, user can select any existing Invoce and edit it. There must be a way to freely using different widgets at this formset, as data, select2, and another. Can you point me at existed of your tutorial or, maybe, this is an interesting theme for create a new one? I watched your video "Django & HTMX - Dynamic Form Creation and Submission" but I can't imagine how to implement the EDIT part. Also, I see two ways for edit - as in htmx examples ('edit button' for each line in table), but I think it will be hard to create a cute "table to form" transformation, and another way (i think it preferable) - as django's native formset, where each line look as form.

[@AlexeyDzuba]

Аfter thinking about it, I realized that, in fact, it will be a complete imitation Django's Admin inlines))) Can we do it with HTMX, do you think?

[@oSpam]

@@AlexeyDzuba yeah probably quite easily. Just swap the whole table for the new form and then in the backend on submit revert back, would likely take a bit of view code and a few html files, but seems like an easy enough task

[@Cyrixau]

Are these CDNs fine to use once deployed and in production?

[@bugbytes3923]

Not really - it's better to have the dependencies served from your server.

[@Good-and-Geeky]

You mention a github repo link with a starter and a requirements.txt.... Where did you put it? Sorry I didn't manage to find it.

[@bugbytes3923]

Hey - should be in the video description! I’ll add the link if you can’t see it!

[@Good-and-Geeky]

@@bugbytes3923 thanks

[@bakaresegun4180]

Can I I love you? Hope i am not bridging any moral? Bro, you are the best. I love you❤

[@bugbytes3923]

Haha thank you!

[@bakaresegun4180]

@@bugbytes3923 But please can you do a series on Django Channels? Please!!!! For God sake

[@user-rp7fc3fj3y]

When I click to delete ToDo, it deletes but does not go away from the screen, I have to refresh the page. I do not know why.

[@salvatore_de_fazio]

Try to assign to response['HX-Trigger'] an event name in kebab-case and not in camel case

[@hey_james]

NOT ANOTHER GOD DAMN TODO TUTORIAL!!!!!!!!!!!!!

[@omother942]

Hijacking this comments section for your Golang + HTMX - Creating a Go webserver video. Is there a way to link that all together so you can have the POST of the form go to a database and automagically update the index.html using HTMX with the new record? Can't connect that dot for the life of me!
Thanks for your content - loving your Go + HTMX stuff

[@niquedegraaff]

Too bad it still depends on npm

[@AdnanNazirAhmed]

Very helpful

[@bugbytes3923]

Thanks a lot!

[@RootsterAnon]

You lost me at Django

[@bugbytes3923]

That's a shame! 😬

[@aman4069]

I still don't understand what Django extensions are used for?? Could you please explain to me