# sullaspqr/react-native-chess-frontend architecture

> Architecture diagram of the GitHub repository sullaspqr/react-native-chess-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sullaspqr/react-native-chess-frontend
- Repository: https://github.com/sullaspqr/react-native-chess-frontend

## Overview

This React Native app lets users browse chess players, inspect a selected profile, and create, edit, or delete records; profile links open in an embedded web view. App.js registers these screens in stack and drawer navigation. The screens call the chess.sulla.hu API directly, so no separate repository data layer is visible. The README describes the Expo Snack shell rather than these app features; relationships below are based on the sampled screen and navigation code.

Main entry points: [`App.js`](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/App.js) (Navigation shell), [`components/ChessListPage.js`](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessListPage.js) (Player list), [`components/ChessSinglePage.js`](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessSinglePage.js) (Player details), [`components/ChessModPage.js`](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessModPage.js) (Edit player)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_app["Navigation shell<br/>[App.js]"]
end

subgraph group_players["Player workflows"]
  node_list["Player list<br/>[ChessListPage.js]"]
  node_detail["Player details<br/>[ChessSinglePage.js]"]
  node_create["Create player<br/>[ChessCreatePage.js]"]
  node_edit["Edit player<br/>[ChessModPage.js]"]
  node_delete["Delete player<br/>[ChessDelPage.js]"]
end

subgraph group_profiles["Profile links"]
  node_webview["Profile web view<br/>[WebViewScreen.js]"]
end

node_user(("App user"))
node_api["Chess API"]
node_web["Profile website"]

node_user -->|"uses"| node_app
node_app -->|"registers screen"| node_list
node_app -->|"registers screen"| node_detail
node_app -->|"registers screen"| node_create
node_app -->|"registers screen"| node_edit
node_app -->|"registers screen"| node_delete
node_app -->|"registers screen"| node_webview
node_list -->|"fetches players"| node_api
node_list -->|"opens details"| node_detail
node_list -->|"opens creation"| node_create
node_list -->|"opens editor"| node_edit
node_list -->|"opens deletion"| node_delete
node_list -->|"opens profile"| node_webview
node_detail -->|"fetches player"| node_api
node_detail -->|"opens editor"| node_edit
node_detail -->|"opens profile"| node_webview
node_create -->|"creates player"| node_api
node_edit -->|"reads and updates"| node_api
node_delete -->|"reads and deletes"| node_api
node_webview -->|"loads profile URL"| node_web

click node_app "https://github.com/sullaspqr/react-native-chess-frontend/blob/main/App.js"
click node_list "https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessListPage.js"
click node_detail "https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessSinglePage.js"
click node_create "https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessCreatePage.js"
click node_edit "https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessModPage.js"
click node_delete "https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessDelPage.js"
click node_webview "https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/WebViewScreen.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_user toneBlue
class node_list,node_detail,node_create,node_edit,node_delete toneAmber
class node_webview,node_api toneMint
class node_web toneIndigo
```

## Components

### App navigation

- [Navigation shell](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/App.js): `App.js`

### Player workflows

- [Player list](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessListPage.js): `components/ChessListPage.js`
- [Player details](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessSinglePage.js): `components/ChessSinglePage.js`
- [Create player](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessCreatePage.js): `components/ChessCreatePage.js`
- [Edit player](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessModPage.js): `components/ChessModPage.js`
- [Delete player](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/ChessDelPage.js): `components/ChessDelPage.js`

### Profile links

- [Profile web view](https://github.com/sullaspqr/react-native-chess-frontend/blob/main/components/WebViewScreen.js): `components/WebViewScreen.js`

### Other components

- **App user**
- **Chess API**
- **Profile website**

## Connections

- App user → Navigation shell: uses
- Navigation shell → Player list: registers screen (evidence: `App.js`)
- Navigation shell → Player details: registers screen (evidence: `App.js`)
- Navigation shell → Create player: registers screen (evidence: `App.js`)
- Navigation shell → Edit player: registers screen (evidence: `App.js`)
- Navigation shell → Delete player: registers screen (evidence: `App.js`)
- Navigation shell → Profile web view: registers screen (evidence: `App.js`)
- Player list → Chess API: fetches players (evidence: `components/ChessListPage.js`)
- Player list → Player details: opens details (evidence: `components/ChessListPage.js`)
- Player list → Create player: opens creation (evidence: `App.js`)
- Player list → Edit player: opens editor (evidence: `components/ChessListPage.js`)
- Player list → Delete player: opens deletion (evidence: `components/ChessListPage.js`)
- Player list → Profile web view: opens profile (evidence: `components/ChessListPage.js`)
- Player details → Chess API: fetches player (evidence: `components/ChessSinglePage.js`)
- Player details → Edit player: opens editor (evidence: `components/ChessSinglePage.js`)
- Player details → Profile web view: opens profile (evidence: `components/ChessSinglePage.js`)
- Create player → Chess API: creates player (evidence: `components/ChessCreatePage.js`)
- Edit player → Chess API: reads and updates (evidence: `components/ChessModPage.js`)
- Delete player → Chess API: reads and deletes (evidence: `components/ChessDelPage.js`)
- Profile web view → Profile website: loads profile URL (evidence: `components/WebViewScreen.js`)