Project & Task Management System
A collaborative project management system designed for teams to track progress, make decisions, and for individuals to clearly monitor their own contributions.
The Startup Dilemma
A friend's interior design startup needed a reliable task management system to coordinate projects. However, enterprise tools like ClickUp were too expensive for a small team. More importantly, dealing with sensitive client floor plans and design assets required strict data privacy, making them hesitant to rely on third-party public cloud SaaS.
A Self-Hosted Ecosystem
I built a lightweight, performant project management platform designed specifically for self-hosting on a custom homelab. It delivers core enterprise features—like Kanban boards, project-level voting, and granular task assignments—without the bloat, ensuring 100% data sovereignty and zero recurring SaaS costs for the startup.
Task Progress & Assignment
Tasks move through multiple progress stages with an intuitive drag-and-drop interface. Admins can assign tasks to team members, with workload scores displayed for balanced distribution. If a task is unassigned, all members can update its progress. Once assigned, only the assignee and admins have control.
Project & Task Comments
Communication is streamlined through dedicated chatboxes: one at the project level and another for each task. This allows teams to hold both broad and focused discussions. The system also supports user mentions for direct attention.
Voting
Decision-making within teams is supported by an integrated voting system. Members can create votes with options in text, image, or a combination of both. Each member can cast only one vote, ensuring fairness in the process.
Personal Dashboard
Each member has a personalized dashboard that highlights tasks they are involved in, the teams they have joined, and their individual completion rate. This provides clarity on personal contributions and responsibilities.
Dark Mode
The interface supports dark mode for a modern and user-friendly experience, ensuring accessibility and comfort across environments.
Engineering Spotlight
01. Advanced Drag & Drop (DnD) Architecture
Implementing the Kanban board wasn't just about UI; it required precise event handling across devices. I utilized @dnd-kit/core with custom sensor orchestration: MouseSensors for desktop precision, and TouchSensors with delay/tolerance constraints to allow native page scrolling on mobile without triggering accidental drags. UI updates are handled optimistically on the client to ensure zero-latency feedback before syncing the new state to the PostgreSQL database.
02. Complex State Lifting & Component Decoupling
To keep the architecture clean, I heavily decoupled the UI components. For example, when a task is moved or marked 'COMPLETE', the ProjectBoard computes real-time statistics (completion rates and priority distributions) and lifts this state via an onStatsChange callback to the parent ClientProjectPage. This ensures the dashboard header reflects live data without prop-drilling or relying on heavy state management libraries.
Tech Stack
This project is powered by a modern full-stack JavaScript ecosystem, leveraging both frontend and backend technologies for performance, scalability, and developer efficiency.
Frontend: React, Next.js, Tailwind CSS
Backend: Node.js, Next.js API Routes, Prisma
Database: PostgreSQL
Auth: NextAuth.js with JWT
Deployment: Vercel, PlanetScale
Future Roadmap
Gantt Chart
Visualize task dependencies, ensuring sequential workflows are respected.
Audit Trail
When admins remove members, the system will generate a timestamped PDF report of their contributions and comments, safeguarding transparency and fairness.
Custom Categories
Members will be able to group their projects into personal categories for easier management.