# omkarh20/playscout_v2 architecture

> Architecture diagram of the GitHub repository omkarh20/playscout_v2, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/omkarh20/playscout_v2
- Repository: https://github.com/omkarh20/playscout_v2

## Overview

PlayScout’s frontend supports the user journey from discovering venues and players through booking facilities, organizing games, and managing participation, with account, chat, news, payment, and administration capabilities alongside it. The sampled source confirms routing, shared venue/game loading, authentication, game creation, booking/payment actions, chat transport, profile updates, and administrative requests. Other feature links are documented in the README, but their frontend wiring was not sampled; those connections are shown only where the product-level interaction is clear.

Main entry points: [`frontend/src/App.jsx`](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/App.jsx) (React app and routes), [`frontend/src/context/StoreContext.jsx`](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/context/StoreContext.jsx) (Shared client state), [`frontend/src/pages/Chat/Chat.jsx`](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Chat/Chat.jsx) (Real-time chat), [`frontend/src/pages/Upcoming/Upcoming.jsx`](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Upcoming/Upcoming.jsx) (Upcoming activity)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["React app and routes<br/>[App.jsx]"]
  node_store["Shared client state<br/>[StoreContext.jsx]"]
end

subgraph group_discovery["Discovery and games"]
  node_venues["Venue discovery<br/>[Home.jsx]"]
  node_venue_detail["Venue details<br/>[Facility.jsx]"]
  node_games["Game discovery<br/>[Meet.jsx]"]
  node_create_game["Create game<br/>[CreateGame.jsx]"]
  node_players["Player discovery<br/>[Meet.jsx]"]
  node_news["Sports news<br/>[News.jsx]"]
end

subgraph group_account["Accounts and communication"]
  node_auth["Sign-in and registration<br/>[LoginPopup.jsx]"]
  node_oauth["OAuth completion<br/>[OAuthSuccess.jsx]"]
  node_profile["Profile management<br/>[Profile.jsx]"]
  node_chat["Real-time chat<br/>[Chat.jsx]"]
end

subgraph group_operations["Bookings and operations"]
  node_booking["Facility booking<br/>[Booking.jsx]"]
  node_upcoming["Upcoming activity<br/>[Upcoming.jsx]"]
  node_payments["Payment history and outcomes<br/>[PaymentHistory.jsx]"]
  node_facility_admin["Venue management"]
  node_admin["Platform administration<br/>[Admin.jsx]"]
end

node_visitor(("Sports enthusiast"))
node_backend["PlayScout backend"]
node_messages["Messaging service"]
node_news_api["GNews API"]
node_payment_provider["Payment provider"]

node_visitor -->|"uses"| node_app
node_app -->|"routes to"| node_venues
node_app -->|"routes to"| node_venue_detail
node_app -->|"routes to"| node_games
node_app -->|"routes to"| node_booking
node_app -->|"routes to"| node_upcoming
node_app -->|"routes to"| node_chat
node_app -->|"routes to"| node_news
node_app -->|"shows"| node_auth
node_app -->|"routes to"| node_profile
node_app -->|"routes to"| node_facility_admin
node_app -->|"routes to"| node_admin
node_store -->|"fetches venues and games"| node_backend
node_venues -->|"uses shared data"| node_store
node_games -->|"uses shared data"| node_store
node_create_game -->|"creates game"| node_backend
node_create_game -->|"refreshes games"| node_store
node_auth -->|"authenticates"| node_backend
node_oauth -->|"completes sign-in"| node_app
node_profile -->|"reads and updates"| node_backend
node_chat -->|"loads and sends messages"| node_backend
node_chat -->|"connects by WebSocket"| node_messages
node_news -.->|"fetches news"| node_news_api
node_booking -->|"checks and reserves"| node_backend
node_upcoming -->|"loads and cancels"| node_backend
node_upcoming -->|"starts checkout"| node_payment_provider
node_payments -->|"loads payment history"| node_backend
node_facility_admin -->|"manages venues"| node_backend
node_admin -->|"manages platform"| node_backend

