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

Application development

First step is to Setup the google firebase in 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!

About the author

Bushan Sirgur

Well, I am Bushan Sirgur from Banglore, India. Currently, I am working as a Software Developer in a Service Base Company. I am interested in JAVA/J2EE, Angular 2, JavaScript, jQuery, MongoDB.

View all posts

Leave a Reply

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