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