# yixunli-dev/twitch-resource-web-app architecture

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

- Interactive diagram: https://gitdiagram.com/yixunli-dev/twitch-resource-web-app
- Repository: https://github.com/yixunli-dev/twitch-resource-web-app

## Overview

This is a React/Spring Boot app for discovering Twitch streams, videos, and clips, saving favorites, and getting behavior-based recommendations. Users browse popular games or search, the frontend requests grouped content, and authenticated users can manage favorites or request recommendations. Backend services retrieve Twitch data, convert it to app item records, and persist user and favorite state. The README documents the frontend/backend/database architecture; source-index references support the shown internal calls. Some HTTP routing and external API details were not excerpted, so those links are marked unverified.

Main entry points: [`Frontend/src/utils.js`](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Frontend/src/utils.js) (API requests), [`Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteService.java`](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteService.java) (Favorite service), [`Backend/src/main/java/com/laioffer/twitch/external/TwitchService.java`](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/external/TwitchService.java) (Twitch data service), [`Backend/src/main/java/com/laioffer/twitch/item/ItemService.java`](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/item/ItemService.java) (Item search)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Web client"]
  node_app["App state<br/>[App.js]"]
  node_http["API requests<br/>[utils.js]"]
end

subgraph group_content["Twitch content"]
  node_game_api["Game endpoints"]
  node_item_api["Search endpoint"]
  node_item_service["Item search<br/>[ItemService.java]"]
  node_twitch_service["Twitch data service<br/>[TwitchService.java]"]
  node_twitch_client["Twitch API client"]
  node_grouped_items["Grouped item mapping"]
end

subgraph group_account["Accounts and discovery"]
  node_auth_api["User endpoints"]
  node_user_service["User service<br/>[UserService.java]"]
  node_favorite_api["Favorite endpoints"]
  node_favorite_service["Favorite service"]
  node_recommend_api["Recommendation endpoint"]
  node_recommend_service["Recommendation logic"]
end

subgraph group_data["Persistence"]
  node_users_repo[("User repository")]
  node_items_repo[("Item repository")]
  node_favorites_repo[("Favorite repository")]
end

node_visitor(("User"))
node_twitch{{"Twitch API"}}
node_mysql[("MySQL database")]

node_visitor -->|"uses"| node_app
node_app -->|"requests data"| node_http
node_http -.->|"calls game routes"| node_game_api
node_http -.->|"calls search route"| node_item_api
node_http -.->|"calls account routes"| node_auth_api
node_http -.->|"calls favorite route"| node_favorite_api
node_http -.->|"calls recommendation"| node_recommend_api
node_game_api -->|"calls"| node_twitch_service
node_item_api -->|"calls"| node_item_service
node_item_service -->|"fetches content"| node_twitch_service
node_item_service -->|"groups results"| node_grouped_items
node_twitch_service -->|"delegates requests"| node_twitch_client
node_twitch_client -.->|"requests content"| node_twitch
node_auth_api -->|"calls"| node_user_service
node_user_service -->|"reads and updates"| node_users_repo
node_favorite_api -->|"calls"| node_favorite_service
node_favorite_service -->|"reads and saves items"| node_items_repo
node_favorite_service -->|"reads and writes records"| node_favorites_repo
node_recommend_api -->|"calls"| node_recommend_service
node_recommend_service -->|"loads user favorites"| node_favorite_service
node_recommend_service -->|"fetches suggestions"| node_twitch_service
node_mysql -->|"stores records"| node_users_repo
node_mysql -->|"stores records"| node_items_repo
node_mysql -->|"stores records"| node_favorites_repo

