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.

What Is Firebase?
What You Need Before You Start
Create Your First Firebase Project
Add Firebase to a Web App
Add Firebase to an iOS App (Swift)
Add Firebase to an Android App
Add Authentication
Add Firestore Database
Real-Time Updates with Firestore
Monitor Usage with Firebase Analytics
Managing Your Firebase Project After Launch
Where to Go Next
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 here:
👉 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

This section walks you through creating your Firebase backend.

Visit the Firebase Console: https://console.firebase.google.com/
Click Add project.
Enter a project name (e.g., MyFirstFirebaseApp).
Optionally enable Google Analytics for insights.
Click Create project and wait for provisioning.
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

In the Firebase Console → Overview → click the </> Web icon.
Enter a nickname (e.g., web-client).
Click Register app.
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

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

Step 2: Register Your iOS App

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

Step 3: Add Firebase SDK via Swift Package Manager

Xcode → File > Add Packages
Paste: https://github.com/firebase/firebase-ios-sdk.git
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

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

Step 2: Register Your Android App

In Firebase Console → Android icon.
Enter your Android package name.
Download google-services.json.
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)

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

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.

👉 Learn more about the Firebase Console Mobile App you’ve wanted all along (internal link)

Where to Go Next

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

Frequently Asked Questions

Is Firebase free?
Yes — the Spark plan is free with limits. Production apps often upgrade to the Blaze plan.

Do I need backend experience?
No. Firebase abstracts server infrastructure.

Can I use Firebase for large apps?
Yes — Firestore and Cloud Functions scale automatically.

How do I manage Firebase on mobile?
Use the Firebase Console Mobile App or native admin tools you can build yourself.

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

Introduction

Table of Contents

What Is Firebase?

What You Need Before You Start

For All Platforms

For Web

For iOS

For Android

Create Your First Firebase Project

Add Firebase to a Web App

Step 1: Register Your Web App

Step 2: Install Firebase

Add Firebase to an iOS App (Swift)

Step 1: Create Your Xcode Project

Step 2: Register Your iOS App

Step 3: Add Firebase SDK via Swift Package Manager

Step 4: Initialize Firebase

Add Firebase to an Android App

Step 1: Prepare Your Android Project

Step 2: Register Your Android App

Step 3: Add Firebase Gradle Plugin

Add Authentication (Web, iOS, Android)

Web Example

iOS (Swift)

Android (Kotlin)

Add Firestore Database

Web Example

iOS (Swift)

Android (Kotlin)

Real-Time Updates with Firestore

Web Real-Time Listener

iOS Snapshot Listener

Monitor Usage with Firebase Analytics

Managing Your Firebase Project After Launch

Where to Go Next

Frequently Asked Questions

External Resources

Related Posts