
Build a full stack to-do app with Next.js and Firebase, featuring user authentication and authorization, Google authentication for login, CRUD operations, Firestore rules, and Tailwind CSS.
Download Visual Studio Code and Postman, accept the agreement, and install Visual Studio Code on Windows or Mac to test your API.
Set up a Next.js todo app with Tailwind CSS, create the project, and run the dev server on localhost 3000. Build a register page with name, email, and password fields.
Build a signup UI for a Next.js todo app, featuring a two-column layout with a sign-up form, Google sign-in, and a login page link.
Build a login page in a Next.js app by creating login.js, wiring routes, and mirroring the register form with email and password fields, plus sign-up and google icon.
Build the home UI for a to-do app by creating a main structure with a logout button, an add new to-do input, and a list rendered from an array.
Style the home component to create a to-do list UI with TailwindCSS, including a logout button, task input, and a checkbox list; prepare Firebase integration in the next video.
Create and set up a firebase project for your to-do app, install firebase with npm, initialize the app in firebase_api.js, and enable email/password and google authentication for the web app.
Implement a Firebase authentication-based user registration in a Next.js app, wiring a form (name, email, password) to create users with email/password and update their display name.
Initialize the Firebase app with credentials, then set up authentication and sign up with email and password or sign in with Google via a provider and popup.
Create login flow by wiring email and password state, updating on input changes, and submitting with Firebase sign in with email and password, including error handling and preventing page refresh.
Learn to share the authenticated user's data across your app using the Context API with Firebase authentication, including auth state changes, auth providers, and a useAuth hook.
What are we building in this Course..
In this course, we are going to build a fullstack todo application using nextjs and for backend we are using firebase. We also perform CRUD operation on todos and store todo in firestore database. for user authentication and authorization we are using google account and email and password provider from firebase. We also learn how to write firebase rule in firestore database to secure our application from third party. for styling we use tailwind CSS. At the end of the course we are going to develop secure and dynamic web application using Nextjs and Firebase. For this course you need a basic understanding of react.
Just follow along with me. I will holding your hand through the course. At the end of the course you have a solid understanding of Nextjs framework and you can use this as foundation to build any project.
This course contain 13 section contain 15 videos which 3.50 hours long. you can watch at your own space and at any point you get lost you can absolutely send a message. I will happy to answer all your queries.
Who is this course for ?
This nextjs course is ideal for college student or beginner level front-end developer looking to build their portfolio and gain confidence.
If you have tried learning NextJS but have not yet gained the confidence to build real-world applications, this course is perfect for you. In this course we perform CRUD opearation and authentication our user with firebase and store our todos and user information in firestore database.
Certificate:
Upon successfully completing this course, you will receive a certificate that acknowledges your perseverance and hard work throughout the course.
Join me on this exciting journey to learn NextJS and firebase by building Todo app.