Creating collections and documents in Firebase - Visual Walkthrough

Process Flow - Creating collections and documents

Start

↓

Connect to Firestore

↓

Select/Create Collection

↓

Create Document with Data

↓

Save Document

↓

Confirm Success or Handle Error

↓

End

This flow shows how to connect to Firestore, create or select a collection, add a document with data, save it, and confirm the operation.

Execution Sample

Firebase

const docRef = firestore.collection('users').doc('user1');
await docRef.set({name: 'Alice', age: 30});

This code creates a 'users' collection if it doesn't exist, then adds a document 'user1' with name and age fields.

Process Table

Step	Action	Collection State	Document State	Result
1	Connect to Firestore	No collections yet	No documents yet	Ready to create data
2	Select/Create 'users' collection	Collection 'users' created	No documents yet	Collection ready
3	Create document 'user1' reference	Collection 'users' exists	Document 'user1' reference created	Ready to set data
4	Set data {name: 'Alice', age: 30} to 'user1'	Collection 'users' exists	Document 'user1' data set	Data saved successfully
5	Confirm success	Collection 'users' exists	Document 'user1' with data exists	Operation complete

💡 Document 'user1' created in 'users' collection with specified data

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
firestore	undefined	Connected	Connected	Connected	Connected
collection 'users'	undefined	Created	Exists	Exists	Exists
document 'user1'	undefined	undefined	Reference created	Data set	Data saved

Key Moments - 3 Insights

Why do we create a collection before adding a document?

In Firestore, collections are containers for documents. When you add a document to a collection that doesn't exist, Firestore creates the collection automatically. Step 2 shows the collection creation before document creation.

What happens if we try to set data on a document reference that doesn't exist yet?

Firestore creates the document automatically when you set data on its reference. Step 4 shows setting data creates the document if missing.

How do we know the data was saved successfully?

Step 5 confirms the document exists with data, indicating the save operation succeeded.

Visual Quiz - 3 Questions

Look at the execution table, what is the state of the 'users' collection after Step 2?

A Collection 'users' created

B No collections yet

C Collection 'users' deleted

D Collection 'users' empty but not created

💡 Hint

Check the 'Collection State' column at Step 2 in the execution table

At which step does the document 'user1' get its data set?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Action' and 'Document State' columns in the execution table

If we skip creating the collection explicitly, what would happen when setting document data?

A Document data is lost

B Error because collection missing

C Firestore creates the collection automatically

D Nothing happens

💡 Hint

Refer to key moment about collection creation and Step 4 in execution table

Concept Snapshot

Firestore collections hold documents.
Create or select a collection before adding documents.
Documents store data as key-value pairs.
Setting data on a document creates it if missing.
Operations confirm success or handle errors.

Full Transcript

This visual execution shows how to create collections and documents in Firestore. First, connect to Firestore. Then select or create a collection named 'users'. Next, create a document reference 'user1' inside that collection. Then set data on the document with fields like name and age. Firestore automatically creates the collection and document if they don't exist. Finally, confirm the data was saved successfully. The execution table tracks each step's state changes. Key moments clarify common confusions about automatic collection creation and document data setting. The quiz tests understanding of these steps and states. This process helps beginners see how Firestore organizes data and how to add new records safely.

Practice

1. What is a collection in Firebase Firestore?

easy

A. A function to add data.

B. A single document storing data.

C. A group that holds multiple documents.

D. A method to delete documents.

Solution

1. Step 1: Understand Firestore structure

   Firestore organizes data in collections and documents.

2. Step 2: Define collection role

   A collection groups multiple documents together.

3. Final Answer:

   A group that holds multiple documents. -> Option C

4. Quick Check:

   Collection = group of documents [OK]

Hint: Collections hold documents, not single data items. [OK]

Common Mistakes:

• Confusing collection with a single document
• Thinking collection is a method
• Mixing collection with data fields

2. Which Firebase Firestore method creates a document with an auto-generated ID?

easy

A. set()

B. add()

C. update()

D. get()

Solution

1. Step 1: Recall document creation methods

   Firestore uses set() to create or overwrite documents with specific IDs.

2. Step 2: Identify method for auto-generated IDs

   The add() method creates a document with an auto-generated ID inside a collection.

3. Final Answer:

   add() -> Option B

4. Quick Check:

   Auto-ID document creation = add() [OK]

Hint: Use add() for auto-generated document IDs. [OK]

Common Mistakes:

• Using set() and expecting auto-ID
• Confusing update() with creation
• Using get() which only reads data

3. What will happen when this code runs?

db.collection('users').doc('user1').set({name: 'Anna', age: 25});

medium

A. Creates or overwrites 'user1' document with name and age.

B. Adds a new document with auto-generated ID.

C. Updates only the age field in 'user1' document.

D. Throws an error because set() needs add() instead.

Solution

1. Step 1: Analyze method usage

   set() on a doc reference creates or overwrites that document.

2. Step 2: Check document ID and data

   The doc ID is 'user1', so this document will be created or replaced with given data.

3. Final Answer:

   Creates or overwrites 'user1' document with name and age. -> Option A

4. Quick Check:

   set() on doc('user1') = overwrite/create [OK]

Hint: set() replaces document at given ID, add() creates new ID. [OK]

Common Mistakes:

• Thinking add() is needed for specific IDs
• Assuming update() is called by set()
• Confusing set() with partial update

4. Identify the error in this Firestore code:

db.collection('products').add({name: 'Book', price: 10}).doc('p1').set({price: 12});

medium

A. No error, code works fine.

B. set() cannot update price field.

C. Collection name 'products' is invalid.

D. add() returns a promise, chaining doc() is invalid.

Solution

1. Step 1: Understand add() return value

   add() returns a promise resolving to a document reference, not a direct reference.

2. Step 2: Check chaining doc() after add()

   Calling doc() on the promise or document reference from add() is invalid syntax.

3. Final Answer:

   add() returns a promise, chaining doc() is invalid. -> Option D

4. Quick Check:

   add() returns promise, cannot chain doc() directly [OK]

Hint: add() returns promise; await before doc() calls. [OK]

Common Mistakes:

• Chaining doc() immediately after add()
• Ignoring promise returned by add()
• Assuming set() cannot update fields

5. You want to create a collection 'orders' and add a document with a specific ID 'order123' containing {item: 'Pen', quantity: 3}. Which code snippet is correct?

hard

A. db.collection('orders').doc('order123').set({item: 'Pen', quantity: 3});

B. db.collection('orders').add({item: 'Pen', quantity: 3, id: 'order123'});

C. db.collection('orders').doc().set({item: 'Pen', quantity: 3, id: 'order123'});

D. db.collection('orders').set('order123', {item: 'Pen', quantity: 3});

Solution

1. Step 1: Identify method to create document with specific ID

   Use doc('order123') to specify the document ID explicitly.

2. Step 2: Use set() to create or overwrite document data

   set() writes the data to the specified document ID.

3. Final Answer:

   db.collection('orders').doc('order123').set({item: 'Pen', quantity: 3}); -> Option A

4. Quick Check:

   Specific ID document creation = doc(id).set() [OK]

Hint: Use doc('id').set() for specific document IDs. [OK]

Common Mistakes:

• Using add() with id field (does not set document ID)
• Calling doc() without ID for specific ID
• Using set() directly on collection