ProjectHub

01 The Problem

Modern software teams juggle an ever-growing stack of collaboration tools — one for tasks, another for code, a third for documentation, and yet another for real-time communication. The result is context-switching fatigue: developers spend as much time navigating between tools as they do actually building software. Existing project management platforms are either too heavy (Jira), too fragmented (spreadsheets + Slack + Notion), or too limited in their integration with the development workflow.

ProjectHub was conceived as a unified collaboration dashboard that brings project management, real-time activity feeds, GitHub integration, contributor analytics, and team communication into a single, coherent experience. Built around the Landa design system — a custom dark theme with a distinctive teal (#09bc8a) accent and deep dark (#010907) backgrounds — it aims to prove that a full-stack application can be both feature-rich and delightful to use.

The core challenge was real-time data synchronisation across multiple users viewing and editing the same projects simultaneously, combined with the need for persistent state (tasks, projects, streaks) that survives page reloads and session boundaries. The solution needed to handle OAuth from multiple providers, role-based access control, and a GitHub-style contribution heatmap — all while staying performant on modest hardware.

02 Architecture

ProjectHub follows a three-layer architecture with clear separation of concerns. The Next.js 14 App Router handles server-side rendering and routing on the frontend, Fastify serves a REST API with Zod-validated schemas on the backend, and Socket.io bridges the two for real-time event propagation. PostgreSQL is the primary data store, with Redis handling caching, session management, and pub/sub for cross-instance event broadcasting.

Frontend (Next.js 14 App Router)
├── Dashboard + Stats
├── Project View + Tasks + Members
├── Activity Feed
├── Contribution Graph + Streaks
├── Resources & Links
├── Notifications
└── Settings
    │ HTTP + WebSocket
    ▼
Backend (Fastify + TypeScript)
├── REST API (Zod validation)
├── JWT + OAuth Auth (Google, GitHub)
└── Socket.io (real-time events)
    │
    ▼
Database Layer
├── PostgreSQL (primary data)
└── Redis (caching, sessions)

03 Tech Stack

Every technology was chosen for a specific reason — not because it was trendy, but because it solved a real problem in the architecture. The stack spans the full application layer, from database to design system.

04 Key Challenges

📺 1. Real-Time Collaboration Without Event Spam

When multiple users view and edit the same project simultaneously, every task update, member change, or comment creates a Socket.io event. Without careful event scoping, a single user's action could trigger dozens of redundant broadcasts — flooding the client and degrading UX. The solution was a room-based subscription model: each project is a Socket.io room, and each event includes a scope field (e.g., project:task:update). Clients subscribe only to the scopes they need, and the server deduplicates identical events within a 500 ms window before broadcasting. This reduced event volume by roughly 70% during peak usage.

🌎 2. Cross-Timezone Streak Tracking

The contribution heatmap and streak system needed to handle users spread across UTC, IST, EST, and beyond. What counts as "today" for a user in New York is still "yesterday" for a user in Mumbai. A naive UTC-based approach would break streaks whenever a user crossed midnight in their local timezone.

The solution stores every contribution event with the user's configured timezone offset (stored in their profile preferences). The streak engine queries contributions grouped by the user's local day boundary, not UTC midnight. When a user changes their timezone, existing contributions are re-mapped to their new local calendar — this is a one-time background job that runs asynchronously. The heatmap renderer uses the same logic, ensuring the contribution graph always reflects the user's chosen timezone.

🔒 3. Three-Provider OAuth with Account Linking

Supporting Google OAuth, GitHub OAuth, and JWT-based credentials simultaneously introduces edge cases: a user might sign up with Google, then try to log in with GitHub using the same email. Without account linking, this creates duplicate accounts. With naive linking, it opens security holes (e.g., claiming another user's account by registering their email with a different provider).

ProjectHub implements a verified email linking flow: when a provider returns an email that already exists in the database, the user must confirm ownership via a one-time code sent to that email before the accounts are linked. This prevents unauthorised account claiming while allowing legitimate multi-provider access. Session consistency across providers is maintained via a shared JWT that encodes the user's primary ID and linked provider IDs — regardless of which provider they used to authenticate, the session token is the same.

📊 4. Dashboard Performance Under Load

The dashboard page loads projects, tasks, notifications, the activity feed, and streak data simultaneously. Without optimisation, this meant 5+ sequential API calls and visible loading jank. The solution combined two strategies:

• TanStack Query prefetching — On the server, we prefetch all dashboard queries and dehydrate the cache into the page HTML. On the client, TanStack Query hydrates from this cache, meaning the first paint is instant with no loading spinners.
• Zustand client cache — UI state like active filters, sidebar visibility, and scroll position is preserved across navigations without hitting the server. Only mutable data (notifications, feed items) is revalidated on focus via TanStack Query's refetchOnWindowFocus.

Together these eliminated N+1 query patterns entirely and made the dashboard feel instant even on slow connections.

⚡ Code Highlight

The Socket.io event bus handles real-time collaboration — scoping notifications to the right users while avoiding spam during rapid changes.

io.on("connection", (socket) => {
  // Join a project room — scoped notifications per project
  socket.on("join_project", (projectId) => {
    socket.join(`project:${projectId}`);
  });

  // Task update → broadcast to room (not all users)
  socket.on("task_updated", (task) => {
    io.to(`project:${task.projectId}`).emit("task_changed", {
      taskId: task.id,
      status: task.status,
      assignee: task.assigneeId,
      updatedBy: socket.data.userId,
    });
  });

  // Activity feed entry (debounced server-side)
  socket.on("log_activity", (entry) => {
    debouncedActivityLog(entry, socket.data.userId);
  });
});

05 Results

ProjectHub delivers a fully functional collaboration platform with every major feature implemented and working. The Landa design system provides a cohesive visual language across the entire application.

• Full authentication — Google OAuth, GitHub OAuth, and JWT credentials with verified email account linking and role-based access control
• Real-time activity feed — Every project action (task created, member added, status changed) broadcasts instantly to all participants via Socket.io
• GitHub-style contribution graph — Heatmap with configurable timezone support and consecutive-day streak tracking with animated flame indicators
• Friend & collaboration system — Search users, send/accept friend requests, add collaborators to projects with granular permissions
• Resource bookmarking — Save links with automatic OG metadata fetching and organisation by project
• GitHub repo integration — Link projects to GitHub repositories for cross-reference between code and task management
• Custom Landa design system — Teal (#09bc8a) accent on deep dark (#010907) background, consistent typography, spacing, and component tokens
• Notifications — Real-time alerts for project invites, task assignments, and mentions, with read/unread tracking

06 What I Learned

Building a real-time collaboration platform from scratch — across the entire stack — taught me as much about system design as it did about the human dynamics of collaborative software. Three lessons stand out: