# developervelnix-lab/winco_frontend architecture

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

- Interactive diagram: https://gitdiagram.com/developervelnix-lab/winco_frontend
- Repository: https://github.com/developervelnix-lab/winco_frontend

## Overview

#### Purpose and Runtime
This is a Vite-built React single-page client for an online casino/betting experience. It provides public game discovery, authentication, game launch UI, wallet-related journeys, account management, betting statements, promotions, and responsible-gambling/legal content. The README contains no operational documentation.

Core browser entry points are `index.html`, `src/main.jsx`, and `src/App.jsx`. Build/runtime configuration is in `vite.config.js`; a generated service-worker distribution exists under `dev-dist/`.

#### Application Shell and Navigation
`src/App.jsx` is the likely composition and route boundary for the SPA, with global styles in `src/App.css` and `src/index.css`. Navigation and persistent account controls are assembled from:
- `src/components/navbar/Navbar.jsx`
- `src/components/navbar/BelowNavbarComponent.jsx`
- `src/components/navbar/MobileFooterNav.jsx`

Desktop/mobile navigation directs users between lobby, account, transaction, promotion, and policy flows. Page implementations are primarily grouped under `src/components/pages/`, while duplicate top-level `pages/` files appear to be an alternate or legacy page location.

#### Global State, Theme, and Access Control
Application-wide state is separated into focused React contexts:
- `src/context/SiteContext.jsx`
- `src/context/GameContext.jsx`
- `src/context/ThemeContext.jsx`

`GameContext` is the likely handoff layer between game selection and launch/display components. Theme state and token synchronization are centralized in `src/constants/ThemeSynchronizer.jsx` and `src/constants/theme.js`, with consumers supported by `src/hooks/useColors.js`.

Authentication screens and route gating are contained in:
- `src/components/auth/Login.jsx`
- `src/components/auth/Register.jsx`
- `src/components/auth/ProtectedRoute.jsx`

This establishes a public-versus-authenticated boundary around account and monetary features.

#### Casino Lobby and Game Discovery
The home/lobby is componentized into content rails and verticals rather than a single monolith:
- `src/components/home/Home.jsx`
- `src/components/home/CasinoLobby.jsx`
- `src/components/home/GameSection.jsx`

Game catalog content appears locally data-driven through modules in `src/components/jsondata/`, including `slotgames.js`, `live.js`, `sport.js`, `turbogames.js`, and `gameproviders.js`. UI stages filter/select providers and games, render category sections, and pass selected games to launch/play surfaces such as `src/components/common/GameLaunchModal.jsx` and `src/components/GamePlayComponent.jsx`.

#### Account, Wallet, and Betting Operations
Authenticated customer journeys are represented as page-level screens:
- `src/components/pages/DepositPage.jsx`
- `src/components/pages/WithdrawPage.jsx`
- `src/components/pages/Transaction.jsx`

Account administration is centered on `src/components/pages/AccountSetting.jsx` and `src/components/pages/ChangePasswordPage.jsx`. Betting/history functionality is split between `src/components/pages/OpenBetPage.jsx`, `src/components/pages/ProfitLossPage.jsx`, and statement components in `src/components/sidebar-components/statements/`. These flows are UI boundaries for financial transactions and betting records; backend contracts are not present in the tree.

#### API, PWA, and Deployment Boundary
`src/utils/apiFetch.js` is the central visible API-access abstraction and should be the primary boundary for adding auth headers, error normalization, or backend integration. No server implementation is included; `read_address.php` is the only PHP artifact and is outside the React source structure.

PWA installation behavior is exposed through `src/hooks/usePWAInstall.js` and `src/components/home/AppInstallHero.jsx`. Service worker artifacts are checked in at `dev-dist/registerSW.js`, `dev-dist/sw.js`, and `dev-dist/workbox-5a5d9309.js`. Static deployment assets and Apache configuration live in `public/`, including `public/.htaccess`.

