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

Need a 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

Need a 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

Need a 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

Need a hint?

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