01
TaskFlow
A real-time collaborative task manager built with Next.js, TypeScript, Socket.io and PostgreSQL. Features drag and drop, live activity feeds, and multi-user collaboration.
TaskFlow is a Trello-style collaborative task manager where multiple users can work on boards in real time. Users can create boards, add columns and cards, drag cards between columns, and see live updates from other users instantly.
Most task managers don't show live updates without refreshing — collaborating with a team means constantly missing changes. I wanted to build something where changes are reflected instantly across all connected users.
I built a custom Node.js server alongside Next.js to support persistent WebSocket connections via Socket.io. The frontend uses React with @dnd-kit for drag and drop, and the backend uses Prisma with PostgreSQL on Neon for data storage.
The key decision was using a custom Node.js server rather than Next.js API routes alone. Next.js serverless functions can't maintain persistent connections which Socket.io requires. This meant more setup but gave full control over the real-time layer.
I learned how real-time systems work at a deeper level — managing rooms, broadcasting events, and keeping client state in sync with the server. I also got experience designing a relational database schema with Prisma and handling JWT authentication from scratch.