Why Firebase exists - See It in Action

Why Firebase Exists

📖 Scenario: Imagine you want to build a simple app that lets users save and share notes instantly. You need a way to store data, manage users, and update the app in real-time without setting up complicated servers.

🎯 Goal: Build a basic Firebase setup that shows why Firebase exists: to simplify app development by providing easy-to-use cloud services like real-time database and user authentication.

📋 What You'll Learn

Create a Firebase project configuration object

Add a variable to hold Firebase app initialization settings

Initialize Firebase app using the configuration

Set up a simple Firestore database reference

💡 Why This Matters

🌍 Real World

Firebase is used by developers to quickly build apps without managing servers or complex backend code.

💼 Career

Understanding Firebase setup is essential for cloud developers, mobile app developers, and full-stack engineers working with modern app architectures.

1

Create Firebase configuration object

Create a constant called firebaseConfig with these exact properties and values: apiKey: 'AIzaSyA-ExampleKey12345', authDomain: 'example-app.firebaseapp.com', projectId: 'example-app', storageBucket: 'example-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'

Firebase

# Your code here

Need a hint?

This object holds all the keys and IDs Firebase needs to connect your app to its cloud services.

2

Add Firebase app initialization variable

Create a constant called app and set it by calling initializeApp(firebaseConfig) to initialize Firebase with the configuration object.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyA-ExampleKey12345',
  authDomain: 'example-app.firebaseapp.com',
  projectId: 'example-app',
  storageBucket: 'example-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

// Your code here

Need a hint?

This step connects your app code to Firebase services using the config you created.

3

Set up Firestore database reference

Create a constant called db and set it by calling getFirestore(app) to get a reference to the Firestore database from the initialized app.

Firebase

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'AIzaSyA-ExampleKey12345',
  authDomain: 'example-app.firebaseapp.com',
  projectId: 'example-app',
  storageBucket: 'example-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const app = initializeApp(firebaseConfig);

// Your code here

Need a hint?

This sets up the database so you can read and write data easily.

4

Add user authentication setup

Create a constant called auth and set it by calling getAuth(app) to set up Firebase Authentication for managing users.

Firebase

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

const firebaseConfig = {
  apiKey: 'AIzaSyA-ExampleKey12345',
  authDomain: 'example-app.firebaseapp.com',
  projectId: 'example-app',
  storageBucket: 'example-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

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

// Your code here

Need a hint?

This completes the basic Firebase setup by adding user login and management.