# rabonaapp-wq/rabona-football-community architecture

> Architecture diagram of the GitHub repository rabonaapp-wq/rabona-football-community, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rabonaapp-wq/rabona-football-community
- Repository: https://github.com/rabonaapp-wq/rabona-football-community

## Overview

Rabona is a football community and services web app: users enter through authentication, then navigate a social feed, academy discovery/details, bookings, profiles, notifications, and a shop. The visible runtime is a React client backed by Firebase; pages own their Firestore interactions, while shared authentication, image compression, and notification state support those experiences. README content is only the generic AI Studio starter, so product capabilities are inferred from the indexed page modules; unsampled page internals and several page-to-service links are not asserted.

Main entry points: [`src/App.tsx`](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/App.tsx) (Page router), [`src/pages/HomeFeed.tsx`](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/HomeFeed.tsx) (Social feed), [`src/context/AuthContext.tsx`](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/context/AuthContext.tsx) (Authentication), [`src/pages/AcademiesPage.tsx`](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/AcademiesPage.tsx) (Academy discovery)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["App runtime"]
  node_app["Page router<br/>[App.tsx]"]
  node_navigation["Navigation<br/>[Navigation.tsx]"]
  node_firebase["Firebase clients<br/>[firebase.ts]"]
  node_firestore[("Firestore")]
  node_ui_assets["Shared visual assets<br/>[Icons.tsx]"]
end

subgraph group_identity["Identity"]
  node_auth["Authentication<br/>[AuthContext.tsx]"]
  node_login["Login<br/>[LoginPage.tsx]"]
  node_signup["Registration<br/>[SignupPage.tsx]"]
  node_settings["Account settings<br/>[SettingsPage.tsx]"]
end

subgraph group_community["Community"]
  node_feed["Social feed<br/>[HomeFeed.tsx]"]
  node_post["Create post<br/>[NewPostPage.tsx]"]
  node_profile["User profile<br/>[ProfilePage.tsx]"]
  node_notifications["Notifications"]
  node_notification_state["Notification state<br/>[notifications.ts]"]
  node_image_compressor["Image compression<br/>[imageCompressor.ts]"]
end

subgraph group_football["Football services"]
  node_academies["Academy discovery<br/>[AcademiesPage.tsx]"]
  node_academy_detail["Academy detail"]
  node_bookings["Bookings<br/>[BookingsPage.tsx]"]
  node_admin["Admin dashboard<br/>[AdminDashboard.tsx]"]
end

subgraph group_commerce["Commerce"]
  node_store["Store<br/>[StorePage.tsx]"]
  node_checkout["Demo checkout"]
  node_payment_api["Payment API<br/>[paymentApi.ts]"]
end

node_user(("App user"))

node_user -->|"opens"| node_app
node_app -->|"checks session"| node_auth
node_app -->|"renders navigation"| node_navigation
node_app -->|"routes to"| node_feed
node_app -->|"routes to"| node_academies
node_app -->|"routes to"| node_academy_detail
node_app -->|"routes to"| node_bookings
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_post
node_app -->|"routes to"| node_admin
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_signup
node_app -->|"routes to"| node_settings
node_app -->|"routes to"| node_notifications
node_app -->|"routes to"| node_store
node_app -->|"routes to"| node_checkout
node_auth -->|"uses clients"| node_firebase
node_auth -->|"reads profiles"| node_firestore
node_academies -->|"lists academies"| node_firestore
node_feed -->|"reads and writes"| node_firestore
node_feed -->|"compresses images"| node_image_compressor
node_post -->|"compresses images"| node_image_compressor
node_profile -->|"compresses images"| node_image_compressor
node_navigation -->|"counts unread"| node_notification_state
node_notifications -->|"uses state"| node_notification_state
node_notification_state -.->|"reads order data"| node_store
node_academy_detail -->|"requests payment"| node_payment_api
node_academy_detail -->|"may navigate"| node_checkout
node_feed -->|"renders icons"| node_ui_assets
node_academies -->|"renders icons"| node_ui_assets

