Real Time To-Do List Using Google Firebase

Hey There!

We all use To-Do lists on day to day basis, be it online or offline. While offline lists are prone to getting lost, and virtual lists can be misplaced, accidentally deleted, or even forgotten. So we decided to make one on Google Firebase, a realtime database. Why? Because:

1. It's cool

2. It's real time, so changes are made instantaneously.

3. Easy to use and centralized; all the data is on the cloud and accessible through any platform.

4. A wonderful API that is very supportive.

5. Updates are easy to do.

We will be focusing on adding data manually to Firebase in this project!

Visit the Google Firebase Website and click the 'Sign In' button on the top left corner and log in through your Google account.

After logging in, click on 'Go To Console' to access your firebase database console. Don't worry, it is not anything advanced.

On your new screen, click the huge Plus icon (Add Project) to create a new project. Each project can have only one database, so you will need to repeat this project multiple times in case you want multiple realtime databases.

Now, Type your project name and select the country of use. Click on Create Project to get working!

After the loading, click on continue. This will take you to a new screen.

Welcome to your Google Firebase Console!

On the left hand menu, click on 'Database'. This leads you to a new screen where you can choose between Cloud Firestore or Realtime Database. We will be using Realtime Database for this project. Click on Get Started!

Firebase offers powerful authentication features so that there is no unauthorized access to your database. However, to keep it simple, we will be using a 'public' database, which can be modified by anyone who has access to your database 'credentials'. More on credentials later.

Select the 'Test Mode' for this project and click on Enable.

This is how your screen would look like. Except the name of the project.

We will be creating Task Lists, called as 'Buckets'. Each bucket is a nested list of data. While you are free to choose whatever forms of nesting you would like, for this project, each bucket will represent a task.

To add the first bucket, click on the '+' icon in front of null as shown.

2 Attributes show up. Name and Value.

The 'Name' tag is used to refer to the name of your task. For instance, you would want to create a list of instructables you want to see later. So we use the Name as Instructables, because, why not.

Note that the fields are short in length, so visibility of longer names can be an issue. However, be assured the name is exactly what you typed.

While we could put up any value for the Value tag, we would like to instead add a list of items below the heading. So to create this nest, we click on the 'Plus' icon in front of Value tag.

You can see another 'level' of the list has appeared.

We will now assign an attribute called 'When' to denote the day you want to do this. Type 'When' in the name tag, and 'Sunday', for instance, in the Value tag.

Now you would want to add the types of instructables you would want to see. We shall be grouping these under the Name 'What'.

Click the plus icon in front of your 'Bucket' or 'Task' or 'List' name. To the new field, type 'What' in the name and click on the plus icon to make a list under this heading. Click the plus icon in front of what to add another field.

You can see another level has appeared. Type your tasks in the 'Name' tag and a description in the 'Value' tag. Feel free to experiment here with more nesting.

Click add to finalise this. Or click Cancel in case you have second thoughts about adding the data.

You will see the list glow green and then it materializes firmly as the data you set. You will notice that Firebase automatically sorts the 'Names' of the lists and the sub lists alphabetically.

If a task looks incomplete, click on it and scroll to the right to see it fully.

Repeat this to make your list!

A quick recap:

New buckets by inserting on the the leftmost list having project project-ish name.

New attributes by inserting on task.

New sublists by inserting on tasks inside a list!

You can view this list anytime and anywhere! It is perfectly synchronized. Enjoy!