Evangelista Grace

Create and deploy a to-do app to Firebase

There is a reason why to-do apps have consistently made it into the list of ‘must try’ projects especially for developers who are just starting out. A basic to-do app would cover CRUD (Create-Read-Update-Delete) functionalities and the full power of a simple to-do app is unleased with the use of a database. For this tutorial, we will be using Firebase for the database and hosting.

Demo: https://fir-project-7cf80.web.app/

Project setup


1. Go to [console.firebase.google.com]. Create a new project and name it 1. Cd to your desired folder and have Firebase Tools installed. Run npm i -g firebase-tools

2. Run firebase login and enter login credentials

3. Run firebase init

The front-end


The website will be built from files that are inside the project’s ‘public’ folder. Hence, the HTML, CSS and JavaScript files should all be placed inside the ‘public’ folder.

The Markup

The CSS

The JavaScript

Add task

Edit task

Delete task

Progress bar

The back-end: CRUD operations


Add task

Display tasks

Edit task

Delete task

comments powered by Disqus