Main entry points: [`src/App.jsx`](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/App.jsx) (App routes), [`src/components/navbar/Navbar.jsx`](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/navbar/Navbar.jsx) (Responsive navigation), [`src/components/auth/ProtectedRoute.jsx`](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/auth/ProtectedRoute.jsx) (Auth and route guard), [`src/components/home/CasinoLobby.jsx`](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/home/CasinoLobby.jsx) (Casino lobby)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["SPA shell"]
  node_entry["Browser entry<br/>Vite entry<br/>[main.jsx]"]
  node_app["App routes<br/>React shell<br/>[App.jsx]"]
  node_navigation["Responsive navigation<br/>[Navbar.jsx]"]
end

subgraph group_state["Shared state"]
  node_site_context["Site context<br/>React context<br/>[SiteContext.jsx]"]
  node_game_context["Game context<br/>React context<br/>[GameContext.jsx]"]
  node_theme["Theme synchronization<br/>theme system"]
end

subgraph group_features["Customer journeys"]
  node_auth{{"Auth and route guard<br/>access control<br/>[ProtectedRoute.jsx]"}}
  node_lobby["Casino lobby<br/>game discovery<br/>[CasinoLobby.jsx]"]
  node_game_catalog["Local game catalog<br/>catalog data<br/>[slotgames.js]"]
  node_game_launch["Game launch<br/>launch UI"]
  node_wallet["Wallet journeys<br/>financial UI<br/>[DepositPage.jsx]"]
  node_account["Account management<br/>account UI<br/>[AccountSetting.jsx]"]
  node_betting["Betting records<br/>history UI<br/>[OpenBetPage.jsx]"]
  node_promotions_policy["Promotions and policies<br/>content UI"]
end

subgraph group_platform["Platform boundary"]
  node_api{{"API access<br/>fetch abstraction<br/>[apiFetch.js]"}}
  node_pwa_install["PWA installation<br/>install UX<br/>[usePWAInstall.js]"]
  node_service_worker["Service worker<br/>PWA runtime<br/>[sw.js]"]
  node_static_deploy["Static deployment<br/>hosting assets<br/>[.htaccess]"]
end

node_entry -->|"mounts"| node_app
node_app -->|"renders"| node_navigation
node_app -->|"uses"| node_site_context
node_app -->|"uses"| node_game_context
node_app -->|"initializes"| node_theme
node_app -->|"gates routes"| node_auth
node_navigation -->|"navigates"| node_lobby
node_navigation -->|"navigates"| node_wallet
node_navigation -->|"navigates"| node_account
node_navigation -->|"navigates"| node_betting
node_lobby -->|"reads"| node_game_catalog
node_lobby -->|"selects game"| node_game_context
node_game_context -->|"provides selection"| node_game_launch
node_auth -->|"protects"| node_wallet
node_auth -->|"protects"| node_account
node_auth -->|"protects"| node_betting
node_wallet -->|"requests"| node_api
node_account -->|"requests"| node_api
node_betting -->|"requests"| node_api
node_pwa_install -->|"registers"| node_service_worker
node_static_deploy -.->|"serves"| node_entry

