This project is designed to help you learn how to use Firebase with Next.js. The project already has a frontend with router paths to home, login, signup, and profile. You will need to connect authentication and create users, then give them the ability to add todos and show the todos of that user.
By the end of this project, you should have a solid understanding of how to use Firebase with Next.js and how to create a basic todo application with authentication.
To complete this project, follow these steps:
- Set up a Firebase account and create a new project.
- Set up Firebase Authentication with email and password authentication enabled.
- Connect the sign-up and login forms to Firebase Authentication.
- Set up Firestore for data storage.
- Connect the add todo form to Firestore.
- Connect the display-todos component to Firestore to show only the todos of the current user.
- The profile page should only show the users email for the time being. You can build up on this later on.
- There should be a logout button enables the user to logout, the Navbar is a great place to put that.
Here are some resources that may be helpful in completing this project:
- Firestore documentation: https://firebase.google.com/docs/firestore/quickstart#initialize
- Firebase Authentication documentation: https://firebase.google.com/docs/auth/web/start