Firebase 101: How to Build and Launch Your First App (Web, iOS & Android)

Learn how to create your first Firebase project from scratch and connect web, iOS, and Android apps — even if you've never used Firebase before. This step-by-step tutorial will help you understand the Firebase platform, add core features like Authentication and Firestore, and prepare your app for real-world usage.

Introduction

Firebase is a suite of backend services from Google that makes building modern apps faster and simpler. With Firebase, you get features like real-time databases, user authentication, analytics, and serverless functions — all without managing servers.

Whether you're building a prototype or launching a production app, this guide helps you go from zero to a working Firebase-powered application on Web, iOS, and Android.

Table of Contents

1. What Is Firebase?
2. What You Need Before You Start
3. Create Your First Firebase Project
4. Add Firebase to a Web App
5. Add Firebase to an iOS App (Swift)
6. Add Firebase to an Android App
7. Add Authentication
8. Add Firestore Database
9. Real-Time Updates with Firestore
10. Monitor Usage with Firebase Analytics
11. Managing Your Firebase Project After Launch
12. Where to Go Next
13. FAQs

What Is Firebase?

Firebase is Google's app development platform that provides tools for:

• Authentication (email/password, Google sign-in)
• Firestore (scalable NoSQL database with real-time sync)
• Cloud Functions (serverless backend logic)
• Analytics (user behavior insights)
• Cloud Messaging (push notifications)

Learn more from the official documentation: https://firebase.google.com/docs

What You Need Before You Start

Before we begin, make sure you have:

For All Platforms

• A Google Account
• Access to the Firebase Console
• A browser (Chrome/Edge/Safari)

For Web

• Node.js + npm (optional, if you use a bundler)
• A basic HTML/JS project folder

For iOS

• A Mac with Xcode installed
• Familiarity with creating a basic Xcode project

For Android

• Android Studio installed and updated
• A new or existing Android project

If setting up dev tools is unfamiliar, follow the Firebase setup guides:

• Web setup: https://firebase.google.com/docs/web/setup
• iOS setup: https://firebase.google.com/docs/ios/setup
• Android setup: https://firebase.google.com/docs/android/setup

Create Your First Firebase Project

1. Visit the Firebase Console: https://console.firebase.google.com/
2. Click Add project.
3. Enter a project name (e.g., MyFirstFirebaseApp).
4. Optionally enable Google Analytics for insights.
5. Click Create project and wait for provisioning.
6. You'll land on the Project Overview page — your Firebase home base.

Once created, we'll connect platform-specific apps.

Add Firebase to a Web App

Step 1: Register Your Web App

1. In the Firebase Console → Overview → click the </> Web icon.
2. Enter a nickname (e.g., web-client).
3. Click Register app.
4. Firebase displays your web configuration snippet.

Step 2: Install Firebase

If using npm:

npm install firebase

In your script:

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

Now you can use Firebase services anywhere in your project.

Official guide: https://firebase.google.com/docs/web/setup

Add Firebase to an iOS App (Swift)

Step 1: Create Your Xcode Project

1. Open Xcode → File > New > Project
2. Choose App, fill out product name and bundle ID.
3. Make sure your Apple team is set.

Step 2: Register Your iOS App

1. In Firebase Console → click the iOS icon.
2. Enter your Bundle ID exactly.
3. Download GoogleService-Info.plist.
4. Drag it into your Xcode project.

Step 3: Add Firebase SDK via Swift Package Manager

1. Xcode → File > Add Packages
2. Paste: https://github.com/firebase/firebase-ios-sdk.git
3. Choose needed packages: FirebaseAuth, FirebaseFirestore, FirebaseAnalytics

Step 4: Initialize Firebase

In AppDelegate.swift:

import FirebaseCore

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    FirebaseApp.configure()
    return true
  }
}

iOS Firebase docs: https://firebase.google.com/docs/ios/setup

Add Firebase to an Android App

Step 1: Prepare Your Android Project

1. Open Android Studio.
2. Create a new project or open an existing one.

