First Firebase integration - Mini Project: Build & Apply

First Firebase integration

📖 Scenario: You are building a simple web app that needs to connect to Firebase to store and retrieve data securely.Firebase is a cloud service that helps apps save data and authenticate users easily.

🎯 Goal: Set up a basic Firebase integration in a web app by initializing Firebase with the correct configuration.This will prepare your app to use Firebase services like Firestore or Authentication.

📋 What You'll Learn

Create a Firebase configuration object with the exact keys and values provided.

Initialize Firebase using the configuration object.

Ensure the Firebase app is correctly set up for further use.

💡 Why This Matters

🌍 Real World

Firebase is widely used to add backend services like databases and authentication to web and mobile apps without managing servers.

💼 Career

Knowing how to integrate Firebase is useful for frontend developers, full-stack developers, and cloud engineers working on modern app development.

1

Create Firebase configuration object

Create a constant called firebaseConfig with this exact object:
{
apiKey: "AIzaSyD-EXAMPLE1234567890",
authDomain: "myapp.firebaseapp.com",
projectId: "myapp-project",
storageBucket: "myapp.appspot.com",
messagingSenderId: "1234567890",
appId: "1:1234567890:web:abcdef123456"
}

Firebase

# Your code here

Hint

Use const firebaseConfig = { ... } with the exact keys and values.

2

Import Firebase and prepare initialization

Add these import statements at the top:
import { initializeApp } from 'firebase/app';
This prepares your code to initialize Firebase.

Firebase

const firebaseConfig = {
  apiKey: "AIzaSyD-EXAMPLE1234567890",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp-project",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

// Your code here

Hint

Use import { initializeApp } from 'firebase/app'; exactly as shown.

3

Initialize Firebase app

Create a constant called app and set it to the result of calling initializeApp(firebaseConfig).

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "AIzaSyD-EXAMPLE1234567890",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp-project",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

// Your code here

Hint

Use const app = initializeApp(firebaseConfig); to initialize Firebase.

4

Export Firebase app for use

Add this line to export the Firebase app: export default app;

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "AIzaSyD-EXAMPLE1234567890",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp-project",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);

// Your code here

Hint

Use export default app; to make the Firebase app available to other files.

Practice

1. What is the first step to use Firebase services in your app?

easy

A. Initialize Firebase with your project configuration

B. Write data to the database

C. Create a user account

D. Deploy your app to the web

Solution

1. Step 1: Understand Firebase setup process

   Firebase services require initialization with your project details before use. Initializing Firebase with your config is the essential first step to enable services.

2. Final Answer:

   Initialize Firebase with your project configuration -> Option A

3. Quick Check:

   Firebase setup starts with initialization [OK]

Hint: Always start by initializing Firebase with your config [OK]

Common Mistakes:

• Trying to use services before initialization
• Skipping config setup
• Assuming Firebase works without project details

2. Which of the following is the correct way to initialize Firebase in JavaScript?

easy

A. firebase.configApp(config);

B. firebase.startApp(config);

C. firebase.initializeApp(config);

D. firebase.launchApp(config);

Solution

1. Step 1: Recall Firebase initialization syntax

   The official method to start Firebase is initializeApp with the config object. Only initializeApp is the correct Firebase method; others are invalid.

2. Final Answer:

   firebase.initializeApp(config); -> Option C

3. Quick Check:

   Use initializeApp to start Firebase [OK]

Hint: Remember: initializeApp starts Firebase, not startApp or others [OK]

Common Mistakes:

• Using incorrect method names
• Forgetting parentheses after method
• Passing wrong argument types

3. Given this code snippet:

const config = { apiKey: "abc123", authDomain: "myapp.firebaseapp.com" };
firebase.initializeApp(config);
console.log(firebase.apps.length);

What will be printed to the console?

medium

A. 0

B. Error

C. undefined

D. 1

Solution

1. Step 1: Understand firebase.apps array

   After initialization, firebase.apps contains all initialized app instances. Since initializeApp was called once, firebase.apps.length is 1.

2. Final Answer:

   1 -> Option D

3. Quick Check:

   One initialized app means length is 1 [OK]

Hint: firebase.apps.length shows how many apps are initialized [OK]

Common Mistakes:

• Assuming length is 0 before usage
• Expecting undefined instead of number
• Confusing apps array with config object

4. You wrote this code but get an error:

firebase.initializeApp();

What is the likely cause?

medium

A. Missing configuration object in initializeApp call

B. firebase library not imported

C. Calling initializeApp twice

D. Using wrong method name

Solution

1. Step 1: Check initializeApp requirements

   initializeApp requires a config object with project details. Calling initializeApp without config causes an error due to missing parameters.

2. Final Answer:

   Missing configuration object in initializeApp call -> Option A

3. Quick Check:

   initializeApp needs config object [OK]

Hint: Always pass config object to initializeApp [OK]

Common Mistakes:

• Forgetting to pass config
• Assuming default config is used
• Ignoring error messages about missing params

5. You want to integrate Firebase Authentication and Firestore in your app. Which is the correct sequence after importing Firebase?

hard

A. Initialize Firebase with config, then deploy app before using services

B. Initialize Firebase with config, then get Auth and Firestore instances

C. Get Auth and Firestore instances, then initialize Firebase

D. Deploy app first, then initialize Firebase and get services

Solution

1. Step 1: Initialization before service usage

   Firebase must be initialized with config before accessing any services like Auth or Firestore. After initialization, you can get instances of Auth and Firestore to use them in your app.

2. Final Answer:

   Initialize Firebase with config, then get Auth and Firestore instances -> Option B

3. Quick Check:

   Initialize first, then get services [OK]

Hint: Always initialize Firebase before accessing services [OK]

Common Mistakes:

• Trying to get services before initialization
• Deploying app before setup
• Confusing order of operations