Aplicación Web CRUD con Next.js

¿Qué vas a construir?

Una aplicación completa de gestión de tareas: crear, leer, actualizar y eliminar tareas. Con autenticación de usuarios, categorías, fechas límite y filtros. Backend con Next.js API Routes y MySQL.

Lo que aprenderás

• •Diseñar un esquema de base de datos con ayuda de Claude

• •Crear API Routes REST con Next.js

• •Implementar autenticación con cookies y tokens seguros

• •Construir formularios con validación cliente y servidor

• •Manejar estados de carga, error y vacío en la UI

Pasos principales

Paso 1 — Schema de la base de datos

Describe tu aplicación a Claude y pídele el schema SQL completo. Revisa las relaciones y ajusta según tus necesidades.

Paso 2 — API Routes CRUD

GET    /api/tasks         → listar tareas del usuario
POST   /api/tasks         → crear tarea
PUT    /api/tasks/[id]    → actualizar tarea
DELETE /api/tasks/[id]    → eliminar tarea

Paso 3 — Autenticación simple

Session token en cookie httpOnly. Sin librerías pesadas: solo crypto.randomBytes de Node.js.

Paso 4 — UI con Server Components

Listado de tareas como Server Component (lectura directa de DB). Formularios como Client Components. Optimistic UI para cambios instantáneos.

Paso 5 — Filtros y búsqueda

URL search params para filtrar por categoría, estado y fecha. El estado vive en la URL, no en React state.

Resultado esperado

App de tareas con 3+ usuarios concurrentes, datos persistentes y experiencia fluida sin recargas de página.