# mrcellsbst/tierlistjkt48-bckp architecture

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

## Overview

Tierlist JKT48 is a React fan-utility web app. Users enter through the home/tools/game pages, choose a utility, work with JKT48-specific catalogs or game state, and save or export results. The principal ranking workflow is routed by App to the combined tierlist, which uses shared tier controls and category datasets; the README documents additional ranking categories and export/autosave capabilities not fully sampled. The browser extension separately collects point-history data and syncs it to the site. Some feature internals were not sampled, so uncertain wiring is omitted.

Main entry points: [`src/App.jsx`](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/App.jsx) (Route dispatcher), [`src/Tierlist_Combined.jsx`](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Tierlist_Combined.jsx) (Tierlist maker), [`public/extension/content.js`](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/content.js) (Page sync panel), [`public/extension/popup.js`](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/popup.js) (History exporter)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Route dispatcher<br/>[App.jsx]"]
  node_home["Home and tools<br/>[Homepage.jsx]"]
end

subgraph group_ranking["Tierlist workflows"]
  node_tierpage["Tierlist maker"]
  node_tiercontrols["Tier controls<br/>[TierlistShared.jsx]"]
  node_memberdata["Member catalog<br/>[memberData.js]"]
  node_setlistsongs["Setlist songs<br/>[setlistSongs.js]"]
  node_setlistdata["Setlist catalog<br/>[SetlistData.js]"]
  node_specialdata["Special show catalog<br/>[specialshowData.js]"]
  node_spvdata["MV and SPV catalog<br/>[spv_mv.js]"]
end

subgraph group_planning["Planning and analysis"]
  node_dream["Dream setlist builder<br/>[Dream_Setlist.jsx]"]
  node_dreamsongs["Dream song catalog"]
  node_calculator["Wishlist calculator<br/>[Calculator.jsx]"]
  node_prices["Wishlist price catalog"]
  node_pointspage["Point history analytics<br/>[PointHistory.jsx]"]
  node_pointdata["Point history config"]
end

subgraph group_games["Games and collection"]
  node_roulette["Roulette utility<br/>[roulette.jsx]"]
  node_gacha["Gacha collection<br/>[Gacha.jsx]"]
  node_gachadata["Gacha cards<br/>[gachaCards.js]"]
  node_guess["Guess Who game<br/>[GuessWho.jsx]"]
  node_multiplayer{{"Playroom service"}}
  node_mobile["Mobile tierlist"]
end

subgraph group_points["Points history sync"]
  node_extension["History exporter<br/>[popup.js]"]
  node_content["Page sync panel<br/>[content.js]"]
  node_background["Extension background<br/>[background.js]"]
  node_chrome[("Browser storage")]
  node_jkt{{"JKT48 account site"}}
end

node_user(("Fan user"))

node_user -->|"opens"| node_app
node_app -->|"routes to"| node_home
node_home -->|"chooses route"| node_app
node_app -->|"routes to"| node_tierpage
node_app -->|"routes to"| node_dream
node_app -->|"routes to"| node_calculator
node_app -->|"routes to"| node_pointspage
node_app -->|"routes to"| node_roulette
node_app -->|"routes to"| node_gacha
node_app -->|"routes to"| node_guess
node_app -->|"routes to"| node_mobile
node_tierpage -->|"uses"| node_tiercontrols
node_tierpage -->|"loads"| node_memberdata
node_tierpage -->|"loads"| node_setlistdata
node_tierpage -->|"loads"| node_setlistsongs
node_tierpage -->|"loads"| node_specialdata
node_tierpage -->|"loads"| node_spvdata
node_dream -->|"loads"| node_dreamsongs
node_calculator -->|"loads"| node_prices
node_pointspage -->|"loads"| node_pointdata
node_gacha -->|"loads"| node_gachadata
node_guess -.->|"shares game state"| node_multiplayer
node_extension -->|"fetches history"| node_jkt
node_jkt -->|"returns records"| node_extension
node_extension -->|"stores history"| node_chrome
node_content -->|"reads history"| node_chrome
node_content -->|"sends export request"| node_background
node_background -->|"requests history"| node_jkt
node_content -.->|"syncs browser data"| node_pointspage

