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.