ToDo App using JavaScript & Firebase

 

Hello friends today in this blog, we are going to learn how to create this Todo app using JavaScript & Firebase. In this blog, you are going to be learning the basics of creating of initializing your firebase app, and how to sore all todo on your Database.

Firstly in this app, we started with authentication, before the user can get access to the Todo app you must sign in either by Email, YourName & password or you use the Google sign-in method which is shown in the Thumbnail of this video.

In Todo you can see when I created my Todo list it was appended a new list is shown and stored on the database. now we will talk more about this after the video below.

ToDo App using JavaScript & Firebase(Video Tutorial);

in this app, we have first initialized our Firebase app, initialize our Authentication for GoogleAuth, then created a new Authentication using an email password.

We referenced our Database a stored all todo_list in our database, we got the input value and got a real-time update once a new list is created.

For this app we created a delete button, this button deletes all the tasks, the user has made, then we have the add button this adds a new task and appends it to a new li tag, and reference it to the database.

For this to be able to work you will have to install your firebase app and initialize it.

Step1: install your firebase app using npm

$ npm install firebase

once you have installed firebase then follow the next step

Step2: initialize your Firebase app

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

once you have done this the next step is to start adding the features to firebase to start doing that a link to their docs will be given below.

Now with this, I hope you have learned the basics of creating a TodoApp with a real-time database If you want more of Firebase and other advanced technology tutorials leave a comment.

ToDo App using JavaScript & Firebase(Source Code);