Todo App with React and Firebase

Todo App by D.k.Patel

I’ll be building a todo app with one of the most popular web application frameworks, React, and real-time database firebase in this story. Todo app touches on all the important parts of building any data-driven app, including the Create, Read, Update and Delete (CRUD) operations. We stored Todo in the firebase console. Click here to download the full code and Check for the Live Demo. I am not covering the CSS file. Please download the CSS file here.

Before We Start

To install the base project, run the following command in your terminal:

npx create-react-app todo 

Open package.json file in the todo folder and install the following Dependencies: ex. npm firebase => this command install firebase on your package.json. Similarly, you can install other dependencies.

otherwise, you copy package.json from here and simply run npm install.

package.json

Started with Firebase:-

Go to console.google.com and create a new project. We make a new real-time database check out this video. Create an app in firebase and copy the CDN file .create a new file in the Todo folder which name is firebase.js and paste the CDN file firebase file, we add the data. example of firebase.js

What Component we build: -

1. Create Todo: Create a component to submit the form and button that can store todo in the firebase.
2. Display Todo:- In this component, we display the Todo with a key from the firebase console.
3. Delete and Update Todo:- We update the phase when a todo is complete and delete the Todo with the remove method from firebase storage.

Create Todo:

The input items are submitted when the form is submitted. To handle this operation, add the onSubmit to form tag in the TodoList. When you click on the + button, add a todo to the Todo list.

Code explanation:

createTodo is for saving the data in the Todo ref database. we save the title and complete (true or false) into firebase. todoRef is for reference for our database. todoRef.push() method has pushed the title and complete value in the Todo database.

Display Todo:

We display the Todo with a key and use a snapshot with id to display the TodoList.

Code explanation:

todolist.map() is used, when the data is fetched from the Todo real-time database. we fetched Todo with an index of each todo. with the push() method we display the data on the webpage.

Delete and Update Todo:

We delete the Todo from click X and for update the complete state click on the ✓ in the TodoList.

Code Explanation:

deleteTodo()=> This function is used for delete the Todo with the todoref.remove() method.

completeTodo()=> This function is used for update complete phase with the todoRef.update() method, which change the true false value.

Click here for the Code. Click here for the Live Demo.

Thank You for reading this blog and if you like this blog or if it becomes helpful to you in any manner feel free to give a clap and share it with others.