Published on

Firebase Guide: Build Your First Web App in 30 Minutes

Firebase is a platform by Google that allows you to build web applications without needing to manage your own servers or write complex backend code. By using Firebase, you can add features like user login, real-time databases, and file storage to your project in under 30 minutes. This approach lets you focus entirely on the user interface while Google handles the infrastructure and scaling.

What are the core services you will use?

Firebase is often called a Backend-as-a-Service (BaaS), which means it provides a pre-made backend so you don't have to build one from scratch. The most common service is Authentication, which handles user sign-ups and logins using email, Google, or social media accounts. You will also likely use Firestore, a NoSQL database (a flexible way to store data in documents rather than rigid tables) that updates your app instantly when data changes.

Another essential service is Firebase Storage, which is designed for saving large files like user profile pictures or videos. For those building modern web apps, Firebase Hosting provides a fast and secure way to put your website live on the internet. We've found that starting with just one service, like Authentication, is the best way to learn without feeling overwhelmed by the entire platform.

What do you need to get started?

Before you write any code, ensure your computer is ready for modern web development. You will need a code editor like Visual Studio Code and a basic understanding of HTML and JavaScript.

What You'll Need:

  • Node.js 24.x or higher: This is the environment that lets you run JavaScript tools on your computer. You can download it from the official Node.js website.
  • A Google Account: You need this to log into the Firebase Console.
  • A Package Manager: This comes with Node.js (usually npm) and helps you install the Firebase tools.

How do you create your first Firebase project?

Everything in Firebase starts in the browser-based console. This is your control center where you turn services on or off and monitor your app's data.

Step 1: Create the Project Go to the Firebase Console and click "Add project." Give your project a name and decide if you want Google Analytics (it's okay to disable this for your first learning project).

Step 2: Register your Web App Click the "Web" icon (it looks like </>) to register your specific application within the project. Give it a nickname, like "My First App," and click "Register app."

Step 3: Copy your Configuration Firebase will show you a block of code called firebaseConfig. This contains unique keys that tell your code which Firebase project to talk to. Keep this window open or copy the code to a safe place, as you will need it in the next section.

How do you install Firebase in your code?

Now that your project exists in the cloud, you need to connect your local code to it. In 2026, we use the latest Firebase SDK (Software Development Kit - a collection of tools that make coding easier) which is version 13.

Open your terminal (the text-based window for giving commands to your computer) in your project folder and run:

# This installs the latest Firebase library to your project
npm install firebase

What you should see: A "node_modules" folder will appear in your project, and your package.json file will now list Firebase as a dependency.

How do you initialize Firebase in a web app?

To use Firebase, you must initialize (set up and start) the connection in your JavaScript file. If you are using React 19 or Next.js 15, remember that Firebase is a client-side tool, so you should use the "use client" directive at the top of your file.

Create a file named firebase.js and add the following code:

// Import the functions you need from the SDKs
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
// Replace these values with the ones from your Firebase Console
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app-id",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:12345:web:abc123"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firestore (the database) and export it for use in other files
export const db = getFirestore(app);

How do you save and read data?

Once the connection is established, you can start interacting with your database. Firestore organizes data into "collections" (like folders) and "documents" (like individual files).

Step 1: Adding a Document To save information, you use the addDoc function. This example saves a simple task to a "todo" list:

import { collection, addDoc } from "firebase/firestore"; 
import { db } from "./firebase"; // Import the database we set up earlier

async function saveTask() {
  try {
    // Add a new document with a generated ID to the "tasks" collection
    const docRef = await addDoc(collection(db, "tasks"), {
      title: "Learn Firebase",
      completed: false,
      timestamp: new Date()
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

Step 2: Reading Data To get the data back, you can use getDocs. This retrieves a "snapshot" (a point-in-time view) of your collection.

import { collection, getDocs } from "firebase/firestore";

async function getTasks() {
  const querySnapshot = await getDocs(collection(db, "tasks"));
  
  // Loop through each document in the collection
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => `, doc.data());
  });
}

What you should see: When you run saveTask, a new entry will appear in the "Firestore Database" tab of your Firebase Console. When you run getTasks, your browser console will display the ID and the data of every task you saved.

What are the common mistakes beginners make?

The most frequent error is leaving security rules wide open. When you first set up Firestore, it might ask if you want to start in "Test Mode." While this is helpful for the first few days, it allows anyone with your project ID to delete your data. Always transition to "Locked Mode" and write specific rules before you share your app with anyone.

Another common hurdle is forgetting that Firebase functions are "asynchronous" (they take time to finish). If you try to use data before the database has finished sending it, your app will crash. Always use await or .then() to ensure the data has actually arrived.

Finally, ensure you are using the "Modular SDK" syntax shown in the examples above. Older tutorials from before 2021 use a different style called "Namespaced SDK" which is much larger and slower. If you see code using firebase.firestore(), it is outdated; stick to the getFirestore(app) style for 2026 standards.

Next Steps

To continue your journey, try adding Google Authentication to your app so users can sign in with one click. This will teach you how Firebase manages user "sessions" (keeping a user logged in even if they refresh the page). Once you are comfortable with data and login, explore "Cloud Functions" to run small pieces of code automatically in the background.

For the most up-to-date technical details and advanced features, visit the official Firebase documentation.

Read the Firebase Documentation