DevFlow
Collaborative project management platform with real-time Kanban boards
Overview
DevFlow is my flagship project: a self-contained project-management platform in the spirit of Linear or Trello, built to prove I can own a full product surface — not just a CRUD demo. It models the way real engineering teams actually work: an account belongs to one or more workspaces, each workspace holds projects, and each project runs on a Kanban board with tasks that carry assignees, status, and detail. On top of that sits authentication, team invitations, file uploads, and real-time notifications, so the whole thing feels like a product rather than a prototype.
Key features
- JWT-based authentication with protected routes and persistent sessions across the app
- Multi-tenant workspace model — a user can belong to and switch between several workspaces
- Project dashboards nested inside each workspace, each with its own team and settings
- Drag-and-drop Kanban boards for task status (To Do / In Progress / Done) per project
- Rich task detail view — description, assignee, due date, and activity
- Team invitations to bring collaborators into a workspace or project
- Real-time notifications so board and task changes reach teammates immediately
- File uploads attached to tasks and projects
Architecture & engineering decisions
React front end with route-level code-splitting for the dashboard, workspace, project, and board views
Node.js/Express REST API handling auth, workspaces, projects, tasks, and invitations as distinct resources
MongoDB as the primary store, modeling workspaces → projects → tasks as a nested, referenced hierarchy
JWT access tokens for stateless authentication, with middleware guarding every protected route
Socket.io channel per workspace/project so board updates and notifications push to connected clients in real time
Cloudinary for handling and serving uploaded task/project files without burdening the API server
Architecture reconstructed from the shipped product and repository description, since this write-up focuses on the engineering decisions rather than reproducing source code.
Product gallery
View full gallery →
Challenges & how I solved them
Modeling a workspace → project → task hierarchy that stays fast to query as data grows
Used referenced (not deeply embedded) MongoDB documents with indexes on workspace and project IDs, so board and dashboard queries stay scoped and cheap even as tasks accumulate.
Keeping every connected client's board in sync the moment a task moves or a teammate is invited
Scoped Socket.io rooms per workspace/project so updates broadcast only to the people who should see them, instead of a single noisy global channel.
Making JWT auth feel invisible to the user while still gating every workspace and project route
Centralized token verification in Express middleware and mirrored it with route guards on the client, so an expired or missing token redirects to login before any protected UI renders.
Lessons learned
- Designing the data model (workspace → project → task) before writing a single UI screen paid off — it's the decision that made drag-and-drop boards and permissions straightforward later.
- Real-time features are a UX problem before they're a WebSocket problem: scoping rooms correctly matters more than the transport.
- Shipping the full loop — signup through invite through notification — end to end is more convincing than a polished board with no real backend behind it.
Stack