Frontend Genel Bakış

Zeus 2.0 frontend'i Next.js 14 (App Router) ile geliştirilmiş modern bir SPA'dır.

Teknoloji Stack'i

Kategori	Teknoloji
Framework	Next.js 14.1.0, React 18.2.0
Dil	TypeScript 5.3.3 (strict mode)
Stil	Tailwind CSS 3.4.1 + shadcn/ui (Radix)
Server State	TanStack Query 5 (caching, refetching)
Client State	Zustand 4.5 (sidebar, auth, theme)
Form	React Hook Form 7 + Zod validation
Grafikler	amCharts 5, Recharts
SLD	React Flow 11 + dagre layout
Harita	Google Maps API
i18n	i18next (TR/EN)
Bildirim	Sonner (toast)
Export	XLSX (Excel)

API İletişimi

KRİTİK KURAL

ASLA process.env.NEXT_PUBLIC_API_URL doğrudan kullanma!

Her zaman siteConfig.apiUrl kullan. Detay: Kritik Notlar

Browser → /api/:path* (same-origin)
           ↓ Next.js rewrites
         BACKEND_URL/api/:path*
           ↓
         FastAPI Backend (8000)

WebSocket

• Token-based authentication (query string)
• Auto-reconnect (max 10 deneme, 3s aralık)
• Ping/pong keepalive (30s)
• Mesaj tipleri: measurement, device_status, gateway_status, alarm

Responsive Tasarım

• Mobile-first: Tailwind md: breakpoint (768px)
• Desktop: Sabit sidebar (64px genişlik)
• Mobil: Sheet drawer + swipe gesture (sol kenardan sağa)