Todo App

Construye una aplicación de tareas completa con state management, persistencia y testing.

Stack Tecnológico

• React 19 - UI library con hooks modernos
• Vite 5 - Build tool ultra rápido
• Zustand - State management ligero y simple
• Vitest - Testing framework nativo de Vite
• Testing Library - Component testing user-centric
• Tailwind CSS - Estilos utility-first
• TypeScript - Type safety

Características

• ✅ CRUD completo de tareas (crear, leer, actualizar, eliminar)
• 🏷️ Categorías (trabajo, personal, compras)
• 🔍 Filtrado por estado y categoría
• 💾 Persistencia en localStorage
• 🧪 Tests completos con Vitest
• 📱 Fully responsive
• 🎨 UI moderna con Tailwind CSS

Tutorial Completo

El tutorial paso a paso está disponible en el repositorio de ejemplos:

📁 Ver Tutorial Completo en GitHub

Contenido del Tutorial

Paso	Título	Duración
1	Setup del Proyecto	20 min
2	Estructura de Componentes	25 min
3	State Management	30 min
4	Añadir Tareas	25 min
5	Eliminar Tareas	20 min
6	Editar Tareas	30 min
7	Filtros	25 min
8	Persistencia	20 min
9	Estilos	25 min
10	Tests	40 min
11	Deployment	20 min

Prerrequisitos

• Node.js >= 18 instalado
• Conocimientos de React (hooks, components)
• Familiaridad con TypeScript
• Cuenta de GitHub (para deployment)

Inicio Rápido

# Clonar el código base
git clone https://github.com/claudekit/aprende-claudekit.git
cd aprende-claudekit/examples/todoapp

# O seguir el tutorial paso a paso desde el README
cat README.md

Lo Que Aprenderás

• Uso del comando /cook de ClaudeKit para implementación completa
• State management con Zustand
• Testing con Vitest y Testing Library
• localStorage para persistencia
• Componentes TypeScript tipados
• Responsive design avanzado

Resultado Final

Al final del tutorial tendrás:

• ✅ Una aplicación de tareas production-ready
• ✅ Tests con buena cobertura
• ✅ State management escalable
• ✅ Código limpio y mantenible
• ✅ Deployed en Vercel

Siguiente: Blog con Next.js

---

¿Preguntas? Abre un issue en GitHub