How to Build a Todo App with React and Firebase

Posted on by Panther

In this tutorial, we will build a todo application using React and Firebase. We will utilize Firebase’s Realtime Database to store and retrieve our todo items in real-time.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

  • Node.js and npm (Node Package Manager)
  • Firebase account

Setting Up Firebase

  1. Install the Firebase CLI by running the following command in your terminal:
npm install -g firebase-tools
  1. Log into your Firebase account in the terminal:
firebase login
  1. Create a new Firebase project by running the following command:
firebase init
  1. Select Firebase Realtime Database and Firebase Hosting when prompted. Follow the instructions to initialize your project.

  2. Once your project is initialized, open the Firebase console in your browser by running:

firebase open
  1. In the Firebase console, create a new Realtime Database by clicking on “Create Database” and following the prompts. Choose “Start in test mode” for now.

Setting Up the React Project

  1. Create a new directory for your project and navigate to it in your terminal:
mkdir todo-app
cd todo-app
  1. Initialize a new React project using Create React App:
npx create-react-app .
  1. Install the Firebase SDK by running the following command:
npm install firebase

Connecting React to Firebase

  1. In your project directory, open the src folder and create a new file called firebase.js.

  2. Open the firebase.js file and import the necessary Firebase modules:

import firebase from "firebase/app";
import "firebase/database";
  1. Initialize Firebase with your project’s configuration, which can be found in the Firebase console:
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

firebase.initializeApp(firebaseConfig);
  1. Export the Firebase database instance:
export default firebase.database();
  1. In your src directory, open the index.js file and add the following import statement at the top:
import "./firebase";

Creating the Todo App

  1. Open the src folder and create a new file called TodoForm.js. This component will be responsible for creating new todo items.

  2. Open the TodoForm.js file and add the following code:

import React, { useState } from "react";
import database from "./firebase";

function TodoForm() {
  const [text, setText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (text.trim() === "") {
      return;
    }

    database.ref("todos").push({
      text,
      completed: false,
    });

    setText("");
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
}

export default TodoForm;

  1. Open the src folder and create a new file called TodoList.js. This component will display the list of todo items.

  2. Open the TodoList.js file and add the following code:

import React, { useState, useEffect } from "react";
import database from "./firebase";

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    const todosRef = database.ref("todos");

    todosRef.on("value", (snapshot) => {
      const todosData = snapshot.val();
      const newArray = [];

      for (let key in todosData) {
        newArray.unshift({
          id: key,
          text: todosData[key].text,
          completed: todosData[key].completed,
        });
      }

      setTodos(newArray);
    });

    return () => {
      todosRef.off();
    };
  }, []);

  const handleDelete = (id) => {
    database.ref(`todos/${id}`).remove();
  };

  const handleComplete = (id) => {
    database.ref(`todos/${id}`).update({
      completed: true,
    });
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>
          <span>{todo.text}</span>
          {!todo.completed && (
            <>
              <button onClick={() => handleComplete(todo.id)}>Complete</button>
              <button onClick={() => handleDelete(todo.id)}>Delete</button>
            </>
          )}
        </li>
      ))}
    </ul>
  );
}

export default TodoList;
  1. Open the src folder and open the App.js file. Replace the existing code with the following:
import React from "react";
import TodoForm from "./TodoForm";
import TodoList from "./TodoList";

function App() {
  return (
    <div>
      <h1>Todo App</h1>
      <TodoForm />
      <TodoList />
    </div>
  );
}

export default App;
  1. Run the React development server by executing the following command in your terminal:
npm start

  1. Open your browser and visit `http://localhost:3000`. You should see the todo app UI.

  2. Start adding and deleting todos to test the functionality. You can also inspect the Firebase Realtime Database in the Firebase console to see the data being stored in real-time.

Deploying the Todo App

  1. In your project directory, build the production version of your app by running:
npm run build
  1. Initialize Firebase hosting by running:
firebase init hosting

  1. Choose the “build” directory when prompted. Follow the instructions to initialize your project for hosting.

  2. Deploy your app to Firebase hosting by running:

firebase deploy
  1. Once the deployment is complete, Firebase will provide you with a URL where you can access the deployed application.

Congratulations! You have successfully built a todo app with React and Firebase. You have also deployed your app to Firebase hosting for others to access. Feel free to add more features, such as editing todo items or user authentication, to make the app even more robust.

Related Post