Step 2: Register Your Android App

1. In Firebase Console → Android icon.
2. Enter your Android package name.
3. Download google-services.json.
4. Place it in your app/module folder.

Step 3: Add Firebase Gradle Plugin

In app/build.gradle:

plugins {
  id "com.android.application"
  id "com.google.gms.google-services"
}

dependencies {
  implementation platform("com.google.firebase:firebase-bom:latest")
  implementation "com.google.firebase:firebase-auth"
  implementation "com.google.firebase:firebase-firestore"
}

Sync and you're ready.

Android Firebase docs: https://firebase.google.com/docs/android/setup

Add Authentication (Web, iOS, Android)

Authentication has more depth than one section can carry — email/password, Google, Apple, phone and anonymous sign-in each behave differently. Every sign-in method, explained walks through the trade-offs of each.

Enable email/password sign-in in the Firebase Console → Authentication → Sign-in method.

Web Example

import { auth } from "./firebase";
import { createUserWithEmailAndPassword } from "firebase/auth";

export async function signUp(email, password) {
  await createUserWithEmailAndPassword(auth, email, password);
}

iOS (Swift)

import FirebaseAuth

Auth.auth().signIn(withEmail: email, password: password)

Android (Kotlin)

auth.signInWithEmailAndPassword(email, password)

Authentication is now wired across platforms.

Firebase Auth Docs: https://firebase.google.com/docs/auth

Add Firestore Database

Firebase ships two databases, and picking the wrong one is expensive to undo later. Firestore vs the Realtime Database compares them on queries, pricing and offline behaviour.

In Firebase Console → Firestore Database → Create database.

Web Example

import { db } from "./firebase";
import { doc, setDoc } from "firebase/firestore";

await setDoc(doc(db, "users", userId), { name, createdAt: Date() });

iOS (Swift)

let db = Firestore.firestore()
db.collection("users").document(userId).setData(["name": name])

Android (Kotlin)

db.collection("users").document(userId).set(user)

Firestore is now your persistent database.

Firestore Guide: https://firebase.google.com/docs/firestore

Real-Time Updates with Firestore

Firebase's signature feature is real-time data syncing.

Web Real-Time Listener

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

onSnapshot(collection(db, "messages"), (snapshot) => {
  // handle updates
});

iOS Snapshot Listener

db.collection("messages").addSnapshotListener { snapshot, _ in
  // real-time updates
}

This makes your data live without refreshes.

Monitor Usage with Firebase Analytics

Firebase Analytics gives insights into user behavior, funnels, and events.

Initialize analytics per platform and log events like: login, signup, purchase, screen_view.

Then use the Firebase Console to analyze retention, audiences, and engagement.

Analytics docs: https://firebase.google.com/docs/analytics

Managing Your Firebase Project After Launch

Launching your app is only the start. Once live, you'll need to:

• Monitor Firestore documents
• Debug Cloud Functions errors
• Review Authentication users
• Check Analytics trends
• Respond to critical issues

The default Firebase Console is primarily desktop-oriented, making on-the-go admin hard.

That's where a mobile Firebase admin app becomes indispensable — browse and edit Firestore, inspect logs, or view analytics directly from your device.

Internal link: Firebase Console Mobile App

Where to Go Next

Two services most first apps reach for next: Cloud Messaging for push notifications, and Crashlytics for catching the crashes your users hit before they email you about them.

You now have: a Firebase project; Web, iOS, Android configured; Authentication; Firestore database; real-time listeners; Analytics tracking.

From here you could explore:

• Cloud Functions for backend logic
• Cloud Storage for files
• Firebase Hosting for web deployment
• Push Notifications via Cloud Messaging

Explore detailed guides:

• Next.js + Firebase: A Complete Guide to Firestore, Analytics & Functions
• How to Supercharge Your Flutter App with Firebase

External Resources

• Firebase Official Docs: https://firebase.google.com/docs
• Firebase Getting Started: https://firebase.google.com/docs/web/setup
• Firestore Guide: https://firebase.google.com/docs/firestore