Back to Projects
In development
Lab
Next.jsReactTypeScriptTailwind CSSPrismaPostgreSQLZustandRadix UIVitest2026

WEB To-Do List

A daily-flow task app: inbox, Today, Next, and completed, with filters, tags, search, and a sidebar. Data lives in Prisma + PostgreSQL; UI state in Zustand; modals and controls on Radix. Light/dark themes use Tailwind 4 tokens. Includes a no-credentials demo mode and Vitest + Testing Library coverage for components and views.

View DemoView Code

Project Screenshots

WEB To-Do List — vista previa

1 / 8

What I learned

  • Wire Prisma migrations, seed, and scripts inside a real App Router app
  • Keep list and filter state in Zustand instead of a heavy global store
  • Accessible modals (focus, Escape, overlay) on Radix primitives
  • Cover routes and components with Vitest + Testing Library in jsdom
  • Unify color tokens so light/dark do not feel like two different apps

Technical Details

  • •Next.js 16 (App Router), React 19, TypeScript
  • •Prisma 7 with @prisma/adapter-pg and the pg driver for PostgreSQL
  • •Zustand for client state
  • •Radix UI (umbrella `radix-ui` package) plus sonner toasts
  • •Tailwind CSS 4, class-variance-authority, tailwind-merge, clsx
  • •Vitest 4, @vitest/coverage-v8, Testing Library, jsdom
  • •npm scripts: db:push, db:migrate, db:seed