click node_entry "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/main.jsx"
click node_app "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/App.jsx"
click node_navigation "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/navbar/Navbar.jsx"
click node_site_context "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/context/SiteContext.jsx"
click node_game_context "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/context/GameContext.jsx"
click node_theme "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/constants/ThemeSynchronizer.jsx"
click node_auth "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/auth/ProtectedRoute.jsx"
click node_lobby "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/home/CasinoLobby.jsx"
click node_game_catalog "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/jsondata/slotgames.js"
click node_game_launch "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/common/GameLaunchModal.jsx"
click node_wallet "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/pages/DepositPage.jsx"
click node_account "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/pages/AccountSetting.jsx"
click node_betting "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/pages/OpenBetPage.jsx"
click node_api "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/utils/apiFetch.js"
click node_pwa_install "https://github.com/developervelnix-lab/winco_frontend/blob/main/src/hooks/usePWAInstall.js"
click node_service_worker "https://github.com/developervelnix-lab/winco_frontend/blob/main/dev-dist/sw.js"
click node_static_deploy "https://github.com/developervelnix-lab/winco_frontend/blob/main/public/.htaccess"

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_entry,node_app,node_navigation toneBlue
class node_site_context,node_game_context,node_theme toneAmber
class node_auth,node_lobby,node_game_catalog,node_game_launch,node_wallet,node_account,node_betting,node_promotions_policy toneMint
class node_api,node_pwa_install,node_service_worker,node_static_deploy toneRose
```

## Components

### SPA shell

- [Browser entry](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/main.jsx): Vite entry · `src/main.jsx`
- [App routes](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/App.jsx): React shell · Composes the SPA and route boundary. · `src/App.jsx`
- [Responsive navigation](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/navbar/Navbar.jsx): navigation · Desktop, secondary, and mobile navigation controls. · `src/components/navbar/Navbar.jsx`

### Shared state

- [Site context](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/context/SiteContext.jsx): React context · `src/context/SiteContext.jsx`
- [Game context](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/context/GameContext.jsx): React context · Carries selected-game state to play surfaces. · `src/context/GameContext.jsx`
- [Theme synchronization](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/constants/ThemeSynchronizer.jsx): theme system · Synchronizes theme state and tokens. · `src/constants/ThemeSynchronizer.jsx`

### Customer journeys

- [Auth and route guard](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/auth/ProtectedRoute.jsx): access control · Login, registration, and protected-route boundary. · `src/components/auth/ProtectedRoute.jsx`
- [Casino lobby](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/home/CasinoLobby.jsx): game discovery · Renders lobby rails and game categories. · `src/components/home/CasinoLobby.jsx`
- [Local game catalog](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/jsondata/slotgames.js): catalog data · Local slots, live, sport, turbo, and provider data. · `src/components/jsondata/slotgames.js`
- [Game launch](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/common/GameLaunchModal.jsx): launch UI · Launch modal and game play surface. · `src/components/common/GameLaunchModal.jsx`
- [Wallet journeys](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/pages/DepositPage.jsx): financial UI · Deposit, withdrawal, and transaction screens. · `src/components/pages/DepositPage.jsx`
- [Account management](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/pages/AccountSetting.jsx): account UI · Settings and password-management screens. · `src/components/pages/AccountSetting.jsx`
- [Betting records](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/components/pages/OpenBetPage.jsx): history UI · Open bets, profit/loss, and statements. · `src/components/pages/OpenBetPage.jsx`
- **Promotions and policies**: content UI · Promotional, responsible-gambling, and legal content.

### Platform boundary

- [API access](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/utils/apiFetch.js): fetch abstraction · Central client boundary for backend integration. · `src/utils/apiFetch.js`
- [PWA installation](https://github.com/developervelnix-lab/winco_frontend/blob/main/src/hooks/usePWAInstall.js): install UX · Install prompt and lobby hero. · `src/hooks/usePWAInstall.js`
- [Service worker](https://github.com/developervelnix-lab/winco_frontend/blob/main/dev-dist/sw.js): PWA runtime · Checked-in generated offline worker distribution. · `dev-dist/sw.js`
- [Static deployment](https://github.com/developervelnix-lab/winco_frontend/blob/main/public/.htaccess): hosting assets · Public assets and Apache deployment rules. · `public/.htaccess`

## Connections

- Browser entry → App routes: mounts
- App routes → Responsive navigation: renders
- App routes → Site context: uses
- App routes → Game context: uses
- App routes → Theme synchronization: initializes
- App routes → Auth and route guard: gates routes
- Responsive navigation → Casino lobby: navigates
- Responsive navigation → Wallet journeys: navigates
- Responsive navigation → Account management: navigates
- Responsive navigation → Betting records: navigates
- Casino lobby → Local game catalog: reads
- Casino lobby → Game context: selects game
- Game context → Game launch: provides selection
- Auth and route guard → Wallet journeys: protects
- Auth and route guard → Account management: protects
- Auth and route guard → Betting records: protects
- Wallet journeys → API access: requests
- Account management → API access: requests
- Betting records → API access: requests
- PWA installation → Service worker: registers
- Static deployment → Browser entry: serves