Todo app with Nextjs and firebase

How to Create Todo App with Next.js & Firebase

Hey devs, welcome to this tutorial; we will build a real-time Todo App with React, Next.js + Firebase.

This is the video explanation of this article 👇

The full code of this project is available in this repository👇

TodoApp-Nextjs-Firebase

Before we start writing code, I want to tell you that I expect you to have basic knowledge of React and Next.js.

If you are not familiar with React and Next, go through these documentations:

1. React Documentation
2. Next.js Documentation

Here’s what we are going to build

After completing this tutorial, our app will look like this:

Here’s our tech stack for this project

1. React:
   We will React for building the UI of this app.
2. Next.js:
   Next.js is a React-based framework for building modern web apps. It provides benefits like Server Side Rendering and many SEO benefits
3. Firebase:
   We will use Firebase as a backend of this app. We will store data in Firestore. It provides many functions for creating real-time apps.
   (Our todo app will be real-time)
4. ChakraUI:
   ChakraUI is a styling framework. It has styled components ready to be used in-app. It provides responsiveness, dark mode, an eye-appealing color scheme, and so on.

Why are we using Firebase in our project?