✅ Todo App - Complete CRUD Example

Complete CRUD todo list application with filters

📚 What You'll Learn

✓Build a complete CRUD application (Create, Read, Update, Delete)
✓Implement filtering with computed signals (all/active/completed)
✓Calculate statistics automatically as data changes
✓Manage complex list state with reactive signals

🎮 Try It: Your Todo List

Add todos, mark them complete, filter them - watch stats update automatically!

Total

Active

Done

No todos yet. Add one above!

import { useSignal, createComputed, useSignalValue } from 'signalforge/react';
import { useState } from 'react';

const [todos, setTodos] = useSignal<Todo[]>([]);
const [filter, setFilter] = useSignal<'all' | 'active' | 'completed'>('all');

// Computed filtered list
const [filteredTodos] = useState(() => createComputed(() => {
  switch (filter) {
    case 'active': return todos.filter(t => !t.completed);
    case 'completed': return todos.filter(t => t.completed);
    default: return todos;
  }
}));

// Add todo
const addTodo = (text: string) => {
  setTodos([...todos, { id: Date.now(), text, completed: false }]);
};

💡 Best Practices

✅

Use unique IDs

Date.now() or UUID for reliable item tracking.

🎯

Computed filters

Filter lists with computed signals for efficiency.

📊

Auto-compute stats

Let SignalForge calculate totals and counts.

🎓 Next Steps

Master todo apps? Try these:

Persistent Todos →Todo with Undo/Redo →Shopping Cart →