Opik Frontend

Architecture Decisions

• Routing: TanStack Router (file-based)
• Data fetching: TanStack Query (never raw fetch/useEffect)
• State: Zustand for global, React state for local
• Components: shadcn/ui + Radix UI base
• Forms: React Hook Form + Zod validation

Critical Gotchas

Never useEffect for Data Fetching

// ❌ BAD
useEffect(() => {
  fetch('/api/data').then(setData);
}, []);

// ✅ GOOD