Your First Firebase App: To-Do List in a Snap

May 14, 2025

 

1. Introduction

Ever wanted to build your own web app but felt overwhelmed by all the backend stuff? Don't worry — you're not alone. Setting up servers, managing databases, and handling authentication can sound intimidating if you're just starting out. But what if I told you there's an easier way?

Enter Firebase — a powerful platform by Google that handles all the complicated backend things so you can focus on building cool stuff. Whether you're dreaming of creating a to-do list, a guest book, or a simple chat app, Firebase has your back.

In this guide, we’re going to walk through how to build a basic To-Do List web app using just plain HTML, a bit of JavaScript, and Firebase — specifically Firebase Hosting and Firestore, its cloud database.

No fancy frameworks. No complicated setup. Just a straightforward, step-by-step process that gets your first app up and running in no time.

Ready? Let’s build something awesome — fast!

2. Prerequisites

Before we dive in, let’s make sure you have everything you need. Don’t worry — the list is short and simple.

What You’ll Need:

  • A Google Account
    Firebase is a Google product, so you’ll need to sign in with your Google account. If you have Gmail, you’re good to go.

  • A Code Editor
    Any text editor will do, but we recommend Visual Studio Code because it's beginner-friendly and packed with helpful features.

  • Basic Knowledge of HTML & JavaScript (Optional)
    If you know a bit of HTML and JavaScript, great! If not, no stress — we’ll keep things simple and explain as we go.

  • An Internet Connection
    Since Firebase is a cloud platform, you’ll need to be online to set things up and deploy your app.

That’s it! No need to install heavy tools or learn complex languages. Just bring your curiosity and a little bit of time — you’ll have a working web app before you know it.

3. Step 1: Set Up Your Firebase Project

Let’s kick things off by setting up your Firebase project. This is where all the magic happens — your app will live here, and Firebase will handle the database, hosting, and more.

1. Go to the Firebase Console

Head over to console.firebase.google.com and click “Add project”.

You’ll be asked to:

  • Name your project – something like my-todo-app works great.

  • Disable Google Analytics for now (unless you want to explore it later).

  • Hit “Create Project”, and wait a few seconds.

2. Enable Firestore Database

Once your project is ready:

  • In the left sidebar, go to Build > Firestore Database

  • Click “Create database”

  • Choose Start in test mode (this is perfect for development)

  • Pick your closest region and click Next

Test mode lets you read/write without authentication — we’ll keep it simple for now, but remember to update security rules later if you make this public.

3. Set Up Firebase Hosting

Now, go to Build > Hosting in the sidebar.
Click “Get started”, and Firebase will walk you through the steps.

You’ll see that it wants you to use something called the Firebase CLI (Command Line Interface). Don’t worry — we’ll get to that in the next section.

For now, your Firebase project is ready, your database is live, and you’re one step closer to your own web app.

4. Step 2: Prepare Your Project Files

Now that your Firebase project is ready, it’s time to create the actual files that make up your web app. Don’t worry — this part is super simple.

1. Create a Project Folder

First, create a folder on your computer where all your files will live. You can name it something like firebase-todo.

2. Create These Three Files Inside the Folder:

  • index.html – This will be the main webpage

  • style.css – For making things look nice

  • script.js – For adding interactivity and talking to Firebase

Your folder structure should look like this:

firebase-todo/
│
├── index.html
├── style.css
└── script.js

3. Add Some Starter Code

Let’s keep it basic for now. Here’s a quick template you can paste into your index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>My To-Do List</h1>
  
  <input type="text" id="taskInput" placeholder="Add a new task" />
  <button id="addTaskBtn">Add</button>

  <ul id="taskList"></ul>

  <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js"></script>
  <script src="script.js"></script>
</body>
</html>

That’s it! You now have the basic structure of your app ready. In the next step, we’ll hook it up to Firebase and make it functional.

5. Step 3: Initialize Firebase in Your Project

Time to connect your web app to Firebase so it can actually do stuff — like saving tasks to the cloud!

1. Install Firebase CLI

Firebase CLI lets you deploy and manage your app from the command line. Here’s how to install it:

  • Make sure you have Node.js installed

  • Then, open your terminal (Command Prompt, Terminal, or PowerShell) and run:

npm install -g firebase-tools

Once it’s done, check if it worked:

firebase --version

If you see a version number, you’re good to go.

2. Login to Firebase

Still in your terminal, log in to your Google account:

firebase login

A browser window will pop up — just log in and authorize.

3. Initialize Firebase in Your Project Folder

Navigate to your project folder:

cd path/to/your/firebase-todo

Then run:

firebase init

