Build A Todo App Using Next.js, Firebase, Chakra UI + React Hooks | Crash Course
In this video we create a todo app using Next.js, Firebase, Chakra UI, and React hooks (useState and useEffect). This is a full stack app. We code the following functions:
write to cloud firestore
read data using snapshot + useEffect
delete a todo
sign in with different accounts and protect data
In addition to the above, using Chakra UI we are able to easily create a beautiful UI. We use next-firebase-auth as a starting point.
Read this on https://www.coffeeclass.io/tutorials/...
GitHub code link: https://github.com/bjcarlson42/overly...
next-firebase-auth: https://github.com/gladly-team/next-f...
0:00 Introduction
0:31 Starter Files
1:14 Creating .env.local and setting up Firebase Project
4:02 Adding Chakra UI
4:32 Creating todo.js
5:38 Adding the UI
6:24 useState Hook
6:59 sendData() Firebase Write
8:46 Fetching data in realtime using useEffect
9:55 Display todo's to user
10:14 Chakra UI DarkModeSwitch
10:50 Adding Delete functionality
11:40 Finalizing Auth
12:11 Demo + Conclusion
coffeeclass.io
☕ Want to learn to code for free? Check out https://www.coffeeclass.io?utm_source... for programming tutorials and snippets. Sharpen your skills with coffeeclass.io Learn! Read the article version of my YouTube videos!
My Coding Gear:
⌨️ Keyboard - Apple Magic Keyboard - https://amzn.to/3g8A8QI
💻 Laptop - Apple MacBook Pro (2018 / 15 inch) - https://amzn.to/3wddJHL
🖥️ Monitor - Samsung CF390 Series - https://amzn.to/3pDc9fO
My Camera Gear:
📹 Camera - Canon EOS M50 - https://amzn.to/3ixAZfq
🔭 Awesome Camera Lens - Sigma (16mm / f1.4) - https://amzn.to/3pH1K2B
🎤 Microphone - Blue Yeti - https://amzn.to/2TdXLyq
💡 Lights - Neewer LED Lights - https://amzn.to/3gbm6ht
My Favorite Software:
📽️ Final Cut Pro - https://www.apple.com/final-cut-pro/
❗ Student Discount For FCP - https://www.apple.com/us-hed/shop/pro...
🚀 VSCode - https://code.visualstudio.com/
View All My Gear - https://benjamincarlson.io/gear
Support Me:
👨🏼💼 Join this channel to get access to perks - / @benjamincarlson
💸 Sponsor me on GitHub - https://github.com/sponsors/bjcarlson42
Who Am I?
I’m Benjamin Carlson, a developer, student, and YouTube creator living in CT, USA. I make videos on programming, computer science, and productivity. I also started a programming tutorial website called Coffeeclass (https://coffeeclass.io) that complements this YouTube channel. Finally, I have a newsletter (https://buttondown.email/benjamincarlson) where I send out updates on my recent videos, writing, and anything I’m currently working on or find interesting. You can expect emails every 2 to 3 weeks.
Connect With Me:
📧 Email - [email protected]
🚅 Website - https://benjamincarlson.io
🐦 Twitter - / bjmncrlsn
🚀 Github: https://github.com/bjcarlson42
💼 LinkedIn - / bjcarlson42
✍️ Medium - / benjamincarlson
📓 Newsletter - https://buttondown.email/benjamincarlson
If you need to contact me, the best way is email. I try to respond to everyone but it may take some time!
Disclaimer: Some of the above links are affiliate links. This means I may receive a small commission at no expense to you. This allows me to continue to post videos like this one!
#nextjs #chakraui #firebase #react
Auf dieser Seite können Sie das Online-Video Build A Todo App Using Next.js, Firebase, Chakra UI + React Hooks | Crash Course mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Benjamin Carlson 25 September 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 6,700 Mal angesehen und es wurde von 114 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
