MyClub/diagrams/frontend-everything.mmd

%%{init: {"theme":"forest","flowchart":{"curve":"linear"},"themeCSS":".edgePath path { stroke-dasharray: 6 4; animation: dash 16s linear infinite; } @keyframes dash { to { stroke-dashoffset: -1000; } }" }}%%
flowchart LR
  %% Everything Graph: combined overview of frontend
  classDef cluster fill:#eef7ff,stroke:#2b6cb0,color:#0b3a60;
  classDef page fill:#fff7ed,stroke:#f59e0b,color:#7c2d12;
  classDef comp fill:#ecfdf5,stroke:#16a34a,color:#064e3b;
  classDef ctx fill:#f3e8ff,stroke:#6d28d9,color:#3b0764;
  classDef hook fill:#fef9c3,stroke:#ca8a04,color:#7c2d12;
  classDef svc fill:#e0f2fe,stroke:#0284c7,color:#0c4a6e;
  classDef util fill:#e2e8f0,stroke:#475569,color:#111827;
  classDef infra fill:#e3f2fd,stroke:#1e88e5,color:#0c4a6e;

  %% Entry & Providers
  subgraph Entry[Entry / Boot]
    index[index.tsx]:::infra --> AppLazy[App.lazy.tsx]:::infra
    index --> ErrorBoundary:::comp
    index --> ServiceWorker[serviceWorkerRegistration]:::infra
  end

  subgraph Providers[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
  Router --> Routes

  %% Routing
  subgraph Routing[Routes]
    HomeRoute:::comp --> HomePage
    BlogRoute:::comp --> BlogPage
    NotFoundRoute:::comp --> NotFoundPage
    ProtectedRoute:::comp
  end

  AuthProv --> ProtectedRoute

  %% Pages
  subgraph Pages
    HomePage:::page
    BlogPage:::page
    ArticleDetailPage:::page
    ActivityDetailPage:::page
    MatchDetailPage:::page
    ClubPage:::page
    AboutPage:::page
    CalendarPage:::page
    ActivitiesCalendarPage:::page
    TablesPage:::page
    MatchesPage:::page
    PlayersPage:::page
    PlayerDetailPage:::page
    SponsorsPage:::page
    ContactPage:::page
    GalleryPage:::page
    AlbumDetailPage:::page
    VideosPage:::page
    SearchPage:::page
    ClothingPage:::page
    PollsPage:::page
    OverlayScoreboardPage:::page
    OverlaySponsorsPage:::page
    ForbiddenPage:::page
    SetupPage:::page
    StylePreviewPage:::page
    AuthPage:::page
    RegisterPage:::page
    ForgotPasswordPage:::page
    ResetPasswordPage:::page
    NewsletterUnsubscribePage:::page
    NewsletterPreferencesPage:::page
    SemiAdminPage:::page
  end

  %% Admin Pages
  subgraph Admin[Admin]
    AdminDashboardPage:::page
    AdminDocsPage:::page
    AboutAdminPage:::page
    AdminVideosPage:::page
    GalleryAdminPage:::page
    AdminMerchPage:::page
    SponsorsAdminPage:::page
    MatchesAdminPage:::page
    PlayersAdminPage:::page
    TeamsAdminPage:::page
    UsersAdminPage:::page
    BannersAdminPage:::page
    MessagesAdminPage:::page
    SettingsAdminPage:::page
    NewsletterAdminPage:::page
    PollsAdminPage:::page
    CompetitionAliasesAdminPage:::page
    PrefetchAdminPage:::page
    AdminResetPasswordPage:::page
    ScoreboardAdminPage:::page
    MobileScoreboardControlPage:::page
    AnalyticsAdminPage:::page
    ErrorsAdminPage:::page
    FilesAdminPage:::page
    ContactsAdminPage:::page
    NavigationAdminPage:::page
    CommentsAdminPage:::page
    ShortlinksAdminPage:::page
    EngagementAdminPage:::page
    SweepstakesAdminPage:::page
    SweepstakeVisualPage:::page
  end

  %% Components (subset of key ones)
  subgraph Components
    MainLayout[components/layout/MainLayout]:::comp
    ClubHeroTopbar[components/home/ClubHeroTopbar]:::comp
    BannerDisplay[components/banners/BannerDisplay]:::comp
    BlogCardsScroller[components/home/BlogCardsScroller]:::comp
    BlogSwiper[components/home/BlogSwiper]:::comp
    VideosSection[components/home/VideosSection]:::comp
    MerchSection[components/home/MerchSection]:::comp
    PollsWidget[components/home/PollsWidget]:::comp
    GallerySection[components/home/GallerySection]:::comp
    NewsletterSubscribe[components/newsletter/NewsletterSubscribe]:::comp
    NewsList[components/pack/NewsList]:::comp
    StandingsCard[components/pack/StandingsCard]:::comp
    NextMatch[components/pack/NextMatch]:::comp
    MatchesSlider[components/pack/MatchesSlider]:::comp
    ActivitiesList[components/pack/ActivitiesList]:::comp
    TeamLogo[components/common/TeamLogo]:::comp
    SweepstakeWidget[components/sweepstakes/SweepstakeWidget]:::comp
    ClubModal[components/home/ClubModal]:::comp
    MatchModal[components/home/MatchModal]:::comp
  end

  HomePage --> MainLayout
  HomePage --> ClubHeroTopbar
  HomePage --> BannerDisplay
  HomePage --> BlogCardsScroller
  HomePage --> BlogSwiper
  HomePage --> VideosSection
  HomePage --> MerchSection
  HomePage --> PollsWidget
  HomePage --> GallerySection
  HomePage --> NewsletterSubscribe
  HomePage --> NewsList
  HomePage --> StandingsCard
  HomePage --> NextMatch
  HomePage --> MatchesSlider
  HomePage --> ActivitiesList
  HomePage -. uses .- TeamLogo
  HomePage --> SweepstakeWidget
  HomePage --> ClubModal
  HomePage --> MatchModal

  %% Contexts & Hooks
  subgraph Contexts
    AuthContext[contexts/AuthContext]:::ctx
    ClubThemeContext[contexts/ClubThemeContext]:::ctx
  end

  subgraph Hooks
    usePublicSettings[hooks/usePublicSettings]:::hook
    useFontLoader[hooks/useFontLoader]:::hook
    useUmami[hooks/useUmami]:::hook
    usePageElementConfig[hooks/usePageElementConfig]:::hook
    useAllPageElementConfigs[hooks/usePageElementConfig.useAllPageElementConfigs]:::hook
  end

  Providers --> Contexts
  Pages --> Contexts
  Pages --> Hooks

  %% Services & Utils
  subgraph Services
    apiCore["services/api (API_URL)"]:::svc
    errorReporter[services/errorReporter]:::svc
    settingsSvc[services/settings]:::svc
    pageElementsSvc[services/pageElements]:::svc
    articlesSvc[services/articles]:::svc
    playersSvc[services/players]:::svc
    sponsorsSvc[services/sponsors]:::svc
    bannersSvc[services/banners]:::svc
    compAliasesSvc[services/competitionAliases]:::svc
    eventsSvc[services/eventService]:::svc
    setupSvc[services/setup]:::svc
    engagementSvc[services/engagement]:::svc
    actionLogSvc[services/actionLog]:::svc
    facrApi[services/facr/facrApi]:::svc
  end

  subgraph Utils
    urlUtil[utils/url]:::util
    nationalityUtil[utils/nationality]:::util
    colorsUtil[utils/colors]:::util
    logosUtil[utils/sportLogosAPI]:::util
  end

  Pages --> apiCore
  Pages --> errorReporter
  Pages --> settingsSvc
  Pages --> pageElementsSvc
  Pages --> articlesSvc
  Pages --> playersSvc
  Pages --> sponsorsSvc
  Pages --> bannersSvc
  Pages --> compAliasesSvc
  Pages --> eventsSvc
  ClubThemeContext --> facrApi
  ClubThemeContext --> colorsUtil
  ClubThemeContext --> logosUtil
  Pages --> urlUtil
  Pages --> nationalityUtil
  Hooks --> settingsSvc

  %% Backends
  subgraph Backends
    Backend[(fotbal-club backend API)]:::infra
    ErrorIngest[(errors.tdvorak.dev)]:::infra
    FACR[(FACR APIs)]:::infra
  end

  apiCore --> Backend
  errorReporter -. sends .- ErrorIngest
  facrApi --> FACR