First Firebase integration - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase in your app.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = [1](firebaseConfig);

Drag options to blanks, or click blank then click option'

AlaunchApp

BstartApp

CinitializeApp

DcreateApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name that does not exist in Firebase SDK.

Forgetting to pass the configuration object.

The initializeApp function sets up Firebase with your configuration.

2fill in blank

medium

Complete the code to import Firestore from Firebase.

Firebase

import { [1] } from 'firebase/firestore';

Drag options to blanks, or click blank then click option'

AgetFirestore

Bfirestore

CinitializeFirestore

DcreateFirestore

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'firestore' which is not a function.

Using 'initializeFirestore' which is less common for basic usage.

getFirestore is the correct function to import Firestore service.

3fill in blank

hard

Fix the error in the code to get Firestore instance.

Firebase

const db = getFirestore([1]);

Drag options to blanks, or click blank then click option'

AfirebaseConfig

BfirebaseApp

Cconfig

Dapp

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the config object instead of the app instance.

Passing an undefined variable.

The getFirestore function requires the Firebase app instance, which is stored in app.

4fill in blank

hard

Fill both blanks to add a document to Firestore.

Firebase

import { collection, [1] } from 'firebase/firestore';

const docRef = await [2](collection(db, 'users'), { name: 'Alice', age: 30 });

Drag options to blanks, or click blank then click option'

AaddDoc

BsetDoc

CaddDocument

DcreateDoc

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'setDoc' which requires a document reference, not a collection.

Using non-existent functions like 'addDocument' or 'createDoc'.

addDoc is the correct function to add a new document to a collection.

5fill in blank

hard

Fill all three blanks to query Firestore documents with a condition.

Firebase

import { collection, query, where, getDocs } from 'firebase/firestore';

const q = [1](collection(db, 'users'), [2]('age', [3], 25));
const querySnapshot = await getDocs(q);

Drag options to blanks, or click blank then click option'

Aquery

Bwhere

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong operators like '<' when the condition is 'greater than'.

Mixing up the order of functions.

Use query to create a query, where to add a condition, and '>' to filter ages greater than 25.