click node_app "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/App.jsx"
click node_home "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Homepage.jsx"
click node_tierpage "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Tierlist_Combined.jsx"
click node_tiercontrols "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/components/TierlistShared.jsx"
click node_memberdata "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/memberData.js"
click node_setlistsongs "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/setlistSongs.js"
click node_setlistdata "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/SetlistData.js"
click node_specialdata "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/specialshowData.js"
click node_spvdata "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/spv_mv.js"
click node_dream "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Dream_Setlist.jsx"
click node_dreamsongs "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/DreamSetlist_Songs.js"
click node_calculator "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Calculator.jsx"
click node_prices "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/wishlistpriceData.js"
click node_pointspage "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/PointHistory.jsx"
click node_pointdata "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/PointHistoryData.js"
click node_roulette "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/roulette.jsx"
click node_gacha "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Gacha.jsx"
click node_gachadata "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/gachaCards.js"
click node_guess "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/GuessWho.jsx"
click node_extension "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/popup.js"
click node_content "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/content.js"
click node_background "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/background.js"
click node_mobile "https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Mobile_Tierlist.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_home,node_user toneBlue
class node_tierpage,node_tiercontrols,node_memberdata,node_setlistsongs,node_setlistdata,node_specialdata,node_spvdata toneAmber
class node_dream,node_dreamsongs,node_calculator,node_prices,node_pointspage,node_pointdata toneMint
class node_roulette,node_gacha,node_gachadata,node_guess,node_multiplayer,node_mobile toneRose
class node_extension,node_content,node_background,node_chrome,node_jkt toneIndigo
```

## Components

### App navigation

- [Route dispatcher](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/App.jsx): `src/App.jsx`
- [Home and tools](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Homepage.jsx): `src/Homepage.jsx`

### Tierlist workflows

- [Tierlist maker](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Tierlist_Combined.jsx): `src/Tierlist_Combined.jsx`
- [Tier controls](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/components/TierlistShared.jsx): `src/components/TierlistShared.jsx`
- [Member catalog](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/memberData.js): `src/data/memberData.js`
- [Setlist songs](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/setlistSongs.js): `src/data/setlistSongs.js`
- [Setlist catalog](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/SetlistData.js): `src/data/SetlistData.js`
- [Special show catalog](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/specialshowData.js): `src/data/specialshowData.js`
- [MV and SPV catalog](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/spv_mv.js): `src/data/spv_mv.js`

### Planning and analysis

- [Dream setlist builder](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Dream_Setlist.jsx): `src/Dream_Setlist.jsx`
- [Dream song catalog](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/DreamSetlist_Songs.js): `src/data/DreamSetlist_Songs.js`
- [Wishlist calculator](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Calculator.jsx): `src/Calculator.jsx`
- [Wishlist price catalog](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/wishlistpriceData.js): `src/data/wishlistpriceData.js`
- [Point history analytics](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/PointHistory.jsx): `src/PointHistory.jsx`
- [Point history config](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/PointHistoryData.js): `src/data/PointHistoryData.js`

### Games and collection

- [Roulette utility](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/roulette.jsx): `src/roulette.jsx`
- [Gacha collection](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Gacha.jsx): `src/Gacha.jsx`
- [Gacha cards](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/data/gachaCards.js): `src/data/gachaCards.js`
- [Guess Who game](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/GuessWho.jsx): `src/GuessWho.jsx`
- **Playroom service**
- [Mobile tierlist](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/src/Mobile_Tierlist.jsx): `src/Mobile_Tierlist.jsx`

### Points history sync

- [History exporter](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/popup.js): `public/extension/popup.js`
- [Page sync panel](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/content.js): `public/extension/content.js`
- [Extension background](https://github.com/mrcellsbst/tierlistjkt48-bckp/blob/main/public/extension/background.js): `public/extension/background.js`
- **Browser storage**
- **JKT48 account site**

### Other components

- **Fan user**

## Connections

- Fan user → Route dispatcher: opens
- Route dispatcher → Home and tools: routes to
- Home and tools → Route dispatcher: chooses route
- Route dispatcher → Tierlist maker: routes to
- Route dispatcher → Dream setlist builder: routes to
- Route dispatcher → Wishlist calculator: routes to
- Route dispatcher → Point history analytics: routes to
- Route dispatcher → Roulette utility: routes to
- Route dispatcher → Gacha collection: routes to
- Route dispatcher → Guess Who game: routes to
- Route dispatcher → Mobile tierlist: routes to
- Tierlist maker → Tier controls: uses
- Tierlist maker → Member catalog: loads
- Tierlist maker → Setlist catalog: loads
- Tierlist maker → Setlist songs: loads
- Tierlist maker → Special show catalog: loads
- Tierlist maker → MV and SPV catalog: loads
- Dream setlist builder → Dream song catalog: loads
- Wishlist calculator → Wishlist price catalog: loads
- Point history analytics → Point history config: loads
- Gacha collection → Gacha cards: loads
- Guess Who game → Playroom service: shares game state
- History exporter → JKT48 account site: fetches history
- JKT48 account site → History exporter: returns records
- History exporter → Browser storage: stores history
- Page sync panel → Browser storage: reads history
- Page sync panel → Extension background: sends export request
- Extension background → JKT48 account site: requests history
- Page sync panel → Point history analytics: syncs browser data