Volver a Proyectos
En desarrollo
Lab
Next.jsReactTypeScriptTailwind CSSPrismaPostgreSQLZustandRadix UIVitest2026

WEB To-Do List

Gestor de tareas orientado a flujo diario: bandeja, Hoy, Próximo y completadas, con filtros, etiquetas, buscador y barra lateral. Los datos viven en Prisma + PostgreSQL; el estado de UI en Zustand; modales y controles sobre Radix. Tema claro/oscuro con tokens de Tailwind 4. Hay modo demo sin credenciales y tests con Vitest + Testing Library sobre componentes y vistas.

Ver DemoVer Código

Capturas del Proyecto

WEB To-Do List — vista previa

1 / 8

Qué aprendí

  • Montar migraciones, seed y scripts de Prisma dentro de un App Router real
  • Dejar el estado de listas y filtros en Zustand y no arrastrar un store global pesado
  • Modales accesibles (foco, Escape, overlay) con primitivas Radix
  • Cubrir rutas y componentes con Vitest + Testing Library en jsdom
  • Unificar tokens de color para que claro/oscuro no se sienta como dos apps distintas

Detalles Técnicos

  • •Next.js 16 (App Router), React 19, TypeScript
  • •Prisma 7, @prisma/adapter-pg y controlador pg hacia PostgreSQL
  • •Zustand para estado del cliente
  • •Radix UI (paquete umbrella radix-ui) y sonner para notificaciones
  • •Tailwind CSS 4, cva (class-variance-authority), tailwind-merge y clsx
  • •Vitest 4, @vitest/coverage-v8, Testing Library, jsdom
  • •Scripts: db:push, db:migrate, db:seed (Prisma)