Connect Google Firebase with Modern Javascript

In this tutorial, we will be building step by step Javascript Application that connects to Google Firebase and performs the basic CRUD Operations all from scratch.

In our previous tutorial, we created the Javascript Recepie Application that connects to the Browser’s Local Storage, and as soon as we clear the local storage in the browser all the data we will loose. But now in this tutorial, we will connect to google firebase and it is completely free.




Tools and technologies used


  • Javascript
  • jQuery
  • Google firebase
  • Visual studio code
  • HTML
  • CSS
  • Bootstrap 4

Application features


  • Create a new todo
  • Filter todo’s
  • Complete/Incomplete todo’s
  • Hide completed todos
  • Remove todo

What we will build?


Below are the screenshots that show UI of our Simple Todo Application that we will create in this tutorial.

Application is running on the live server https://b2tech-todo-app.netlify.com/


Application development


First step is to Setup the google firebase in https://firebase.google.com. You can watch the below video to setup the google firebase.




Next step is to create index.html file and paste the firebase SDK, firebase-firestore.js script and get the reference to the firestore database.

NOTE: Make sure to use your firebase SDK and do not use mine

Next step is to include the jQuery library and UUID library for generating the unique id for storing the todo items in google firebase.

Next step is to create index.js custom script file and paste the following code

Next step is to paste the following code inside the index.html file




Next step is to create style.css custom css file and paste the following code

Run the application


Open the index.html file in a browser to run the application.

This completes the Javascript Todo Application. If you have any queries regarding this tutorial you can reach out – [email protected]




Watch the complete video course


Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *