# biugle/web_base architecture

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

- Interactive diagram: https://gitdiagram.com/biugle/web_base
- Repository: https://github.com/biugle/web_base

## Overview

web_base is a React/TypeScript enterprise front-end application base, with this tree representing its web app branch rather than the README’s separate Electron and ServiceWorker variants. The principal workflow is app startup, route selection, and rendering login, home, list-demo, or not-found screens. The tree also exposes reusable UI components, custom hooks, Redux state, and request utilities. Edges reflect the sampled entry, routing, login, and hook code; wiring for unsampled screens and components is intentionally not inferred.

Main entry points: [`src/router/index.ts`](https://github.com/biugle/web_base/blob/main/src/router/index.ts) (Route config), [`src/main.tsx`](https://github.com/biugle/web_base/blob/main/src/main.tsx) (React entry), [`src/App/index.tsx`](https://github.com/biugle/web_base/blob/main/src/App/index.tsx) (App shell), [`src/router/AppRouter/RouterView.tsx`](https://github.com/biugle/web_base/blob/main/src/router/AppRouter/RouterView.tsx) (Route view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_startup["App startup"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App shell<br/>[index.tsx]"]
end

subgraph group_navigation["Routing and screens"]
  node_routes["Route config<br/>[index.ts]"]
  node_app_router["App router<br/>[index.tsx]"]
  node_router_view["Route view<br/>[RouterView.tsx]"]
  node_route_auth["Route access<br/>[AuthRouteDom.tsx]"]
  node_router_listener["Route listener<br/>[RouterListener.tsx]"]
  node_home["Home screen<br/>[index.tsx]"]
  node_list_demo["List demo<br/>[index.tsx]"]
  node_login["Login screen<br/>[index.tsx]"]
  node_not_found["Not found<br/>[index.tsx]"]
end

subgraph group_shared["Shared capabilities"]
  node_ui_components["UI components"]
  node_fire_tools["Fire utilities"]
  node_router_hooks["Router hooks<br/>[useRouterChange.ts]"]
  node_fetch_hook["Fetch hook<br/>[useFetch.ts]"]
  node_storage_hook["Storage hook<br/>[useStorage.ts]"]
  node_app_loading["Startup loading<br/>[index.tsx]"]
  node_router_loading["Route loading<br/>[index.tsx]"]
  node_xcall["Route event bus"]
end

subgraph group_state["State and requests"]
  node_redux_store["Redux store<br/>[all.ts]"]
  node_store_states["App state"]
  node_browser_storage[("Browser storage")]
  node_http_service["Demo service<br/>[demo.ts]"]
  node_http_client["HTTP utility<br/>[xhttp.ts]"]
end

node_user(("User"))

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_entry -->|"provides state"| node_redux_store
node_entry -->|"passes routes"| node_routes
node_app -->|"renders after load"| node_app_router
node_app -->|"selects state"| node_redux_store
node_app -->|"shows while loading"| node_app_loading
node_app_router -->|"renders routes"| node_router_view
node_app_router -->|"mounts listener"| node_router_listener
node_router_view -->|"matches config"| node_routes
node_router_view -->|"renders route"| node_route_auth
node_router_view -->|"suspends to"| node_router_loading
node_routes -->|"lazy loads"| node_home
node_routes -->|"lazy loads"| node_list_demo
node_routes -->|"lazy loads"| node_login
node_routes -->|"lazy loads"| node_not_found
node_login -->|"accepts interaction"| node_user
node_router_listener -->|"dispatches change"| node_xcall
node_router_hooks -->|"subscribes"| node_xcall
node_storage_hook -->|"reads and writes"| node_browser_storage
node_fetch_hook -.->|"fetches URL"| node_http_service
node_http_service -.->|"uses utility"| node_http_client
node_redux_store -->|"combines state"| node_store_states

click node_entry "https://github.com/biugle/web_base/blob/main/src/main.tsx"
click node_app "https://github.com/biugle/web_base/blob/main/src/App/index.tsx"
click node_routes "https://github.com/biugle/web_base/blob/main/src/router/index.ts"
click node_app_router "https://github.com/biugle/web_base/blob/main/src/router/AppRouter/index.tsx"
click node_router_view "https://github.com/biugle/web_base/blob/main/src/router/AppRouter/RouterView.tsx"
click node_route_auth "https://github.com/biugle/web_base/blob/main/src/router/AppRouter/AuthRouteDom.tsx"
click node_router_listener "https://github.com/biugle/web_base/blob/main/src/router/AppRouter/RouterListener.tsx"
click node_home "https://github.com/biugle/web_base/blob/main/src/views/Home/index.tsx"
click node_list_demo "https://github.com/biugle/web_base/blob/main/src/views/ListDemo/index.tsx"
click node_login "https://github.com/biugle/web_base/blob/main/src/views/LoginRwd/index.tsx"
click node_not_found "https://github.com/biugle/web_base/blob/main/src/views/404/index.tsx"
click node_ui_components "https://github.com/biugle/web_base/tree/main/src/components"
click node_fire_tools "https://github.com/biugle/web_base/tree/main/src/components/Fire"
click node_router_hooks "https://github.com/biugle/web_base/blob/main/src/_custom/hooks/useRouterChange.ts"
click node_fetch_hook "https://github.com/biugle/web_base/blob/main/src/_custom/hooks/useFetch.ts"
click node_storage_hook "https://github.com/biugle/web_base/blob/main/src/_custom/hooks/useStorage.ts"
click node_redux_store "https://github.com/biugle/web_base/blob/main/src/store/all.ts"
click node_store_states "https://github.com/biugle/web_base/tree/main/src/store/states"
click node_http_service "https://github.com/biugle/web_base/blob/main/src/services/demo.ts"
click node_http_client "https://github.com/biugle/web_base/blob/main/src/tools/xhttp.ts"
click node_app_loading "https://github.com/biugle/web_base/blob/main/src/components/AppLoading/index.tsx"
click node_router_loading "https://github.com/biugle/web_base/blob/main/src/components/RouterLoading/index.tsx"

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_user toneBlue
class node_routes,node_app_router,node_router_view,node_route_auth,node_router_listener,node_home,node_list_demo,node_login,node_not_found toneAmber
class node_ui_components,node_fire_tools,node_router_hooks,node_fetch_hook,node_storage_hook,node_app_loading,node_router_loading,node_xcall toneMint
class node_redux_store,node_store_states,node_browser_storage,node_http_service,node_http_client toneRose
```

## Components

### App startup

- [React entry](https://github.com/biugle/web_base/blob/main/src/main.tsx): `src/main.tsx`
- [App shell](https://github.com/biugle/web_base/blob/main/src/App/index.tsx): `src/App/index.tsx`

### Routing and screens

- [Route config](https://github.com/biugle/web_base/blob/main/src/router/index.ts): `src/router/index.ts`
- [App router](https://github.com/biugle/web_base/blob/main/src/router/AppRouter/index.tsx): `src/router/AppRouter/index.tsx`
- [Route view](https://github.com/biugle/web_base/blob/main/src/router/AppRouter/RouterView.tsx): `src/router/AppRouter/RouterView.tsx`
- [Route access](https://github.com/biugle/web_base/blob/main/src/router/AppRouter/AuthRouteDom.tsx): `src/router/AppRouter/AuthRouteDom.tsx`
- [Route listener](https://github.com/biugle/web_base/blob/main/src/router/AppRouter/RouterListener.tsx): `src/router/AppRouter/RouterListener.tsx`
- [Home screen](https://github.com/biugle/web_base/blob/main/src/views/Home/index.tsx): `src/views/Home/index.tsx`
- [List demo](https://github.com/biugle/web_base/blob/main/src/views/ListDemo/index.tsx): `src/views/ListDemo/index.tsx`
- [Login screen](https://github.com/biugle/web_base/blob/main/src/views/LoginRwd/index.tsx): `src/views/LoginRwd/index.tsx`
- [Not found](https://github.com/biugle/web_base/blob/main/src/views/404/index.tsx): `src/views/404/index.tsx`

### Shared capabilities

- [UI components](https://github.com/biugle/web_base/tree/main/src/components): `src/components`
- [Fire utilities](https://github.com/biugle/web_base/tree/main/src/components/Fire): `src/components/Fire`
- [Router hooks](https://github.com/biugle/web_base/blob/main/src/_custom/hooks/useRouterChange.ts): `src/_custom/hooks/useRouterChange.ts`
- [Fetch hook](https://github.com/biugle/web_base/blob/main/src/_custom/hooks/useFetch.ts): `src/_custom/hooks/useFetch.ts`
- [Storage hook](https://github.com/biugle/web_base/blob/main/src/_custom/hooks/useStorage.ts): `src/_custom/hooks/useStorage.ts`
- [Startup loading](https://github.com/biugle/web_base/blob/main/src/components/AppLoading/index.tsx): `src/components/AppLoading/index.tsx`
- [Route loading](https://github.com/biugle/web_base/blob/main/src/components/RouterLoading/index.tsx): `src/components/RouterLoading/index.tsx`
- **Route event bus**

### State and requests

- [Redux store](https://github.com/biugle/web_base/blob/main/src/store/all.ts): `src/store/all.ts`
- [App state](https://github.com/biugle/web_base/tree/main/src/store/states): `src/store/states`
- **Browser storage**
- [Demo service](https://github.com/biugle/web_base/blob/main/src/services/demo.ts): `src/services/demo.ts`
- [HTTP utility](https://github.com/biugle/web_base/blob/main/src/tools/xhttp.ts): `src/tools/xhttp.ts`

### Other components

- **User**

## Connections

- User → React entry: opens app
- React entry → App shell: renders
- React entry → Redux store: provides state
- React entry → Route config: passes routes
- App shell → App router: renders after load
- App shell → Redux store: selects state
- App shell → Startup loading: shows while loading
- App router → Route view: renders routes
- App router → Route listener: mounts listener
- Route view → Route config: matches config
- Route view → Route access: renders route
- Route view → Route loading: suspends to
- Route config → Home screen: lazy loads
- Route config → List demo: lazy loads
- Route config → Login screen: lazy loads
- Route config → Not found: lazy loads
- Login screen → User: accepts interaction
- Route listener → Route event bus: dispatches change
- Router hooks → Route event bus: subscribes
- Storage hook → Browser storage: reads and writes
- Fetch hook → Demo service: fetches URL
- Demo service → HTTP utility: uses utility
- Redux store → App state: combines state