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

我学到了什么
- 在 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