Chapter 14 — Firebase: No Backend Needed

What a backend actually does

Every app that persists data — saves a user's preferences, stores their posts, remembers their cart — needs a backend: a server that runs code and a database that stores data. Traditionally, this meant a backend developer who knows Node.js, Python, or Go, plus a database (PostgreSQL, MySQL, MongoDB), plus deployment infrastructure.

Firebase removes all of that. It's a set of backend services provided by Google. You connect to them directly from your frontend code. No server to maintain, no database to configure, no backend developer needed for most product use cases.

Firestore — a real-time NoSQL database. Store and sync data in milliseconds across all connected users.
Firebase Auth — handle user sign-up, sign-in, and sessions. Supports Google, Apple, GitHub, email/password, and more.
Firebase Storage — store and serve user-uploaded files: images, documents, videos.
Firebase Hosting — deploy your site to a CDN globally. Free tier included.

Setting up Firebase

1

Go to console.firebase.google.com and sign in with your Google account.
2

Click "Create a project". Name it something like "my-ideas-board". Disable Google Analytics (not needed).
3

In the project dashboard, click the web icon (</>) to add a web app. Register it with a nickname. You'll get a config object — this is your connection credentials.
4

Enable Firestore Database (Build menu → Firestore Database → Create database → Start in test mode).
5

Enable Authentication (Build menu → Authentication → Get started → Sign-in method → Google → Enable).

Connecting Firebase to your app

// Install via npm: npm install firebase
// Or use CDN in HTML (shown here for simplicity)

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

// Paste your config from the Firebase console
const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "my-app.firebaseapp.com",
  projectId: "my-app",
  storageBucket: "my-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abc123"
};

// Initialize
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

Firestore — reading and writing data

import { collection, addDoc, getDocs, onSnapshot, serverTimestamp } from 'firebase/firestore';

// WRITE: Add a document to a collection
async function addIdea(text) {
  await addDoc(collection(db, 'ideas'), {
    text: text,
    author: auth.currentUser.displayName,
    createdAt: serverTimestamp()
  });
}

// READ ONCE: Get all documents from a collection
async function getIdeas() {
  const snapshot = await getDocs(collection(db, 'ideas'));
  snapshot.forEach(doc => {
    console.log(doc.id, doc.data());
  });
}

// REAL-TIME: Listen for changes (updates instantly when data changes)
const unsubscribe = onSnapshot(collection(db, 'ideas'), (snapshot) => {
  snapshot.docChanges().forEach(change => {
    if (change.type === 'added') {
      renderIdea(change.doc.id, change.doc.data());
    }
  });
});

Firebase Auth — "Sign in with Google" in 10 lines

import { GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from 'firebase/auth';

const provider = new GoogleAuthProvider();

// Sign in
async function signIn() {
  await signInWithPopup(auth, provider);
}

// Sign out
async function signOutUser() {
  await signOut(auth);
}

// Listen for auth state changes (user logged in or out)
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in
    console.log('Welcome,', user.displayName);
    console.log('Photo:', user.photoURL);
    showApp();
  } else {
    // User is signed out
    showSignInScreen();
  }
});

You need: VS Code Firebase account (free) Claude (for code generation)

1

Create a Firebase project and enable Firestore (test mode) and Google Auth following the setup steps above.
2

Ask Claude: "Build a single-HTML-file ideas board using Firebase. Users click 'Sign in with Google' to authenticate. Authenticated users see a text input + 'Post idea' button. All posted ideas appear in real-time (using onSnapshot) visible to all signed-in users. Show the author name and timestamp with each idea. Style it dark with yellow accents. Include all Firebase imports from CDN. I'll replace the firebaseConfig object with my own."
3

Replace the placeholder firebaseConfig in Claude's output with your actual config from the Firebase console. Open the file in a browser — you should be able to sign in and post ideas.
4

Open the same URL in a second browser window. Post an idea in one — watch it appear instantly in the other. That's real-time data. No backend developer wrote a single line of server code.

Key takeaways

Firebase gives you auth, database, file storage, and hosting — all managed by Google, no server setup required
Firestore is a document-based NoSQL database. Data is organized as collections of documents
onSnapshot subscribes to real-time updates — your UI automatically reflects changes the moment they happen
Firebase Auth handles the hard parts of identity (sessions, tokens, security) in a few lines of code
The free "Spark" plan is generous enough for most side projects and MVPs