返回项目
开发中Next.jsReactTypeScriptTailwind CSSPrismaPostgreSQLZustandRadix UIVitest2026

WEB 待办清单

使用 Next.js 16、React 19 与 TypeScript 开发的任务管理应用。通过 Prisma 与 PostgreSQL 持久化;Zustand 管理状态;Radix UI 提供可访问组件;Tailwind CSS 4 支持明暗主题。包含收件箱、今天、下一步、已完成、搜索、筛选与标签、创建/编辑弹窗与侧边栏。使用 Vitest 与 Testing Library 保障质量。教育用途项目。

WEB 待办清单 — vista previa

我学到了什么

  • 在 Next.js 中用 Prisma + PostgreSQL 打通持久化(迁移、种子、npm 脚本)
  • 相较 Redux,更宜用 Zustand 管理轻量 UI 状态与客户端缓存的场景
  • 基于 Radix 原语实现可访问的弹层与控件
  • Vitest + Testing Library + jsdom 的组件与页面测试流程
  • Tailwind 4 设计令牌贯穿明暗主题,保证视觉一致

技术细节

  • Next.js 16(应用路由)、React 19、TypeScript
  • Prisma 7、@prisma/adapter-pg 与 pg 连接 PostgreSQL
  • Zustand 客户端状态
  • Radix UI(radix-ui 合集包)与 sonner 提示
  • Tailwind CSS 4、class-variance-authority、tailwind-merge、clsx
  • Vitest 4、@vitest/coverage-v8、Testing Library、jsdom
  • npm 脚本:db:push、db:migrate、db:seed