click node_app "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Frontend/src/App.js"
click node_http "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Frontend/src/utils.js"
click node_game_api "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/external/GameController.java"
click node_item_api "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/item/ItemController.java"
click node_item_service "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/item/ItemService.java"
click node_twitch_service "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/external/TwitchService.java"
click node_twitch_client "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/external/TwitchApiClient.java"
click node_grouped_items "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/model/TypeGroupedItemList.java"
click node_auth_api "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/user/UserController.java"
click node_user_service "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/user/UserService.java"
click node_favorite_api "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteController.java"
click node_favorite_service "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteService.java"
click node_recommend_api "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationController.java"
click node_recommend_service "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationService.java"
click node_users_repo "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/db/UserRepository.java"
click node_items_repo "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/db/ItemRepository.java"
click node_favorites_repo "https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/db/FavoriteRecordRepository.java"

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_http,node_visitor toneBlue
class node_game_api,node_item_api,node_item_service,node_twitch_service,node_twitch_client,node_grouped_items,node_mysql toneAmber
class node_auth_api,node_user_service,node_favorite_api,node_favorite_service,node_recommend_api,node_recommend_service,node_twitch toneMint
class node_users_repo,node_items_repo,node_favorites_repo toneRose
```

## Components

### Web client

- [App state](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Frontend/src/App.js): `Frontend/src/App.js`
- [API requests](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Frontend/src/utils.js): `Frontend/src/utils.js`

### Twitch content

- [Game endpoints](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/external/GameController.java): `Backend/src/main/java/com/laioffer/twitch/external/GameController.java`
- [Search endpoint](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/item/ItemController.java): `Backend/src/main/java/com/laioffer/twitch/item/ItemController.java`
- [Item search](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/item/ItemService.java): `Backend/src/main/java/com/laioffer/twitch/item/ItemService.java`
- [Twitch data service](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/external/TwitchService.java): `Backend/src/main/java/com/laioffer/twitch/external/TwitchService.java`
- [Twitch API client](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/external/TwitchApiClient.java): `Backend/src/main/java/com/laioffer/twitch/external/TwitchApiClient.java`
- [Grouped item mapping](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/model/TypeGroupedItemList.java): `Backend/src/main/java/com/laioffer/twitch/model/TypeGroupedItemList.java`

### Accounts and discovery

- [User endpoints](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/user/UserController.java): `Backend/src/main/java/com/laioffer/twitch/user/UserController.java`
- [User service](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/user/UserService.java): `Backend/src/main/java/com/laioffer/twitch/user/UserService.java`
- [Favorite endpoints](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteController.java): `Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteController.java`
- [Favorite service](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteService.java): `Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteService.java`
- [Recommendation endpoint](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationController.java): `Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationController.java`
- [Recommendation logic](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationService.java): `Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationService.java`

### Persistence

- [User repository](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/db/UserRepository.java): `Backend/src/main/java/com/laioffer/twitch/db/UserRepository.java`
- [Item repository](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/db/ItemRepository.java): `Backend/src/main/java/com/laioffer/twitch/db/ItemRepository.java`
- [Favorite repository](https://github.com/yixunli-dev/twitch-resource-web-app/blob/main/Backend/src/main/java/com/laioffer/twitch/db/FavoriteRecordRepository.java): `Backend/src/main/java/com/laioffer/twitch/db/FavoriteRecordRepository.java`

### Other components

- **User**
- **Twitch API**
- **MySQL database**

## Connections

- User → App state: uses
- App state → API requests: requests data (evidence: `Frontend/src/App.js`)
- API requests → Game endpoints: calls game routes
- API requests → Search endpoint: calls search route
- API requests → User endpoints: calls account routes
- API requests → Favorite endpoints: calls favorite route
- API requests → Recommendation endpoint: calls recommendation
- Game endpoints → Twitch data service: calls (evidence: `Backend/src/main/java/com/laioffer/twitch/external/GameController.java`)
- Search endpoint → Item search: calls (evidence: `Backend/src/main/java/com/laioffer/twitch/item/ItemController.java`)
- Item search → Twitch data service: fetches content (evidence: `Backend/src/main/java/com/laioffer/twitch/item/ItemService.java`)
- Item search → Grouped item mapping: groups results (evidence: `Backend/src/main/java/com/laioffer/twitch/item/ItemService.java`)
- Twitch data service → Twitch API client: delegates requests (evidence: `Backend/src/main/java/com/laioffer/twitch/external/TwitchService.java`)
- Twitch API client → Twitch API: requests content
- User endpoints → User service: calls (evidence: `Backend/src/main/java/com/laioffer/twitch/user/UserController.java`)
- User service → User repository: reads and updates (evidence: `Backend/src/main/java/com/laioffer/twitch/user/UserService.java`)
- Favorite endpoints → Favorite service: calls (evidence: `Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteController.java`)
- Favorite service → Item repository: reads and saves items (evidence: `Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteService.java`)
- Favorite service → Favorite repository: reads and writes records (evidence: `Backend/src/main/java/com/laioffer/twitch/favorite/FavoriteService.java`)
- Recommendation endpoint → Recommendation logic: calls (evidence: `Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationController.java`)
- Recommendation logic → Favorite service: loads user favorites (evidence: `Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationService.java`)
- Recommendation logic → Twitch data service: fetches suggestions (evidence: `Backend/src/main/java/com/laioffer/twitch/recommendation/RecommendationService.java`)
- MySQL database → User repository: stores records
- MySQL database → Item repository: stores records
- MySQL database → Favorite repository: stores records