Build an ENTIRE TODO Web Application with Java Spring Boot 3.0.0 in 62 min

In this tutorial, we go through the process of building an ENTIRE TODO web application using the newly released Java Spring Boot 3.0.0!
This is a video aimed at beginners, but if it's been a while since you've seen
Spring Boot, then this might be up your alley as well!
👉👉Grab the source (on github): t.ly/1oux_
🔗 Grab My Other Available Product(s):
- Build Your First Web Service API Using Java Spring Boot wazoowebbytes.gumroad.com/l/x...
🔗Resources & Links mentioned in this video:
Spring Initializr: start.spring.io/​
Visual Studio Code: code.visualstudio.com/
👋🏻Connect with me:
Twitter: / eyuzwa
===---=== Concepts ===---===
- Spring Boot 3.0.0
- Thymeleaf
- Spring Web MVC
- H2 Database
===---=== Chapters ===---===
00:00:00 - Introduction
00:00:50 - Todo Application product tour and demo
00:02:55 - Start.spring.io
00:04:21 - Opening project
00:06:21 - Configure application properties
00:10:02 - Initial Startup
00:12:14 - Creating the TodoItem Model
00:16:11 - Creating the TodoItem Repository
00:17:54 - Creating the TodoItem Service
00:21:14 - Creating the Home Controller
00:23:51 - Setting up the index View template
00:31:00 - Adding Bootstrap WebJars
00:35:18 - Adding a Todo Form Controller for Creating a Todo
00:42:03 - Handling POST data from the form
00:45:25 - Checking H2 Console
00:48:01 - Adding Edit and Delete support
01:02:05 - Overview
#Java
#SpringBoot
#Tutorial

[@heyEdem]

Thank you so much for this. You explain things so much better. Big fan from Ghana

[@wazoowebbytes]

thank you! merci! I appreciate it - just hope it helps

[@wazoowebbytes]

Thanks for your patience everyone - Here's an updated tutorial making use of the newly released Spring Boot 3.0.0!

[@kuksaen]

Simple and easy! Thanks! 👍

[@wazoowebbytes]

thank you! Glad it helped!

[@omishan]

Thanks, I let github copilot do some of the work but it came out fairly similar, thanks for the awesome video!

[@wazoowebbytes]

oh interesting! Thanks so much - I appreciate it!

[@LTZMSYAL]

Great job! Thank you that was usefull :)

[@wazoowebbytes]

thank you SO much - glad it helped!

[@madhusudhans6814]

Thank you. It was very simple and easy to understand.

[@wazoowebbytes]

thank you so much! So happy it helped you out!

[@Serencam]

amazing! thank you

[@wazoowebbytes]

thanks! happy to help! 🙌

[@uruchiqueen6082]

Thanks do much. This video is helpful

[@wazoowebbytes]

thank you so much! I'm happy it helped you out!

[@bugizlihesap9893]

haha you didn't refuse my request you are a very good person and coursier!! respect for you

[@wazoowebbytes]

haha thanks a lot - yeah I'm trying

[@bugizlihesap9893]

@@wazoowebbytes you're not trying .you're doing my teacher 🙂

[@wazoowebbytes]

thanks!

[@rodgamwo]

How do I handle an error that says "This application has no explicit mapping for /error, so you are seeing this as a fallback.". I get this type of error a lot when I try to use Spring and people say my files aren't ordered correctly, but I just follow the tutorial and class my packages in that order? In general I always have this issue but in specific to this project, when I use @ComponentScan(basePackages = {"controllers"}) i get the home page to show up but not /create-todos then when i remove componentscan, the /create-todos shows up initially but I can get "/" to map :(

[@user-ix3wn2df5l]

excellent

[@wazoowebbytes]

thank you!

[@alessandroscimone5463]

Good job! I advise you to pay attention to the video quality and the zoom, which is sometimes unreadable.

[@wazoowebbytes]

thank you! yeah I thought the font size was bigger when I recorded. My humble apologies - I appreciate you pointing it out

[@sashakim149]

Hey man great video, around 30:00 when I try and run the program, instead of generating the Webpage I get a Whitelable Error Page: type=internal Server Error, status 500), it was an error during template parsing

