Firebase Playground — Learn Firestore in Your Browser with a Full Simulator

Firebase Firestore is the most widely-used NoSQL document database for web and mobile apps. It powers real-time features in millions of applications — yet learning it traditionally requires creating a Firebase project, enabling Firestore in the console, configuring security rules, and wiring up SDK credentials before writing a single document. This playground removes every barrier so you can focus entirely on understanding how Firestore works.

All Firestore operations run entirely in your browser — no data is sent to Firebase servers. Open any lesson and the code is already there. Click Run and the simulator executes against an in-memory Firestore engine built in JavaScript. Every addDoc(), setDoc(), getDoc(), query(), and onSnapshot() call works exactly as it does in the real Firebase SDK — and the live document tree on the right shows the resulting Firestore state after every run.

How the document tree works: After clicking Run, the Firestore State panel on the right renders a collapsible tree of all collections, documents, and fields in the in-memory store. Collection nodes show in Firebase orange with a document count badge. Each document expands to show its fields with values colour-coded by type — strings in green, numbers in amber, booleans in purple, arrays as comma-separated lists. Subcollections appear nested under their parent document. This visual makes the Firestore data model immediately clear: collections contain documents, documents contain fields, and subcollections live inside documents.

The 23-lesson curriculum spans 11 chapters and takes you from your first document to production patterns. Getting Started introduces addDoc() — which auto-generates a unique document ID — and setDoc(), which writes to a path you specify. Understanding the difference between these two is the first fundamental Firestore concept.

Reading Data covers getDoc() for single document reads with the DocumentSnapshot pattern (always call .exists() before .data()) and getDocs() for fetching all documents in a collection as a QuerySnapshot with .docs, .size, .empty, and .forEach().

Updating & Deleting teaches updateDoc() for partial field updates without touching other fields — critical for safe multi-client writes — and deleteDoc() for document removal, including the important caveat that subcollections are not automatically deleted.

Querying introduces the functional query composition pattern: query(collectionRef, ...constraints) builds a query descriptor, then getDocs() executes it. The where(field, op, value) constraint supports all Firestore operators — ==, !=, <, <=, >, >=, in, not-in, and array-contains. orderBy(field, direction) sorts results, and limit(n) caps the number returned. Constraints combine in a single query() call.

Special Values covers the three atomic sentinel values that make Firestore safe for concurrent updates: serverTimestamp() writes the server's actual time instead of the client clock; increment(n) atomically adjusts a numeric field without a read-modify-write race; arrayUnion() and arrayRemove() add or remove array items without duplicates and without reading the full array first.

Advanced lessons cover onSnapshot() for real-time listeners — which fire immediately with the current state and then on every subsequent change — and subcollections using collection(docRef, "name") for one-to-many relationships like posts and their comments.

Then the curriculum moves into production territory. Pagination & Aggregation teaches cursor pagination with orderBy() + startAfter() + limit() (Firestore paginates with cursors, never offsets) and counting documents efficiently with getCountFromServer(). Transactions & Batches covers atomic writeBatch() (all-or-nothing writes for things like money transfers) and runTransaction() (safe read-then-write for counters and inventory, with automatic retries). Data Modeling teaches the NoSQL mindset — denormalizing hot fields to avoid extra reads since Firestore has no JOINs, and choosing between an array field and a subcollection for one-to-many data.

Authentication covers the full email/password flow with createUserWithEmailAndPassword(), signInWithEmailAndPassword(), signOut(), and reacting to onAuthStateChanged() to guard protected pages. Finally, Security Rules shows the real firestore.rules syntax for ownership checks and data validation, modeled in runnable JavaScript so you can test the access decisions — because client SDK calls are only as safe as the rules running on Google's servers.

Why Use Firebase?

Firebase is a backend-as-a-service that lets you ship a complete app without managing servers. Firestore gives you a real-time NoSQL database that syncs across every connected client automatically; Authentication handles sign-up, sign-in, and sessions out of the box; Security Rules enforce access control server-side; and the whole platform scales automatically with a generous free tier, plus hosting and cloud functions when you need them. That combination lets a solo developer or small team launch a production-grade app remarkably fast — which is why Firebase powers millions of web and mobile apps. This playground teaches both the everyday Firestore API and the professional concerns (transactions, pagination, auth, rules) that separate a prototype from a production app. It pairs naturally with the MongoDB Playground for comparing NoSQL models and the JavaScript Playground for the async/await fundamentals every Firebase call relies on.