# tayfundo/ranksf2ce architecture

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

- Interactive diagram: https://gitdiagram.com/tayfundo/ranksf2ce
- Repository: https://github.com/tayfundo/ranksf2ce

## Overview

Round One is a mobile-friendly Street Fighter II Champion Edition ranking lookup. A visitor opens the search page, loads rankings, searches player nicknames, and views a selected player’s rank, tier, Fightcade rank, match count, playtime, and country. The page prefers the rankings API and falls back to bundled ranking data; it also displays a visit counter. Separate server routes expose search logging and counter operations. The excerpts show the rankings API reading Cloudflare KV and the logging route using GitHub Gists; unsampled wiring is omitted.

Main entry points: [`src/components/PlayerSearch.tsx`](https://github.com/tayfundo/ranksf2ce/blob/main/src/components/PlayerSearch.tsx) (Player search), [`src/routes/index.tsx`](https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/index.tsx) (Home route), [`src/routes/api/rankings.ts`](https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/rankings.ts) (Rankings API), [`src/routes/api/visit-counter.ts`](https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/visit-counter.ts) (Visit counter API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Search experience"]
  node_router["App router<br/>[router.tsx]"]
  node_home["Home route<br/>[index.tsx]"]
  node_search["Player search<br/>[PlayerSearch.tsx]"]
end

subgraph group_ranking["Ranking data"]
  node_rankings_kv[("Rankings KV")]
  node_fallback_data["Fallback rankings"]
end

subgraph group_services["Server routes"]
  node_rankings_api["Rankings API<br/>[rankings.ts]"]
  node_visit_api["Visit counter API<br/>[visit-counter.ts]"]
  node_log_api["Search log API<br/>[log-search.ts]"]
end

subgraph group_telemetry["Telemetry storage"]
  node_counter_kv[("Counter KV")]
  node_gist[("GitHub Gist")]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_home
node_home -->|"renders"| node_search
node_search -->|"fetches rankings"| node_rankings_api
node_search -->|"loads on failure"| node_fallback_data
node_rankings_api -->|"reads"| node_rankings_kv
node_search -->|"requests count"| node_visit_api
node_visit_api -->|"reads and updates"| node_counter_kv
node_visitor -.->|"submits search log"| node_log_api
node_log_api -->|"reads and writes"| node_gist

click node_router "https://github.com/tayfundo/ranksf2ce/blob/main/src/router.tsx"
click node_home "https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/index.tsx"
click node_search "https://github.com/tayfundo/ranksf2ce/blob/main/src/components/PlayerSearch.tsx"
click node_rankings_api "https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/rankings.ts"
click node_fallback_data "https://github.com/tayfundo/ranksf2ce/blob/main/public/data/sf2ce-rankings.json"
click node_visit_api "https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/visit-counter.ts"
click node_log_api "https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/log-search.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_router,node_home,node_search toneBlue
class node_rankings_kv,node_fallback_data toneAmber
class node_rankings_api,node_visit_api,node_log_api toneMint
class node_counter_kv,node_gist toneRose
class node_visitor toneIndigo
```

## Components

### Search experience

- [App router](https://github.com/tayfundo/ranksf2ce/blob/main/src/router.tsx): `src/router.tsx`
- [Home route](https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/index.tsx): `src/routes/index.tsx`
- [Player search](https://github.com/tayfundo/ranksf2ce/blob/main/src/components/PlayerSearch.tsx): `src/components/PlayerSearch.tsx`

### Ranking data

- **Rankings KV**
- [Fallback rankings](https://github.com/tayfundo/ranksf2ce/blob/main/public/data/sf2ce-rankings.json): `public/data/sf2ce-rankings.json`

### Server routes

- [Rankings API](https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/rankings.ts): `src/routes/api/rankings.ts`
- [Visit counter API](https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/visit-counter.ts): `src/routes/api/visit-counter.ts`
- [Search log API](https://github.com/tayfundo/ranksf2ce/blob/main/src/routes/api/log-search.ts): `src/routes/api/log-search.ts`

### Telemetry storage

- **Counter KV**
- **GitHub Gist**

### Other components

- **Visitor**

## Connections

- Visitor → Home route: opens (evidence: `README.md`)
- Home route → Player search: renders (evidence: `src/routes/index.tsx`)
- Player search → Rankings API: fetches rankings (evidence: `src/components/PlayerSearch.tsx`)
- Player search → Fallback rankings: loads on failure (evidence: `src/components/PlayerSearch.tsx`)
- Rankings API → Rankings KV: reads (evidence: `src/routes/api/rankings.ts`)
- Player search → Visit counter API: requests count (evidence: `src/components/PlayerSearch.tsx`)
- Visit counter API → Counter KV: reads and updates (evidence: `src/routes/api/visit-counter.ts`)
- Visitor → Search log API: submits search log
- Search log API → GitHub Gist: reads and writes (evidence: `src/routes/api/log-search.ts`)