Modular SDK (v9+) tree-shaking in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import only the Firestore function needed to get a document.

Firebase

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

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

AinitializeApp

Bcollection

CgetDocs

Ddoc

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the entire Firestore module instead of specific functions.

Using 'collection' when you need a document reference.

The doc function is needed to specify the document reference for getDoc. Importing only what you need helps keep the bundle small.

2fill in blank

medium

Complete the code to initialize Firebase app with the modular SDK.

Firebase

import { initializeApp } from 'firebase/app';

const firebaseConfig = { /* config values */ };
const app = [1](firebaseConfig);

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

AinitializeApp

BgetApp

CcreateApp

DstartApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using getApp before initializing the app.

Trying to use non-existent functions like createApp or startApp.

initializeApp is the correct function to start a Firebase app instance with the given configuration.

3fill in blank

hard

Fix the error in importing Firestore functions for reading a document.

Firebase

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

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

AinitializeApp

Bcollection

CgetDocs

DgetDoc

Attempts:

3 left

💡 Hint

Common Mistakes

Importing getDoc twice.

Importing initializeApp from Firestore instead of 'firebase/app'.

The collection function is often needed to create references to collections, which is useful when navigating Firestore structure. Importing getDoc twice is redundant and causes errors.

4fill in blank

hard

Fill both blanks to create a Firestore document reference and read it.

Firebase

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

const db = getFirestore(app);
const docRef = [1](db, 'users', 'user123');
const docSnap = await [2](docRef);

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

Adoc

BgetDoc

Ccollection

DinitializeApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using collection instead of doc for document references.

Mixing up getDoc and getDocs.

doc creates a reference to a specific document. getDoc reads the document data. Using these two functions together is the modular way to read a Firestore document.

5fill in blank

hard

Fill all three blanks to import, initialize, and get a Firestore document using modular SDK.

Firebase

import { [1] } from 'firebase/app';
import { getFirestore, [2], [3] } from 'firebase/firestore';

const app = [1](firebaseConfig);
const db = getFirestore(app);
const docRef = [2](db, 'products', 'prod001');
const docSnap = await [3](docRef);

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

AinitializeApp

Bdoc

CgetDoc

Dcollection

Attempts:

3 left

💡 Hint

Common Mistakes

Importing and calling initializeApp incorrectly.

Using collection instead of doc for document references.

Confusing getDoc with getDocs.

First, initializeApp starts the Firebase app. Then doc creates a document reference. Finally, getDoc reads the document data. This sequence uses modular imports to keep the code efficient.