Build a React Todo App with Firebase (Auth + Firestore) — Full Guide

Build a Todo App with React + Firebase (Auth & Firestore)

By YourName · Updated: 2026-03-01

Quick project: React UI + Firebase Authentication + Firestore realtime DB. Perfect for a portfolio demo.

1) Create Firebase project

  • Go to Firebase console → New project → enable Authentication (Email) and Firestore.
  • Copy Firebase config to your React app.

2) Minimal firebase init (src/firebase.js)

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

const firebaseConfig = {
  apiKey: "REPLACE",
  authDomain: "PROJECT.firebaseapp.com",
  projectId: "PROJECT_ID"
};

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

3) Add todos (example)

import { collection, addDoc, onSnapshot, query, orderBy } from 'firebase/firestore';

const todosCol = collection(db, 'todos');
const q = query(todosCol, orderBy('createdAt', 'desc'));

// add
await addDoc(todosCol, { text: 'Buy milk', userId: uid, createdAt: Date.now() });

// realtime listener
onSnapshot(q, snapshot => {
  const items = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
  setTodos(items);
});

4) Secure rules (Firestore)

// minimal rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /todos/{docId} {
      allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
    }
  }
}

Comments

Post a Comment

Popular posts from this blog

How to Center a Div - The 3 Modern Ways (2026)

Centering a <div> used to be a meme in the CSS world because it was surprisingly hard. But in 2024, we have three clean, modern solutions. Here's how to do it properly. Method 1: Flexbox (Most Popular) CSS .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* Full viewport height */ } When to use: Modern layouts, when you need to center both horizontally AND vertically. Method 2: CSS Grid CSS .container { display: grid; place-items: center; height: 100vh; } When to use: When working with grid-based layouts already. Method 3: The Classic Margin Auto CSS .centered-div { width: 300px; margin: 0 auto; } When to use: Simple horizontal centering only (still works perfectly!). 💡 Pro Tip: For simple horizontal centering, use margin: 0 auto . For modern full centering, use Flexbox. For grid layouts, use CSS Grid's place-items: center . ...
Read more

5 JavaScript Console Methods You're Not Using (But Should Be)

5 JavaScript Console Methods You're Not Using (But Should Be) JavaScript, Debugging, Developer Tools, Productivity https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80 Everyone uses console.log() , but JavaScript's console object has powerful debugging methods that can save you hours. Here are 5 underused console methods that will make you a better debugger. 1. console.table() - View Arrays & Objects Beautifully Instead of expanding objects in the console, display them as a table. JavaScript const users = [ { name: 'Alice', age: 25, city: 'NYC' }, { name: 'Bob', age: 30, city: 'London' }, { name: 'Charlie', age: 35, city: 'Tokyo' } ]; console.table(users); // Displays a beautiful sortable table Use case: When working with arrays of objects (API responses, user data). 2. console.group() - Organize Your Logs...
Read more

Call by Value vs Call by Reference in C Programming (With Simple Examples)

Call by Value vs Call by Reference in C Programming (With Simple Examples) One of the most confusing topics for beginners in C programming is the difference between call by value and call by reference . This concept is extremely important because it affects how functions work and how data is modified inside a program. In this article, we will clearly explain call by value vs call by reference in C using simple language and easy examples. What Is a Function Call? When a function is called, values are passed from the calling function to the called function. The way these values are passed decides whether the original data can be modified or not. What Is Call by Value? In call by value, a copy of the variable’s value is passed to the function. Changes made inside the function do not affect the original variable. Example of Call by Value void change(int x) { x = 20; } int main() { int a = 10; change(a); printf("%d", a); } The output will...
Read more