# tylersherrick/v4 architecture

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

- Interactive diagram: https://gitdiagram.com/tylersherrick/v4
- Repository: https://github.com/tylersherrick/v4

## Overview

V4 Sports is a multi-sport scores and statistics web app for MLB, college football, and NFL. Users browse games, open game details, explore teams and players, and search for players; NFL also exposes a prediction page. The backend serves sport-specific API routes and player-search services that retrieve data from ESPN. The sampled source confirms the application routing and player-search path; other component-to-API wiring is not shown, so those links are omitted.

Main entry points: [`client/src/App.jsx`](https://github.com/tylersherrick/v4/blob/main/client/src/App.jsx) (App routes), [`server/server.js`](https://github.com/tylersherrick/v4/blob/main/server/server.js) (Express API), [`server/routes/mlb`](https://github.com/tylersherrick/v4/tree/main/server/routes/mlb) (MLB API routes), [`server/routes/cfb`](https://github.com/tylersherrick/v4/tree/main/server/routes/cfb) (CFB API routes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web app"]
  node_app["App routes<br/>[App.jsx]"]
  node_home["Home and sports nav"]
  node_mlb_games["MLB games<br/>[MLBGames.jsx]"]
  node_mlb_game["MLB game details<br/>[MLBGamePage.jsx]"]
  node_mlb_team["MLB team views<br/>[MLBTeamPage.jsx]"]
  node_mlb_player["MLB player views<br/>[MLBPlayerPage.jsx]"]
  node_mlb_search["MLB player search"]
  node_cfb_games["CFB games<br/>[CFBGames.jsx]"]
  node_cfb_game["CFB game details<br/>[CFBGamePage.jsx]"]
  node_cfb_team["CFB team views<br/>[CFBTeamPage.jsx]"]
  node_cfb_player["CFB player views<br/>[CFBPlayerPage.jsx]"]
  node_cfb_search["CFB player search"]
  node_nfl_games["NFL games<br/>[NFLGames.jsx]"]
  node_nfl_game["NFL game details<br/>[NFLGamePage.jsx]"]
  node_nfl_team["NFL team views<br/>[NFLTeamPage.jsx]"]
  node_nfl_player["NFL player views<br/>[NFLPlayerPage.jsx]"]
  node_nfl_search["NFL player search"]
  node_prediction["NFL predictions"]
end

subgraph group_backend["API backend"]
  node_api["Express API<br/>[server.js]"]
end

subgraph group_sports["Sport data"]
  node_mlb_routes["MLB API routes"]
  node_cfb_routes["CFB API routes"]
  node_nfl_routes["NFL API routes"]
  node_mlb_search_service["MLB search service<br/>[playerSearch.js]"]
  node_cfb_search_service["CFB search service<br/>[playerSearch.js]"]
  node_nfl_search_service["NFL search service<br/>[playerSearch.js]"]
end

subgraph group_external["External data"]
  node_espn["ESPN APIs"]
end

node_user(("Sports fan"))

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_mlb_games
node_app -->|"routes to"| node_mlb_game
node_app -->|"routes to"| node_mlb_team
node_app -->|"routes to"| node_mlb_player
node_app -->|"routes to"| node_cfb_games
node_app -->|"routes to"| node_cfb_game
node_app -->|"routes to"| node_cfb_team
node_app -->|"routes to"| node_cfb_player
node_app -->|"routes to"| node_nfl_games
node_app -->|"routes to"| node_nfl_game
node_app -->|"routes to"| node_nfl_team
node_app -->|"routes to"| node_nfl_player
node_app -->|"routes to"| node_prediction
node_mlb_search -->|"requests search"| node_mlb_routes
node_cfb_search -->|"requests search"| node_cfb_routes
node_nfl_search -->|"requests search"| node_nfl_routes
node_api -->|"mounts"| node_mlb_routes
node_api -->|"mounts"| node_cfb_routes
node_api -->|"mounts"| node_nfl_routes
node_mlb_routes -->|"calls search"| node_mlb_search_service
node_cfb_routes -->|"calls search"| node_cfb_search_service
node_nfl_routes -->|"calls search"| node_nfl_search_service
node_mlb_search_service -->|"fetches players"| node_espn
node_cfb_search_service -->|"searches athletes"| node_espn
node_nfl_search_service -->|"searches athletes"| node_espn

click node_app "https://github.com/tylersherrick/v4/blob/main/client/src/App.jsx"
click node_home "https://github.com/tylersherrick/v4/tree/main/client/src/components/home"
click node_mlb_games "https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBGames.jsx"
click node_mlb_game "https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBGamePage.jsx"
click node_mlb_team "https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBTeamPage.jsx"
click node_mlb_player "https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBPlayerPage.jsx"
click node_mlb_search "https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBPlayerSearch.jsx"
click node_cfb_games "https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBGames.jsx"
click node_cfb_game "https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBGamePage.jsx"
click node_cfb_team "https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBTeamPage.jsx"
click node_cfb_player "https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBPlayerPage.jsx"
click node_cfb_search "https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBPlayerSearch.jsx"
click node_nfl_games "https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLGames.jsx"
click node_nfl_game "https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLGamePage.jsx"
click node_nfl_team "https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLTeamPage.jsx"
click node_nfl_player "https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLPlayerPage.jsx"
click node_nfl_search "https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLPlayerSearch.jsx"
click node_prediction "https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLPredictionPage.jsx"
click node_api "https://github.com/tylersherrick/v4/blob/main/server/server.js"
click node_mlb_routes "https://github.com/tylersherrick/v4/tree/main/server/routes/mlb"
click node_cfb_routes "https://github.com/tylersherrick/v4/tree/main/server/routes/cfb"
click node_nfl_routes "https://github.com/tylersherrick/v4/tree/main/server/routes/nfl"
click node_mlb_search_service "https://github.com/tylersherrick/v4/blob/main/server/services/mlb/playerSearch.js"
click node_cfb_search_service "https://github.com/tylersherrick/v4/blob/main/server/services/cfb/playerSearch.js"
click node_nfl_search_service "https://github.com/tylersherrick/v4/blob/main/server/services/nfl/playerSearch.js"

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_home,node_mlb_games,node_mlb_game,node_mlb_team,node_mlb_player,node_mlb_search,node_cfb_games,node_cfb_game,node_cfb_team,node_cfb_player,node_cfb_search,node_nfl_games,node_nfl_game,node_nfl_team,node_nfl_player,node_nfl_search,node_prediction toneBlue
class node_api toneAmber
class node_mlb_routes,node_cfb_routes,node_nfl_routes,node_mlb_search_service,node_cfb_search_service,node_nfl_search_service toneMint
class node_espn toneRose
class node_user toneIndigo
```

## Components

### Web app

- [App routes](https://github.com/tylersherrick/v4/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Home and sports nav](https://github.com/tylersherrick/v4/tree/main/client/src/components/home): `client/src/components/home`
- [MLB games](https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBGames.jsx): `client/src/components/mlb/MLBGames.jsx`
- [MLB game details](https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBGamePage.jsx): `client/src/components/mlb/MLBGamePage.jsx`
- [MLB team views](https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBTeamPage.jsx): `client/src/components/mlb/MLBTeamPage.jsx`
- [MLB player views](https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBPlayerPage.jsx): `client/src/components/mlb/MLBPlayerPage.jsx`
- [MLB player search](https://github.com/tylersherrick/v4/blob/main/client/src/components/mlb/MLBPlayerSearch.jsx): `client/src/components/mlb/MLBPlayerSearch.jsx`
- [CFB games](https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBGames.jsx): `client/src/components/cfb/CFBGames.jsx`
- [CFB game details](https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBGamePage.jsx): `client/src/components/cfb/CFBGamePage.jsx`
- [CFB team views](https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBTeamPage.jsx): `client/src/components/cfb/CFBTeamPage.jsx`
- [CFB player views](https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBPlayerPage.jsx): `client/src/components/cfb/CFBPlayerPage.jsx`
- [CFB player search](https://github.com/tylersherrick/v4/blob/main/client/src/components/cfb/CFBPlayerSearch.jsx): `client/src/components/cfb/CFBPlayerSearch.jsx`
- [NFL games](https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLGames.jsx): `client/src/components/nfl/NFLGames.jsx`
- [NFL game details](https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLGamePage.jsx): `client/src/components/nfl/NFLGamePage.jsx`
- [NFL team views](https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLTeamPage.jsx): `client/src/components/nfl/NFLTeamPage.jsx`
- [NFL player views](https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLPlayerPage.jsx): `client/src/components/nfl/NFLPlayerPage.jsx`
- [NFL player search](https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLPlayerSearch.jsx): `client/src/components/nfl/NFLPlayerSearch.jsx`
- [NFL predictions](https://github.com/tylersherrick/v4/blob/main/client/src/components/nfl/NFLPredictionPage.jsx): `client/src/components/nfl/NFLPredictionPage.jsx`

### API backend

- [Express API](https://github.com/tylersherrick/v4/blob/main/server/server.js): `server/server.js`

### Sport data

- [MLB API routes](https://github.com/tylersherrick/v4/tree/main/server/routes/mlb): `server/routes/mlb`
- [CFB API routes](https://github.com/tylersherrick/v4/tree/main/server/routes/cfb): `server/routes/cfb`
- [NFL API routes](https://github.com/tylersherrick/v4/tree/main/server/routes/nfl): `server/routes/nfl`
- [MLB search service](https://github.com/tylersherrick/v4/blob/main/server/services/mlb/playerSearch.js): `server/services/mlb/playerSearch.js`
- [CFB search service](https://github.com/tylersherrick/v4/blob/main/server/services/cfb/playerSearch.js): `server/services/cfb/playerSearch.js`
- [NFL search service](https://github.com/tylersherrick/v4/blob/main/server/services/nfl/playerSearch.js): `server/services/nfl/playerSearch.js`

### External data

- **ESPN APIs**

### Other components

- **Sports fan**

## Connections

- Sports fan → App routes: opens
- App routes → Home and sports nav: routes to
- App routes → MLB games: routes to
- App routes → MLB game details: routes to
- App routes → MLB team views: routes to
- App routes → MLB player views: routes to
- App routes → CFB games: routes to
- App routes → CFB game details: routes to
- App routes → CFB team views: routes to
- App routes → CFB player views: routes to
- App routes → NFL games: routes to
- App routes → NFL game details: routes to
- App routes → NFL team views: routes to
- App routes → NFL player views: routes to
- App routes → NFL predictions: routes to
- MLB player search → MLB API routes: requests search
- CFB player search → CFB API routes: requests search
- NFL player search → NFL API routes: requests search
- Express API → MLB API routes: mounts
- Express API → CFB API routes: mounts
- Express API → NFL API routes: mounts
- MLB API routes → MLB search service: calls search
- CFB API routes → CFB search service: calls search
- NFL API routes → NFL search service: calls search
- MLB search service → ESPN APIs: fetches players
- CFB search service → ESPN APIs: searches athletes
- NFL search service → ESPN APIs: searches athletes