React Todo App With Firebase v9 / CRUD Functionality

In this video we will build a todo application in React JS with a firebase backend to store all of the todos. It is a simple easy to follow tutorial to learn basic CRUD functionality within a React JS website utilizing the firestore cloud storage within firebase to manage the backend. All of the styling will be done with Tailwind CSS. If you are already familiar with writing JSX code and Tailwind CSS then just skip ahead to the firebase portion. Thank you for watching.

If you're interested in Firebase Authentication then you can see a full tutorial on Authentication & Protected Routes here:

Timestamps:
00:00 Intro
01:35 Install Tailwind
05:00 Build Layout
11:25 Todo Component
18:15 Add CSS
24:50 Install & Configure Firebase v9
31:40 Read Data
41:00 Update Data
44:50 Create Data
55:20 Delete Data

Learn to code here!

Github Repo

🔥 Connect with me on IG 🔥

☕ Support the channel ☕

💻 My Coding Equipment

[KarakiriCAE]

I love how you organize tailwind properties in an object. It makes the code so much cleaner!

[debussy]

Brother please don’t stop making these videos! They may seem like simple projects but so far in this video I have learned so much and I can actually follow through and understand what’s going on! Many blessings to you! 🙏🏼 keep up the great work. And keep these projects coming because I will be here to learn from the best.
I hope you could make a separate video showing firebase would be nice to supplement the learning.

[smarthousetech]

I have to express my gratitude for giving us all this knowledge. I just graduated as a Full Stack Web Developer, and will continue to watch your videos throughout my career. You helped me so much especially with my last project, and I can code better each day just from watching you. Thanks Bro.

[vikk]

Whoaaa... this tutorial was super awesome loved it . Keep em coming !!!

[Furki_]

It was my first firebase use, it works so smoothly and is well documented. I also like the way you used tailwind classes by putting them in an object called styles. Thanks for the video !

[subramanyam.dm]

I seen number of videos related to connecting react application to firestore i did not feel interesting, this video helps me to understand firestore concepts thoroughly. Thank You.

[MicahJohns]

BRO this helped me out immensely. Not alot of people working Firebase config for the new v9. Very helpful!

[krzysztofpardel]

Thank you so much for taking take to prepare for, record and deliver those materials to us! It helped me in my bigger project. So so thankful! Please keep making new videos!

[od]

Best youtuber for react JS I've seen in my 2 years journey so far, You are a life saver keep up the work man love it

[mgriffes]

This is such a solid, solid, solid tutorial. Touching on Tailwind CSS while creating a todo app in React JS with a firebase backend - all in under one hour. Super easy to follow along. Thanks so much for putting this together and putting it out there. Well done, sir.

[subhrajitagantayat]

It was a very beginner friendly tutorial project of react, firebase, tailwindcss with perfect explanation of all the functionalities. Thank You for this. Helped a lot in learning the basics properly.

[nemila]

Hey, I really love your videos. I don’t comment often but I had to tell you. You explain very well. You are not too fast and not too slow either. You have great tutorials that teach bunch of new helpful things. I am a new subscriber but already a big fan!

[mitchdask]

Totally worth it spending time on your videos! Always learning something new! Great job!!

[saraohman]

You made it so understandable, thank you! I only missed an order stacking of todos, where the newest todo would be first on the list or where the completed todos would jump to the end of the list.

[EdwardOrnelas]

this is awesome! Keep those backend videos coming. Personally thats where I lack and I really don’t see alot of youtube developer covering a bridge between the Frontend and backend! Good stuff man!

[bhavkushwaha]

Really helpful video! I was looking for an entry point to begin learning firebase and this video really helped a lot. Also it was a good revision for React.

[richardegil]

Great tutorial, was super easy to follow and you covered a lot of ground. Thanks!

[vaibhavnayak]

Thanks a lot, man, Your tutorials are really helpful. I learned a lot, Now I am going to build my own project

[omkarnaik]

Love your content.
Thanks for sharing your knowledge !!!

[andrewcalix]

This is awesome! Don't stop my man