MyClub/diagrams/frontend-architecture.mmd

flowchart TD
  %% Provider & runtime architecture
  classDef infra fill:#1f2835,stroke:#5b6e8a,color:#e8eaf0;
  classDef ctx fill:#2b233f,stroke:#7a63a0,color:#e8eaf0;
  classDef comp fill:#1d2a2a,stroke:#3d7a6a,color:#e8eaf0;

  subgraph Entry[index.tsx]
    RootDOM[(#root)]:::infra --> ErrorBoundary:::comp --> ColorModeScript:::infra --> AppLazy[App.lazy]:::infra
    ServiceWorker[serviceWorkerRegistration]:::infra
    ErrorReporter[services/errorReporter.installGlobalErrorHandlers]:::infra
  end

  subgraph Providers
    Chakra[ChakraProvider]:::infra --> RQ[QueryClientProvider]:::infra --> Router[BrowserRouter]:::infra --> AuthProv[AuthProvider]:::ctx --> ClubThemeProv[ClubThemeProvider]:::ctx --> Helmet[HelmetProvider]:::infra --> Suspense:::infra --> Routes:::infra
    DefaultSEO:::comp
    CookieBanner:::comp
  end

  AppLazy --> Chakra
  AppLazy --> DefaultSEO
  AppLazy --> CookieBanner

  subgraph Routing
    Routes:::infra --> PublicRoutes
    Routes:::infra --> AdminRoutes
    ProtectedRoute:::comp
  end

  AuthProv --> ProtectedRoute

  subgraph PublicRoutes
    HomeRoute
    BlogRoute
    OtherPublic[(other public pages)]
  end

  subgraph AdminRoutes
    AdminPages[(admin pages...)]
  end