Keyboard-First Task Management: Building a Linear Alternative with React

Developer tools should be navigable without a mouse. Apex Task Board is built entirely around keyboard shortcuts and command palettes.

1. Command Palette (Ctrl+K)

The command palette is the fastest way to navigate. It fuzzy-searches across tasks, views, and actions:

typescript
function CommandPalette({ tasks, onSelect }) {
  const [query, setQuery] = useState('');
  const filtered = useMemo(() =>
    tasks.filter(t => t.title.toLowerCase().includes(query.toLowerCase())).slice(0, 10),
    [query, tasks]
  );
  return (
    <div className="command-palette" onKeyDown={handleKeyNav}>
      <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Search tasks..." autoFocus />
      {filtered.map(task => <CommandItem key={task.id} task={task} onSelect={onSelect} />)}
    </div>
  );
}

2. Virtualized Task Lists

With thousands of tasks, rendering all DOM nodes kills performance. We use react-window to virtualize the list, only rendering visible rows.

3. Keyboard Navigation

Every action has a shortcut: N creates a task, J/K navigates up/down, Enter opens details, E edits inline. Zero mouse required.

Summary

Keyboard-first design with command palettes and virtualized rendering creates a task board that developers love because it matches their workflow speed.