Proje: OkulUp CRM · Hub: OkulUp CRM — Architecture

Tech Stack ve Proje Yapısı

Teknolojiler

• React 19 + Vite 7 — SPA
• React Router DOM v7 — createBrowserRouter ile routed mimari
• Zustand v5 — global state (auth, data, feedback, delete)
• Tailwind CSS v4 (Vite plugin ile)
• API: OkulUp API (http://127.0.0.1:8080/api default, VITE_API_BASE_URL env ile override)

Dizin Yapısı

src/
  pages/         — Route hedefi olan tam sayfa bileşenleri (her modül için ayrı)
  features/      — Sayfa içi tab/içerik bileşenleri (XxxTab.jsx)
  hooks/         — Her modül için useXxxFeature.js (API çağrısı + state)
  stores/        — Zustand store'ları (useAuthStore, useDataStore, useDeleteStore, useFeedbackStore)
  layouts/       — DashboardLayout (sidebar + nav + Outlet)
  lib/           — constants.js, helpers.js, parentStudentMatchingApi.js
  components/    — AppShell, LoginScreen, dialogs.jsx, ui.jsx

Routing

• /login → LoginPage (auth dışı)
• / → DashboardLayout + Outlet → OverviewPage
• Tüm modül sayfaları lazy import ile yükleniyor (React.lazy + Suspense)

Veri Akışı

1. DashboardLayout mount’ta useAuthStore.hydrateSession() çağırır
2. Session başarılıysa useDataStore.loadAllData() çağırır
3. loadAllData kullanıcı rolüne göre hangi endpoint’lerin çağrılacağına karar verir (rol bazlı yetkilendirme)
4. Store’lardaki data bileşenlere Zustand hook’ları ile geçer

Related

• roller-ve-yetkiler — hangi rol hangi modüle erişir
• store-ve-hook-pattern — Zustand store yapısı