How I created a Realtime app using Firebase Firestore & NextJS

Video Highlights:
- Setup Firebase Console: We'll walk you through setting up Firebase and creating a Firestore database.
- Implement Firestore Operations: Step-by-step instructions on how to add, list, and delete items in Firestore.
- Building the App Components: We'll create the necessary React components, such as AddItem and ListItems, to handle our to-do functionalities.
- Styling with Tailwind CSS: Enhance your app's appearance using simple styling techniques.
- Real-time Updates: Although this tutorial focuses on the basics, we'll discuss how you can extend it to include real-time updates and more advanced features.

If you find this video helpful, please like, subscribe, and leave a comment with any questions or suggestions for future tutorials. Let's get started!

Timestamps:
00:00 - Intro
01:22 - Firebase Setup
02:14 - Firestore Setup
03:17 - NextJS Firebase + Firestore Setup
05:58 - Create Component AddItem
12:57 - Create Component ListItems
17:35 - Create Component DeleteItem
21:18 - Final words

Resources:

Thanks for watching, and happy coding!

[MyDevPage]

Was this tutorial helpful? What tutorial would you like to see next?

[StefanoVidmar-emfl]

amazing video on Next + Firebase! Please if you can do a part 2 video showing how we can display the data in realtime so whenver we delete or add a new item we can use firebase Real-time to update the view without needing to refresh the page. Looking Forward to your response :)

[prasunakovuru]

Underrated as heck !! Completely understood crud with your single video, can you share me where to further my knowledge, go and understand crud by any other source you used.

[maximebaron]

On the Firebase console, I saw that you have a next-auth project. Are you using the classic Firebase authentication, as you would in React, or via a service worker or with cookies?

[MyDevPage]

Also, I realized the quality is only going up to 720p for some reason, I will fix this for future tutorials. Thank you.