Building a Firebase Notes App

Mini Project — Building a Firebase Notes App

In this project, we'll build a simple app flow that lets each logged-in user save their own notes. It's not the full UI code — just the core Firebase logic pulled together in one place.

Features included in this project

User signup/login/logout
Adding a new note
Showing your own notes as a realtime list
Updating/deleting notes

Core Firebase Logic

javascript

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  where,
  orderBy,
  onSnapshot,
  serverTimestamp
} from 'firebase/firestore';

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

async function addNote(title, content) {
  const user = auth.currentUser;
  if (!user) throw new Error('Please login first');

  await addDoc(collection(db, 'notes'), {
    ownerId: user.uid,
    title,
    content,
    createdAt: serverTimestamp(),
    updatedAt: serverTimestamp()
  });
}

function watchMyNotes(renderNotes) {
  const user = auth.currentUser;
  if (!user) return () => {};

  const q = query(
    collection(db, 'notes'),
    where('ownerId', '==', user.uid),
    orderBy('createdAt', 'desc')
  );

  return onSnapshot(q, (snapshot) => {
    const notes = snapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data()
    }));

    renderNotes(notes);
  });
}

onAuthStateChanged(auth, (user) => {
  if (user) {
    const stopWatching = watchMyNotes((notes) => {
      console.log('My notes:', notes);
    });
  } else {
    console.log('Show login form');
  }
});

What does this project flow teach you?

It shows you how to connect Auth state with Firestore data in a Firebase app. Storing the logged-in user's UID as ownerId and querying so you only read back your own data is one of the most fundamental patterns in real-world projects.

Ideas to expand on

Add note search/filtering
Add a pinned notes feature
Add image attachment upload
Add offline state and loading skeletons
Lock down Security Rules to owner-based access