Build a Todo App

In this guide, you'll build a simple todo app that demonstrates core platform features.

What You'll Build

A todo app with:

• Create, read, update, and delete todos
• Real-time sync across devices
• User authentication

Prerequisites

Step 1: Project Setup

npx create-demo-app todo-app
cd todo-app

npm install

npm run dev

Step 2: Create the Todo List

import { db } from '@demo/database';
import { useState, useEffect } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    // Subscribe to todos
    return db.collection('todos').subscribe(setTodos);
  }, []);

  const addTodo = async (text) => {
    await db.collection('todos').create({
      text,
      completed: false,
      createdAt: new Date()
    });
  };

  return (
    <div>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </div>
  );
}

Step 3: Add Toggle and Delete

const toggleTodo = async (id, completed) => {
  await db.collection('todos').update(id, { completed: !completed });
};

const deleteTodo = async (id) => {
  await db.collection('todos').delete(id);
};

Next Steps