Building a project management tool isn't inherently hard. Building one that feels as fast as a native desktop application inside a browser, however, is a massive engineering challenge.

Try the live demo here ↗

This project is a deep dive into replicating the famous Linear issue tracker, focusing specifically on command-palette navigation, real-time sync, and zero-latency state management.

The Kanban board view with drag-and-drop enabled.

The Architecture

To achieve the "instant" feel, I had to rethink the standard request-response cycle. If a user moves an issue to "In Progress," waiting 200ms for a server response before updating the UI ruins the illusion of speed.

I settled on the following stack:

• Framework: Next.js 14 (App Router)
• Database: PostgreSQL hosted on Supabase
• State Management: Zustand + React Query (for optimistic updates)
• Styling: Tailwind CSS + Radix UI primitives

Achieving Zero Latency

The core of the application relies heavily on Optimistic UI. When a user presses C to create an issue, or drags a card across the board, the UI updates synchronously.

Here is a simplified look at the cache mutation:

// Optimistically update the kanban board
queryClient.setQueryData(['issues', boardId], (oldData) => {
  return oldData.map(issue => 
    issue.id === draggedIssueId 
      ? { ...issue, status: 'IN_PROGRESS' } 
      : issue
  );
});

// Fire the actual mutation in the background
mutate({ id: draggedIssueId, status: 'IN_PROGRESS' });

If the background request fails, the cache rolls back and a toast notification alerts the user. 99% of the time, it succeeds, and the user experiences zero lag.

The Command Palette

A non-negotiable feature was the command palette (Cmd + K). Instead of building it entirely from scratch, I leveraged cmdk.

Every action in the app—assigning a user, changing a status, or switching themes—is registered as a command. This required building a global context provider that intercepts keyboard shortcuts and maps them to specific router actions.

Biggest Challenges

1. Complex Drag and Drop: Native HTML5 drag-and-drop is notoriously difficult to style and animate. I utilized @hello-pangea/dnd to create smooth, physics-based interactions between columns.
2. Database Schema: Designing a schema that efficiently queries nested relations (Workspaces -> Projects -> Issues -> Comments) without succumbing to the N+1 query problem required careful indexing and strategic join logic in Prisma.

Looking Forward

The next major feature to implement is real-time multiplayer cursors and live presence, likely using WebSockets or Replicache. This case study proved that with the right architecture, web applications can easily rival native desktop performance.