click node_app "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/App.jsx"
click node_store "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/context/StoreContext.jsx"
click node_venues "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Home/Home.jsx"
click node_venue_detail "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Facility/Facility.jsx"
click node_games "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Meet/Meet.jsx"
click node_create_game "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/components/CreateGame/CreateGame.jsx"
click node_players "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Meet/Meet.jsx"
click node_auth "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/components/LoginPopup/LoginPopup.jsx"
click node_oauth "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/OAuthSuccess/OAuthSuccess.jsx"
click node_profile "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Profile/Profile.jsx"
click node_chat "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Chat/Chat.jsx"
click node_news "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/News/News.jsx"
click node_booking "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Booking/Booking.jsx"
click node_upcoming "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Upcoming/Upcoming.jsx"
click node_payments "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/PaymentHistory/PaymentHistory.jsx"
click node_facility_admin "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/FacilityManagement/FacilityManagement.jsx"
click node_admin "https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Admin/Admin.jsx"

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_store toneBlue
class node_venues,node_venue_detail,node_games,node_create_game,node_players,node_news toneAmber
class node_auth,node_oauth,node_profile,node_chat,node_news_api toneMint
class node_booking,node_upcoming,node_payments,node_facility_admin,node_admin toneRose
class node_visitor,node_backend,node_messages,node_payment_provider toneIndigo
```

## Components

### Application shell

- [React app and routes](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Shared client state](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/context/StoreContext.jsx): `frontend/src/context/StoreContext.jsx`

### Discovery and games

- [Venue discovery](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Home/Home.jsx): `frontend/src/pages/Home/Home.jsx`
- [Venue details](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Facility/Facility.jsx): `frontend/src/pages/Facility/Facility.jsx`
- [Game discovery](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Meet/Meet.jsx): `frontend/src/pages/Meet/Meet.jsx`
- [Create game](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/components/CreateGame/CreateGame.jsx): `frontend/src/components/CreateGame/CreateGame.jsx`
- [Player discovery](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Meet/Meet.jsx): `frontend/src/pages/Meet/Meet.jsx`
- [Sports news](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/News/News.jsx): `frontend/src/pages/News/News.jsx`

### Accounts and communication

- [Sign-in and registration](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/components/LoginPopup/LoginPopup.jsx): `frontend/src/components/LoginPopup/LoginPopup.jsx`
- [OAuth completion](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/OAuthSuccess/OAuthSuccess.jsx): `frontend/src/pages/OAuthSuccess/OAuthSuccess.jsx`
- [Profile management](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Profile/Profile.jsx): `frontend/src/pages/Profile/Profile.jsx`
- [Real-time chat](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Chat/Chat.jsx): `frontend/src/pages/Chat/Chat.jsx`

### Bookings and operations

- [Facility booking](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Booking/Booking.jsx): `frontend/src/pages/Booking/Booking.jsx`
- [Upcoming activity](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Upcoming/Upcoming.jsx): `frontend/src/pages/Upcoming/Upcoming.jsx`
- [Payment history and outcomes](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/PaymentHistory/PaymentHistory.jsx): `frontend/src/pages/PaymentHistory/PaymentHistory.jsx`
- [Venue management](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/FacilityManagement/FacilityManagement.jsx): `frontend/src/pages/FacilityManagement/FacilityManagement.jsx`
- [Platform administration](https://github.com/omkarh20/playscout_v2/blob/main/frontend/src/pages/Admin/Admin.jsx): `frontend/src/pages/Admin/Admin.jsx`

### Other components

- **Sports enthusiast**
- **PlayScout backend**
- **Messaging service**
- **GNews API**
- **Payment provider**

## Connections

- Sports enthusiast → React app and routes: uses
- React app and routes → Venue discovery: routes to
- React app and routes → Venue details: routes to
- React app and routes → Game discovery: routes to
- React app and routes → Facility booking: routes to
- React app and routes → Upcoming activity: routes to
- React app and routes → Real-time chat: routes to
- React app and routes → Sports news: routes to
- React app and routes → Sign-in and registration: shows
- React app and routes → Profile management: routes to
- React app and routes → Venue management: routes to
- React app and routes → Platform administration: routes to
- Shared client state → PlayScout backend: fetches venues and games
- Venue discovery → Shared client state: uses shared data
- Game discovery → Shared client state: uses shared data
- Create game → PlayScout backend: creates game
- Create game → Shared client state: refreshes games
- Sign-in and registration → PlayScout backend: authenticates
- OAuth completion → React app and routes: completes sign-in
- Profile management → PlayScout backend: reads and updates
- Real-time chat → PlayScout backend: loads and sends messages
- Real-time chat → Messaging service: connects by WebSocket
- Sports news → GNews API: fetches news
- Facility booking → PlayScout backend: checks and reserves
- Upcoming activity → PlayScout backend: loads and cancels
- Upcoming activity → Payment provider: starts checkout
- Payment history and outcomes → PlayScout backend: loads payment history
- Venue management → PlayScout backend: manages venues
- Platform administration → PlayScout backend: manages platform