When prompted:

  • Choose Hosting and Firestore (use arrow keys + spacebar to select)

  • Associate with your Firebase project (select the one you created earlier)

  • Set public as the folder to deploy (or whatever folder your index.html is in)

  • Choose No for single-page app (SPA) if unsure

  • Choose Yes to set up Firestore rules and indexes

Firebase will create some new files in your folder (firebase.json, .firebaserc, etc.) — just leave them there, they’re important!

4. Add Your Firebase Config to script.js

Now go to your Firebase Console:

  • Go to Project Settings > General

  • Scroll down to "Your apps"

  • Click "Add App" > Web

  • Give it a nickname (e.g., "todo-web"), then click Register App

  • Copy the config object that looks like this:

const firebaseConfig = {
  apiKey: "YOUR-API-KEY",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef"
};

Paste this into your script.js and initialize Firebase like this:

// script.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";

const firebaseConfig = {
  // your config here
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

And that’s it — your app is now connected to Firebase and ready to use the Firestore database!

6. Step 4: Build the To-Do List Functionality

Now comes the fun part — making the app do things! We’ll use JavaScript to let users add tasks, save them to Firestore, and display them in real time.

Let’s break it down step by step.

1. Add Event Listener for the “Add” Button

Open your script.js and add this code to detect when the user clicks the “Add” button:

const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");

addTaskBtn.addEventListener("click", async () => {
  const task = taskInput.value.trim();
  if (task !== "") {
    await addTaskToFirestore(task);
    taskInput.value = ""; // clear input
  }
});

2. Save the Task to Firestore

Now let’s define the addTaskToFirestore() function:

import {
  collection,
  addDoc,
  onSnapshot
} from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";

const tasksCol = collection(db, "tasks");

async function addTaskToFirestore(taskText) {
  try {
    await addDoc(tasksCol, {
      text: taskText,
      timestamp: Date.now()
    });
  } catch (error) {
    console.error("Error adding task:", error);
  }
}

This saves each new task to a tasks collection in Firestore.

3. Display Tasks in Real Time

Now let’s make sure every task gets displayed as soon as it’s added — no need to refresh the page:

onSnapshot(tasksCol, (snapshot) => {
  taskList.innerHTML = ""; // clear list
  snapshot.forEach((doc) => {
    const task = doc.data();
    const li = document.createElement("li");
    li.textContent = task.text;
    taskList.appendChild(li);
  });
});

This listens to the Firestore collection and updates your list in real time. Super cool, right?

7. Step 5: Deploy Your App with Firebase Hosting

You’ve built your app — now it’s time to show it off to the world! With Firebase Hosting, putting your app online is just a couple of commands away.

1. Make Sure You’re in Your Project Folder

Open your terminal and navigate to the folder where your index.html lives:

cd path/to/your/firebase-todo

2. Run the Deploy Command

Now run:

firebase deploy

You’ll see Firebase do its thing — uploading your files, setting up URLs, and publishing your app.

3. Visit Your Live App!

Once it’s done, Firebase will give you a link like this:

✔  Hosting URL: https://your-app-id.web.app

Click it, and boom — your to-do list is live on the internet! Share it with friends, tweet it, or just admire your work. You’ve officially built and deployed a real web app.

And that’s it! You’ve:

  • Set up Firebase

  • Built a web app from scratch

  • Connected it to a real-time database

  • Deployed it online

All without a backend server or complex setup.

Ready for the final section — a quick wrap-up and what you can explore next?

8. Wrapping Up and What’s Next

Congrats — you did it! You just built and deployed a real, working web app using nothing but HTML, JavaScript, and Firebase.

Let’s recap what you’ve accomplished:

  • Set up a Firebase project

  • Connected your app to Firestore

  • Built a functional to-do list that saves tasks in real time

  • Deployed your app with Firebase Hosting — for free!

Not bad, right?

What’s Next?

This was just the beginning. Here are a few ideas to take your app to the next level:

  • Add delete functionality – Let users remove tasks

  • Add user authentication – So everyone has their own task list

  • Improve the UI – Use a CSS framework like Tailwind or Bootstrap

  • Create a guest book version – Let people leave messages instead of tasks

  • Learn about Firebase security rules – Especially if you go public!

And if you’re feeling ambitious, why not connect your app to other Firebase features like Storage, Cloud Functions, or even push notifications?

Final Thoughts

The beauty of Firebase is how easy it makes backend stuff for front-end developers — no need to spin up servers or manage databases. It’s perfect for prototypes, side projects, and even production apps.

So keep building, keep experimenting, and most importantly — have fun with it.

See you in your next app!

Post a Comment