Apli — Live Coding Starter (ATS Pipeline Board)

This repo is the starter project for the live coding exercise:

Build a 4‑column ATS pipeline (Applied → Screen → Interview → Offer) with optimistic updates and conflict handling.

It includes:

• Vite + React + TypeScript
• React Query (server state) and Zustand (UI/ephemeral state)
• A mock API that simulates latency, random failures, and 409 version conflicts
• Minimal DnD scaffolding (dnd-kit) + keyboard move buttons as fallback
• React Query Devtools (open with the Devtools button)

Quick start

# Node 18+ recommended
npm install
npm run dev
# open http://localhost:5173

Your goals (MVP)

1. Fetch and render columns with candidates.
2. Implement drag & drop (or the provided keyboard buttons) to move a candidate.
3. On drop/click, perform an optimistic update and call the PATCH API.
4. If the server returns 409 or fails, rollback and show an error message.
5. Show loading / empty / error states and keep the UI responsive.

Stretch (if you have time)

• Reorder within a column (persist position).
• Virtualize large columns.
• Prefetch next column on hover.
• Filter by search term and keep it in URL.
• Add basic a11y enhancements (aria-live for errors, focus management).

API (mocked in-browser)

• GET /api/stages → ["Applied","Screen","Interview","Offer"]
• GET /api/candidates?stage=Applied&cursor=<opt> → { items:[{ id, name, role, stage, position, version }], nextCursor:null|str }
• PATCH /api/candidates/:id/move body: { fromStage, toStage, position, version }
  • 200 → { ...candidate, version: version+1 }
  • 409 → { error:"conflict", current:{ ...candidate, version } }
  • Random delay (100–800ms); ~10% failures

Note: The mock API intercepts fetch calls for /api/* requests. You can use fetch OR the tiny apiClient helpers.

Where to code

• src/components/Board.tsx — DnD wiring (onDragEnd) and basic layout
• src/hooks/useMoveCandidate.ts — Implement onMutate / onError / onSettled for optimistic updates
• src/components/StageColumn.tsx — Render column, integrate keyboard move buttons

Common pitfalls worth catching

• Mixing server state and UI state in one store
• Mutating arrays in place (use pure updates)
• Wrong React Query keys (must include the stage)
• Forgetting rollback on error / conflict
• Not cancelling queries before optimistic updates

Good luck! Have fun and talk through your reasoning.