# lopes256/copa2026 architecture

> Architecture diagram of the GitHub repository lopes256/copa2026, 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/lopes256/copa2026
- Repository: https://github.com/lopes256/copa2026

## Overview

Copa2026 is a World Cup match-management application: users review group fixtures and standings, enter or reset scores, then follow qualification into the knockout rounds and bracket. The React App coordinates API loading and score updates, while the backend exposes team, match, and standings endpoints backed by a database. Knockout qualification and round advancement are computed in frontend domain logic. The README describes only a Vite template; feature scope is inferred from the sampled source and repository tree, so unsampled route behavior is not expanded.

Main entry points: [`src/App.tsx`](https://github.com/lopes256/copa2026/blob/main/src/App.tsx) (App Coordinator), [`backend/src/server.ts`](https://github.com/lopes256/copa2026/blob/main/backend/src/server.ts) (Express Server), [`src/components/GroupStage.tsx`](https://github.com/lopes256/copa2026/blob/main/src/components/GroupStage.tsx) (Group Stage View), [`backend/src/db.ts`](https://github.com/lopes256/copa2026/blob/main/backend/src/db.ts) (Database Client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend"]
  node_entry["React Entry<br/>[main.tsx]"]
  node_app["App Coordinator<br/>[App.tsx]"]
  node_api["API Client<br/>[index.ts]"]
  node_header["Header<br/>[Header.tsx]"]
  node_groups_view["Group Stage View<br/>[GroupStage.tsx]"]
  node_match_card["Match Card<br/>[MatchCard.tsx]"]
  node_knockout_view["Knockout View<br/>[KnockoutStage.tsx]"]
  node_bracket["Bracket View<br/>[Bracket.tsx]"]
end

subgraph group_domain["Tournament Logic"]
  node_match_data["Fixture Data<br/>[matches.ts]"]
  node_teams_data["Team Data<br/>[teams.ts]"]
  node_standings_logic["Standings and Advancement<br/>[standings.ts]"]
  node_types["Tournament Types<br/>[index.ts]"]
end

subgraph group_backend["Backend API"]
  node_server["Express Server<br/>[server.ts]"]
  node_teams_route["Teams Endpoint<br/>[teams.ts]"]
  node_matches_route["Matches Endpoint<br/>[matches.ts]"]
  node_standings_route["Standings Endpoint<br/>[standings.ts]"]
end

subgraph group_persistence["Persistence"]
  node_db_client["Database Client<br/>[db.ts]"]
  node_database[("Tournament Database")]
end

node_user(("Tournament Manager"))

node_user -->|"uses"| node_app
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_header
node_app -->|"loads and updates"| node_api
node_api -->|"HTTP requests"| node_server
node_server -->|"dispatches"| node_teams_route
node_server -->|"dispatches"| node_matches_route
node_server -->|"dispatches"| node_standings_route
node_teams_route -->|"queries"| node_db_client
node_matches_route -->|"queries and updates"| node_db_client
node_standings_route -->|"queries"| node_db_client
node_db_client -->|"reads and writes"| node_database
node_app -->|"renders"| node_groups_view
node_app -->|"renders"| node_knockout_view
node_app -->|"renders"| node_bracket
node_groups_view -->|"renders"| node_match_card
node_groups_view -->|"reads"| node_teams_data
node_knockout_view -->|"reads"| node_teams_data
node_app -->|"calculates and advances"| node_standings_logic
node_app -->|"passes matches and standings"| node_groups_view
node_app -->|"passes knockout matches"| node_knockout_view
node_app -->|"passes computed bracket"| node_bracket

click node_entry "https://github.com/lopes256/copa2026/blob/main/src/main.tsx"
click node_app "https://github.com/lopes256/copa2026/blob/main/src/App.tsx"
click node_api "https://github.com/lopes256/copa2026/blob/main/src/api/index.ts"
click node_header "https://github.com/lopes256/copa2026/blob/main/src/components/Header.tsx"
click node_groups_view "https://github.com/lopes256/copa2026/blob/main/src/components/GroupStage.tsx"
click node_match_card "https://github.com/lopes256/copa2026/blob/main/src/components/MatchCard.tsx"
click node_knockout_view "https://github.com/lopes256/copa2026/blob/main/src/components/KnockoutStage.tsx"
click node_bracket "https://github.com/lopes256/copa2026/blob/main/src/components/Bracket.tsx"
click node_match_data "https://github.com/lopes256/copa2026/blob/main/src/data/matches.ts"
click node_teams_data "https://github.com/lopes256/copa2026/blob/main/src/data/teams.ts"
click node_standings_logic "https://github.com/lopes256/copa2026/blob/main/src/data/standings.ts"
click node_types "https://github.com/lopes256/copa2026/blob/main/src/types/index.ts"
click node_server "https://github.com/lopes256/copa2026/blob/main/backend/src/server.ts"
click node_teams_route "https://github.com/lopes256/copa2026/blob/main/backend/src/routes/teams.ts"
click node_matches_route "https://github.com/lopes256/copa2026/blob/main/backend/src/routes/matches.ts"
click node_standings_route "https://github.com/lopes256/copa2026/blob/main/backend/src/routes/standings.ts"
click node_db_client "https://github.com/lopes256/copa2026/blob/main/backend/src/db.ts"

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_entry,node_app,node_api,node_header,node_groups_view,node_match_card,node_knockout_view,node_bracket toneBlue
class node_match_data,node_teams_data,node_standings_logic,node_types toneAmber
class node_server,node_teams_route,node_matches_route,node_standings_route toneMint
class node_db_client,node_database toneRose
class node_user toneIndigo
```

## Components

### Frontend

- [React Entry](https://github.com/lopes256/copa2026/blob/main/src/main.tsx): `src/main.tsx`
- [App Coordinator](https://github.com/lopes256/copa2026/blob/main/src/App.tsx): `src/App.tsx`
- [API Client](https://github.com/lopes256/copa2026/blob/main/src/api/index.ts): `src/api/index.ts`
- [Header](https://github.com/lopes256/copa2026/blob/main/src/components/Header.tsx): `src/components/Header.tsx`
- [Group Stage View](https://github.com/lopes256/copa2026/blob/main/src/components/GroupStage.tsx): `src/components/GroupStage.tsx`
- [Match Card](https://github.com/lopes256/copa2026/blob/main/src/components/MatchCard.tsx): `src/components/MatchCard.tsx`
- [Knockout View](https://github.com/lopes256/copa2026/blob/main/src/components/KnockoutStage.tsx): `src/components/KnockoutStage.tsx`
- [Bracket View](https://github.com/lopes256/copa2026/blob/main/src/components/Bracket.tsx): `src/components/Bracket.tsx`

### Tournament Logic

- [Fixture Data](https://github.com/lopes256/copa2026/blob/main/src/data/matches.ts): `src/data/matches.ts`
- [Team Data](https://github.com/lopes256/copa2026/blob/main/src/data/teams.ts): `src/data/teams.ts`
- [Standings and Advancement](https://github.com/lopes256/copa2026/blob/main/src/data/standings.ts): `src/data/standings.ts`
- [Tournament Types](https://github.com/lopes256/copa2026/blob/main/src/types/index.ts): `src/types/index.ts`

### Backend API

- [Express Server](https://github.com/lopes256/copa2026/blob/main/backend/src/server.ts): `backend/src/server.ts`
- [Teams Endpoint](https://github.com/lopes256/copa2026/blob/main/backend/src/routes/teams.ts): `backend/src/routes/teams.ts`
- [Matches Endpoint](https://github.com/lopes256/copa2026/blob/main/backend/src/routes/matches.ts): `backend/src/routes/matches.ts`
- [Standings Endpoint](https://github.com/lopes256/copa2026/blob/main/backend/src/routes/standings.ts): `backend/src/routes/standings.ts`

### Persistence

- [Database Client](https://github.com/lopes256/copa2026/blob/main/backend/src/db.ts): `backend/src/db.ts`
- **Tournament Database**

### Other components

- **Tournament Manager**

## Connections

- Tournament Manager → App Coordinator: uses
- React Entry → App Coordinator: renders
- App Coordinator → Header: renders
- App Coordinator → API Client: loads and updates
- API Client → Express Server: HTTP requests
- Express Server → Teams Endpoint: dispatches
- Express Server → Matches Endpoint: dispatches
- Express Server → Standings Endpoint: dispatches
- Teams Endpoint → Database Client: queries
- Matches Endpoint → Database Client: queries and updates
- Standings Endpoint → Database Client: queries
- Database Client → Tournament Database: reads and writes
- App Coordinator → Group Stage View: renders
- App Coordinator → Knockout View: renders
- App Coordinator → Bracket View: renders
- Group Stage View → Match Card: renders
- Group Stage View → Team Data: reads
- Knockout View → Team Data: reads
- App Coordinator → Standings and Advancement: calculates and advances
- App Coordinator → Group Stage View: passes matches and standings
- App Coordinator → Knockout View: passes knockout matches
- App Coordinator → Bracket View: passes computed bracket