[@wazoowebbytes]

thank you! Oh no -- umm if you open your pom.xml file double check that you have the the thymeleaf starter in the dependencies list. "spring-boot-starter-thymeleaf" ?

[@vaiterius]

36:53 How can I prevent copy-pasting html files all the time? Does thymeleaf support generating boilerplate for every html file I want to create?

[@wazoowebbytes]

great question! Yes and No. Thymeleaf does support having parent layouts of markup and partial rendering -- but it could be a lot cleaner. I should make a video on that..

[@vaiterius]

@@wazoowebbytes A video would be great! I found the docs for page layouts which I’m currently trying to churn through, and having moved over from Flask/Django’s templating systems, I agree that it could be a lot cleaner.

[@wazoowebbytes]

@@vaiterius noted - thanks!

[@MustafaOzturk-xh8qw]

Unfortunately I don't see the Bootstrap implementation on the page. what could be the reason?

[@wazoowebbytes]

hmm for some reason maybe the webjar path isn't being picked up properly? Maybe try replacing the webjar path with a direct link to any CDN that's hosting bootstrap (unpkg, bootstrapcdn, cdnjs, etc) - try that?

[@marcosluque3395]

In my opinion it would be a better project if the user can select a specific date when are creating the tasks. And no just take the actual date

[@wazoowebbytes]

oooo now that's a good suggestion. Like a "Due date" kind of option? Thanks!

[@shiekhahmar9992]

Sir I tried to run the code, but it raising an error

[@wazoowebbytes]

hi - what kind of error are you getting?

[@TheFefs]

It worked, I just had some issues with the services, I had to add the getters/setters to make to be able to see the pages.

[@wazoowebbytes]

interesting! By any chance do you have a link to the changes you needed to make? Thanks for leaving some feedback and hope it helped

[@TheFefs]

@@wazoowebbytes not yet, i will add to github soon. However the change was only to use the IDE to auto generate the getters and setters at the service class. Thanks for the tutorial!

[@bugizlihesap9893]

Will new projects come?

[@wazoowebbytes]

Yeah - still trying to get a proper schedule together

[@notyaniecetv]

ThymeLeaf is making this tutorial impossible to do right now. I keep gettiing "Attribute th:if is not allowed here, Attribute th:text is not allowed here, Attribute th:each is not allowed here" I have followed everything to a T and the dependency was installed at the beginning right along with yours. I cannot find any answers to this online. So until it can be squared away I have to completely abandon this tutorial because none of the other code is wortkign in this file due to those issues.

[@wazoowebbytes]

sorry to hear your frustration!! Do you have the declaration at the top of your html file? Take a look at github.com/wazooinc/spring-boot-3-todo-application/blob/main/src/main/resources/templates/index.html#L2

[@fos1451]

@@wazoowebbytes Hello, at 26:10, I'm having an issue which intelij said "Cannot resolve 'todoItems'". You said in 25:40 that they should have automatically connect but that doesn't seems to be the case for me. I have also copy what you wrote in github and it still present th esame error. I hope you can help too

[@fos1451]

​@@wazoowebbytesplease fix the code too because it seems like you have to put "[[${TodoItems}]]"

[@wazoowebbytes]

@@fos1451 I'll certainly try! The array you're using in Thymeleaf (aka. "todoItems") will only be visible if you've made the exact name as a model variable in the Controller for that view. So double check that in your HomeController you've called "addObject" with the exact same name ("todoItems") along with your data. It can be easy to miss capitalization or something too, so feel free to rename that variable to something else, as long as it matches the same name in your Thymeleaf code. Does that help get you started?

[@fos1451]

@@wazoowebbytes Hello, It seems like it's a textEditor error and not an actual error as I think I'm still able to continue. Programming is actually insane, thanksfully I have managed to get as far to 31:10 after fixing all the errors and I'm ready to continue. I will tell you if I got into trouble and thank you so much!

[@alessandroscimone5463]

sorry but github is only initial!

[@wazoowebbytes]

sorry I don't understand - is the github link not working for you?