MyClub/diagrams/frontend-overall.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
  %% Overall Frontend Architecture
  classDef cluster fill:#eef7ff,stroke:#2b6cb0,color:#0b3a60;
  classDef svc fill:#e0f2fe,stroke:#0284c7,color:#0c4a6e;
  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 infra fill:#e3f2fd,stroke:#1e88e5,color:#0c4a6e;

  subgraph Client
    Browser((Browser)):::infra
  end

  Browser --> index_tsx[index.tsx]:::infra
  index_tsx --> ErrorBoundary
  index_tsx --> AppLazy[App.lazy.tsx]
  index_tsx --> ServiceWorker[serviceWorkerRegistration.ts]
  index_tsx --> ErrorReporterSvc[services/errorReporter.ts]

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

  subgraph Routing
    Routes:::infra
    ProtectedRoute:::comp
  end

  Routes --> PublicRoutes
  Routes --> AdminRoutes

  subgraph PublicRoutes[Public Pages]
    HomeRoute --> HomePage
    HomeRoute --> PremiumHomePage
    BlogRoute --> BlogPage
    BlogRoute --> PremiumBlogPage
    PublicOther[Other Public Routes]
  end

  subgraph AdminRoutes[Admin Pages]
    AdminDashboardPage
    AdminContent[Other Admin Pages]
  end

  Router --> Routes
  AuthProv --> ProtectedRoute

  %% Pages and components
  subgraph Pages[Key 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
    NotFoundPage:::page
    ForbiddenPage:::page
    SetupPage:::page
    StylePreviewPage:::page
    AuthPage:::page
    RegisterPage:::page
    ForgotPasswordPage:::page
    ResetPasswordPage:::page
    NewsletterUnsubscribePage:::page
    NewsletterPreferencesPage:::page
    SemiAdminPage:::page
    ShortRedirectPage:::page
    PremiumHomePage:::page
    PremiumBlogPage:::page
  end

  PublicRoutes --> Pages
  AdminRoutes --> AdminContent

  subgraph AdminPages[Admin Management]
    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

  AdminContent --> AdminPages

  %% Components (subset)
  subgraph Components
    MainLayout[components/layout/MainLayout]:::comp
    ProtectedRoute:::comp
    CookieBanner:::comp
    DefaultSEO[components/seo/DefaultSEO]:::comp
    TeamLogo[components/common/TeamLogo]:::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
    MyUIbrixEditor[components/editor/MyUIbrixEditor]:::comp
    MyUIbrixErrorBoundary[components/editor/MyUIbrixErrorBoundary]:::comp
    ClubModal[components/home/ClubModal]:::comp
    MatchModal[components/home/MatchModal]:::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
    SweepstakeWidget[components/sweepstakes/SweepstakeWidget]:::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 --> SweepstakeWidget
  HomePage --> ClubModal
  HomePage --> MatchModal
  TeamLogo -. logos .- HomePage

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

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

  AuthProv --> AuthContext
  ClubThemeProv --> ClubThemeContext
  Pages --> AuthContext
  Pages --> ClubThemeContext
  Pages --> Hooks

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

  Components --> Services
  Pages --> Services
  Hooks --> Services

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

  Services --> Backend
  errorReporter --> ErrorIngest
  facrApi --> FACR
  apiCore --> Backend

  ServiceWorker -.->|PWA| Browser