React Todo App With Firebase v9 / CRUD Functionality
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- 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:
• React Firebase Authent...
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!
edabit.com/?ref=clintbriley1
Github Repo
github.com/fireclint/todo-app...
🔥 Connect with me on IG 🔥
/ fireclint
☕ Support the channel ☕
www.buymeacoffee.com/clintbriley
💻 My Coding Equipment
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj - วิทยาศาสตร์และเทคโนโลยี
![บุษบา - วงชานเมือง [LiveCoverVertion] Original : เมนทอล](http://i.ytimg.com/vi/Dm81sKcd9rs/mqdefault.jpg)
![[TH] G2 vs PRX | EDG vs FUT - VALORANT Champions 2024 DAY 4](http://i.ytimg.com/vi/Bkr_qM7dIaM/mqdefault.jpg)
I love how you organize tailwind properties in an object. It makes the code so much cleaner!
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 !
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.
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.
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!
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
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!
It’s certainly a little more difficult than the “React” apps which are primarily HTML/CSS apps.
Totally worth it spending time on your videos! Always learning something new! Great job!!
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.
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!
Thank you dude!
This is great! Simple and precise!! I appreciate you !!
Great tutorial, was super easy to follow and you covered a lot of ground. Thanks!
Thank you Richard!
BRO this helped me out immensely. Not alot of people working Firebase config for the new v9. Very helpful!
Awesome Micah. I’m glad it helped!
Love your content.
Thanks for sharing your knowledge !!!
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.
Thanks man! Another firebase video tomorrow morning.
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.
So awesome dude!! Keep building stuff!
Great video man and perfect timing I was looking to get started learning Firebase!!!!
Firebase is awesome dude!
hey dude! i like your style very much) thanx for teaching
Thanks man, you rock!. I love the content.
Whoaaa... this tutorial was super awesome loved it . Keep em coming !!!
Thanks vikk!
Thanks man, it helped me a lot.
seriously great tutorial. helped me out a lot
Thank you so much for this awesome video. Subscribed 👍 :)
This is awesome! Don't stop my man
Thank you Andrew!
Thanks a lot, man, Your tutorials are really helpful. I learned a lot, Now I am going to build my own project
Thank you my friend!
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.
Thank you!
Great video ))) thank you a lot for posting this out ;)))
thank you very much It was so helpful
This was a great tutorial. Thank you!
Thank you Alex!
Thanks a lot sir :) for your beautiful project :)
Man graet job. You is the Best. Help me a lot with your tutorials.
Thank you Claudia!
Great video.
really helped me [learning developer] a LOT thanks
you are actually the best. definitely subscribing.
Thank you!
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.
Great Tutorial !!
great tutorial!
Thanks again learning so much great build
Thank you man!
keep uploading brother love the content
Thank you dude! I’m enjoying uploading content as often as I can! 😃
Really great content. Thanks 👍
Thank you!
great one
Needed this video! Thanks again!!
Thank you again sir!
@@codecommerce Welcome !
Great content mate
Thank you Christian! 💪
Really awesome
Thank you Nabin!
thank u so much!!!!
Cool, very informative video
Thank you
Great tutorial
Thanks!
@@codecommerce do you have or could recommend a tutorial for adding bottom tab navigation?
Great, I will try to add edit todo
Thanks sir what an amazing video it was ♥️♥️♥️
Thank you my friend!
Thank you bro :)
No problem dude!!
Can I ask why when storing your todos from firebase to your local state, you used 'push' rather than setState(doc.data()) ? Curious! Thanks
Excenelent thanks a lot!
Thank you my friend!
Thanks bro for everything
Thanks again Joseph! 💪
@@codecommerce I’m so happy to meet your channel It made stuff easy and now I’m rebuilding my portfolio again and I will be glad to get you to critic it again.
Thanks 😊
thank you
you are the king
Haha thanks dude!
Thank You soo much for this..
Anytime sir!
Great tutorial.
Liked+Subscribed = Done😎
thank you
Thanks, friend, waiting for another tutorial, preferred Firebase with lots of filtering for the items
Thank you my friend!
Amazing!!!!
Thank you Deena!
Melhor que isso, só dois disso! Parabéns
I think that you miss an Edit function in your to-do list. But it is also a great tutorial for beginner.
Thanks
This is great. I kinda got lost in the firebase code in Read function
I wish I could put five likes because this video helped me at least five times for last four months.
Thank you Oxana!
yay I finished it.
You got it dude!! 🙏
@@codecommerce when i got stuck , i found the solution it was hard but i didn't want to look at the GitHub code. At the end it was worth it. my suggestion is can you share the shortcuts in visual studio and also how do you go about learning a new framework.
Hey clint! super awesome video and I'm definitely learning a lot through you. Just wondering... what was the exercise site you used before leetcode?
Thanks! edabit was where I started out. It starts off very basic - great for beginners.
thanks
I have a doubt , the height is set to h-screen(100vh) , what if there are many todo list items they will surely overflow right.How to solve this probem?
Background gradient colour are not working on my device like I'm using vite set up what's the issue????
Perfect time for me
Thanks for watching rashedul
you should make a e commerce with firebase in honor of your youtube nickname.... good job! I love your videos!
Juan! Haha that’s a good idea man! I do freelancing on e-commerce platforms which is where the name came from. I had a different vision for the channel initially but I’ve enjoyed working on different things lately.
i am dead when he said ofc we didnt do anything right BAhahaa i love moment like this in code tutorial
happens... lol
Could you possibly make an app that is a firebase & react stack with firebase storage for the images and firebase db for the posts, essentially like a blog remake? Editing a post through a modal and such?
]Could you make a short video explaining how to properly pass props with updateDoc() firebase function? I see we are crossing out the todo but can you do it to pop up a modal to edit the data via input textfield? im having trouble with this, Thank you!
can you please tell how to add firebase auth so user can access there own todos not others
That's awesome tutorial. Is it possible to add the edit text function in this app?🤔
Is helpful learning firebase such as front end developer junior?
best best best
Thanks for a great tutorial. Is there anyone on this channel that can guide me to why my app flashes up then disappears on the browser.
Great video! Can you share how you beautified / formatted your code in visual studio @ 0:55:56 ?
you need to download extension called prettier and there will be shortcut
Amazing tutorial!! What was the other platform you used before leetcode?
Edabit was the very first! I have a link in the bio. It’s the most beginner friendly. Leetcode made me feel dumb when I first started. Haha
First 🔥🔥🔥🔥🥇🥇🥇
Winner!! 🥇 🏆
Awesome tutorial! Thank you!
Can you pls give advice, or where can I found, how to add date to each of todos, when it suppose to be accomplish, and add how to add btn with possibilities to add any file to each todos. Kindly regards!
Thank you! You could do a timestamp or a user set time :)
But how can I make this app userspecified. I mean if I add sign in and signup method then any user can get all the todos. So how can I make the todos available for logged in users only.
By the way, awesome video. You did it very simply.
This was a great tutorial! Also, I'm wondering why when a todo is added, it's not always added to the top of the todo list? Sometimes, it's added randomly in the middle of the list like at 57:39?
Hi Martin. I believe it’s added in alphabetical order but I may be mistaken. You could add an additional field using the server timestamp and then use the Firebase orderBy method to sort by timestamp
Can't find the working way of sorting the data at snapshot, so in my case I just sort the data after foreach in snapshot
Hey Clint, do you have a tutorial on firebase hosting and deploying I did try to deploy this app it deployed a blank page though
Hello man how are you i can help you if you want to deploy first project
🔥🔥🔥🔥🔥🔥
Thank you dude! 🔥
thanks for this content . Could you do a tutorial with django and React ?? Please
Oh man I’m afraid I’m not familiar with Django. I haven’t started learning python yet.
Congratulations for the channel is one of the best. I followed the tutorial but using vitejs. But, I can't make environment variables work using vitejs
Let me check - Haven't used much vite, I was actually reading some of their docs the other day!
Hello Sir..can u please tell me which font u r uning in ur vscode ?? (user and workspace)
I am using the Material Ui for my vs code theme. They have a bunch of cool themes.
@@codecommerce yeah I know about the theme but what is your vs code font in setting
I have the styles set up the exact way you did but the line-through and the bg-slate-400 wont show up and i have no idea why. Super irritating but i love the vid!
Hmm what are you applying the bg-slate to?
I have the bg-slat applied to li and liComplete. The li has 200 and the complete has 400. My line-through is applied to the textComplete. Here is the style code block that i have.
const style = {
li: `flex justify-between bg-slate-200 p-4 my-2 capitalize`,
liComplete: `flex justify-between bg-slate-400 p-4 my-2 capitalize`,
row: `flex`,
text: `ml-2 cursor-pointer`,
textComplete: `ml-2 cursor-pointer line-through`,
button: `flex cursor-pointer items-center`
}
Im also new to Tailwind so i might just have to learn the basics of it first and try to apply it that way.
Hello, is it safe to deploy this application with our firebase keys in the frontend? Would we need to create a local server or would editing our permissions within firebase be enough to prevent unwanted manipulation of our DB? Thanks for the videos, I have created several projects based on your youtube videos - keep them coming!
No - it would be wise to store your keys in a DOT ENV file.
@@codecommerce Can you make a video on deployment and how to store keys in DOT ENV file?
Hiii.
I like much yours vídeos tutorials.
But i would like to see you teach reactjs using react structure components and typescript.
Its best practicies that makes the difference to get a job.
Yes I have typescript coming soon!
Can you make videos on Instagram Facebook clone like we better understanding how big applications work and there structure
Basit- I was just thinking about that. It would be nice to use redux and show how larger applications are built out. It’s just time consuming! 😂
at 44:07 my line-through text decoration didnt work at all. anyone has the same problem?
What is your code?
@@codecommerce already solved it. forgot to add jsx in tailwind config.
@@joelhkbn thank you so much! I was having same problem.
Awesome as always!
Can you do the same App with mongodb, please?
Oh absolutely! Mongo DB coming soon!
How does it work with Firebase with Redux?
Redux coming soon
Sir plz create video on redux toolkit also include asyncthunk , middleware, and queries...
This is a great tutorial, thanks man.
i actuall have an issue, when i deployed this on netlify an todo added is chaneged across all platforms, when i try accesing it from another phone,i can still see the todo list from my phone, is there a way to make make different users have a new sheet when they access it
Hi Toni, yes you can store user specific data. I have a couple projects like that. You could create a new “collection” with the users email and then store documents to that same user. Right now we aren’t storing any users in the database, only getting authenticated.
@@codecommerce ok, thanks... I will do just that.
@@codecommerce thanks for your videos, you have really helped me alot 💫💫
@@oluwatobiomotosho4754 did you solved your problem can you guide me ?