全栈任务管理系统

使用Next.js、Prisma和PostgreSQL构建的现代化任务管理系统，支持团队协作和实时同步

2024年2月10日
源代码
Next.jsPrismaPostgreSQL全栈

项目简介

这是一个功能完整的任务管理系统，支持多用户协作、任务分配、进度跟踪等功能。

核心功能

1. 任务管理

  • 创建、编辑、删除任务
  • 任务优先级设置
  • 截止日期提醒
  • 任务状态跟踪

2. 团队协作

  • 多用户支持
  • 任务分配
  • 评论和讨论
  • 实时通知

3. 数据可视化

  • 项目进度看板
  • 任务统计图表
  • 团队工作量分析

技术架构

前端

  • Next.js 14 (App Router)
  • TypeScript
  • TailwindCSS
  • Shadcn/ui
  • React Query

后端

  • Next.js API Routes
  • Prisma ORM
  • PostgreSQL
  • NextAuth.js

数据库设计

model Task {
  id          String   @id @default(cuid())
  title       String
  description String?
  status      Status
  priority    Priority
  dueDate     DateTime?
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
 
  assignee    User?    @relation("AssignedTasks", fields: [assigneeId], references: [id])
  assigneeId  String?
 
  project     Project  @relation(fields: [projectId], references: [id])
  projectId   String
}

实现亮点

1. 实时同步

使用WebSocket实现任务状态的实时同步：

// lib/websocket.ts
export function useTaskSync(taskId: string) {
  const queryClient = useQueryClient()
 
  useEffect(() => {
    const ws = new WebSocket(process.env.NEXT_PUBLIC_WS_URL!)
 
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data)
      if (data.taskId === taskId) {
        queryClient.invalidateQueries(['task', taskId])
      }
    }
 
    return () => ws.close()
  }, [taskId])
}

2. 乐观更新

const updateTask = useMutation({
  mutationFn: (data: TaskUpdate) => api.updateTask(taskId, data),
  onMutate: async (newData) => {
    await queryClient.cancelQueries(['task', taskId])
    const previous = queryClient.getQueryData(['task', taskId])
    queryClient.setQueryData(['task', taskId], newData)
    return { previous }
  },
  onError: (err, newData, context) => {
    queryClient.setQueryData(['task', taskId], context.previous)
  },
})

性能优化

  1. 数据库查询优化

    • 使用Prisma的关系预加载
    • 实现分页和无限滚动
    • 添加数据库索引

  2. 前端优化

    • 组件懒加载
    • 图片优化
    • 缓存策略

部署

使用Vercel进行部署，数据库托管在Supabase：

# 环境变量
DATABASE_URL="postgresql://..."
NEXTAUTH_SECRET="..."
NEXTAUTH_URL="https://your-domain.com"

遇到的挑战

问题1：并发更新冲突

描述：多用户同时编辑同一任务导致数据冲突

解决方案：

  • 实现乐观锁机制
  • 添加版本号字段
  • 冲突时提示用户重新加载
model Task {
  id      String @id
  version Int    @default(0)
  // ...其他字段
}

问题2：实时通知性能

描述：大量通知导致客户端性能下降

解决方案：

  • 实现通知聚合
  • 添加通知优先级
  • 使用虚拟滚动

后续计划

  • 移动端应用
  • 邮件集成
  • AI任务建议
  • 更多图表类型

总结

这个项目让我深入理解了全栈开发的各个方面，特别是实时数据同步和性能优化。