click node_app "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/App.tsx"
click node_navigation "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/components/Navigation.tsx"
click node_firebase "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/lib/firebase.ts"
click node_auth "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/context/AuthContext.tsx"
click node_login "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/LoginPage.tsx"
click node_signup "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/SignupPage.tsx"
click node_settings "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/SettingsPage.tsx"
click node_feed "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/HomeFeed.tsx"
click node_post "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/NewPostPage.tsx"
click node_profile "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/ProfilePage.tsx"
click node_notifications "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/NotificationsPage.tsx"
click node_notification_state "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/utils/notifications.ts"
click node_image_compressor "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/utils/imageCompressor.ts"
click node_academies "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/AcademiesPage.tsx"
click node_academy_detail "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/AcademyDetailPage.tsx"
click node_bookings "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/BookingsPage.tsx"
click node_admin "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/AdminDashboard.tsx"
click node_store "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/StorePage.tsx"
click node_checkout "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/DemoCheckoutPage.tsx"
click node_payment_api "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/lib/paymentApi.ts"
click node_ui_assets "https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/components/Icons.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_navigation,node_firebase,node_firestore,node_ui_assets,node_user toneBlue
class node_auth,node_login,node_signup,node_settings toneAmber
class node_feed,node_post,node_profile,node_notifications,node_notification_state,node_image_compressor toneMint
class node_academies,node_academy_detail,node_bookings,node_admin toneRose
class node_store,node_checkout,node_payment_api toneIndigo
```

## Components

### App runtime

- [Page router](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/components/Navigation.tsx): `src/components/Navigation.tsx`
- [Firebase clients](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/lib/firebase.ts): `src/lib/firebase.ts`
- **Firestore**
- [Shared visual assets](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/components/Icons.tsx): `src/components/Icons.tsx`

### Identity

- [Authentication](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/context/AuthContext.tsx): `src/context/AuthContext.tsx`
- [Login](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/LoginPage.tsx): `src/pages/LoginPage.tsx`
- [Registration](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/SignupPage.tsx): `src/pages/SignupPage.tsx`
- [Account settings](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/SettingsPage.tsx): `src/pages/SettingsPage.tsx`

### Community

- [Social feed](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/HomeFeed.tsx): `src/pages/HomeFeed.tsx`
- [Create post](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/NewPostPage.tsx): `src/pages/NewPostPage.tsx`
- [User profile](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/ProfilePage.tsx): `src/pages/ProfilePage.tsx`
- [Notifications](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/NotificationsPage.tsx): `src/pages/NotificationsPage.tsx`
- [Notification state](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/utils/notifications.ts): `src/utils/notifications.ts`
- [Image compression](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/utils/imageCompressor.ts): `src/utils/imageCompressor.ts`

### Football services

- [Academy discovery](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/AcademiesPage.tsx): `src/pages/AcademiesPage.tsx`
- [Academy detail](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/AcademyDetailPage.tsx): `src/pages/AcademyDetailPage.tsx`
- [Bookings](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/BookingsPage.tsx): `src/pages/BookingsPage.tsx`
- [Admin dashboard](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/AdminDashboard.tsx): `src/pages/AdminDashboard.tsx`

### Commerce

- [Store](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/StorePage.tsx): `src/pages/StorePage.tsx`
- [Demo checkout](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/pages/DemoCheckoutPage.tsx): `src/pages/DemoCheckoutPage.tsx`
- [Payment API](https://github.com/rabonaapp-wq/rabona-football-community/blob/main/src/lib/paymentApi.ts): `src/lib/paymentApi.ts`

### Other components

- **App user**

## Connections

- App user → Page router: opens
- Page router → Authentication: checks session (evidence: `src/App.tsx`)
- Page router → Navigation: renders navigation (evidence: `src/App.tsx`)
- Page router → Social feed: routes to (evidence: `src/App.tsx`)
- Page router → Academy discovery: routes to (evidence: `src/App.tsx`)
- Page router → Academy detail: routes to (evidence: `src/App.tsx`)
- Page router → Bookings: routes to (evidence: `src/App.tsx`)
- Page router → User profile: routes to (evidence: `src/App.tsx`)
- Page router → Create post: routes to (evidence: `src/App.tsx`)
- Page router → Admin dashboard: routes to (evidence: `src/App.tsx`)
- Page router → Login: routes to (evidence: `src/App.tsx`)
- Page router → Registration: routes to (evidence: `src/App.tsx`)
- Page router → Account settings: routes to (evidence: `src/App.tsx`)
- Page router → Notifications: routes to (evidence: `src/App.tsx`)
- Page router → Store: routes to (evidence: `src/App.tsx`)
- Page router → Demo checkout: routes to (evidence: `src/App.tsx`)
- Authentication → Firebase clients: uses clients (evidence: `src/context/AuthContext.tsx`)
- Authentication → Firestore: reads profiles (evidence: `src/context/AuthContext.tsx`)
- Academy discovery → Firestore: lists academies (evidence: `src/pages/AcademiesPage.tsx`)
- Social feed → Firestore: reads and writes (evidence: `src/pages/HomeFeed.tsx`)
- Social feed → Image compression: compresses images (evidence: `src/pages/HomeFeed.tsx`)
- Create post → Image compression: compresses images (evidence: `src/pages/NewPostPage.tsx`)
- User profile → Image compression: compresses images (evidence: `src/pages/ProfilePage.tsx`)
- Navigation → Notification state: counts unread (evidence: `src/components/Navigation.tsx`)
- Notifications → Notification state: uses state (evidence: `src/pages/NotificationsPage.tsx`)
- Notification state → Store: reads order data (evidence: `src/utils/notifications.ts`)
- Academy detail → Payment API: requests payment (evidence: `src/pages/AcademyDetailPage.tsx`)
- Academy detail → Demo checkout: may navigate (evidence: `src/pages/AcademyDetailPage.tsx`)
- Social feed → Shared visual assets: renders icons (evidence: `src/pages/HomeFeed.tsx`)
- Academy discovery → Shared visual assets: renders icons (evidence: `src/pages/AcademiesPage.tsx`)