# visionbridge2026/vision111 architecture

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

- Interactive diagram: https://gitdiagram.com/visionbridge2026/vision111
- Repository: https://github.com/visionbridge2026/vision111

## Overview

This repository is an Expo starter app: users navigate between a welcome screen and an Explore screen containing framework examples and documentation links. The runtime is organized around Expo Router’s tab layout, with reusable themed UI and platform-specific presentation. The backend file is empty, and no product data or service workflow is evidenced. Some component files are represented from the tree and sampled callers; their internal behavior and wiring are not inferred.

Main entry points: [`frontend/src/app/explore.tsx`](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/explore.tsx) (Explore screen), [`frontend/src/app/index.tsx`](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/index.tsx) (Welcome screen), [`frontend/src/components/ui/collapsible.tsx`](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/ui/collapsible.tsx) (Collapsible sections), [`frontend/src/hooks/use-theme.ts`](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/hooks/use-theme.ts) (Theme hook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Navigation and screens"]
  node_layout["Tab layout<br/>[_layout.tsx]"]
  node_tabs["App tabs<br/>[app-tabs.tsx]"]
  node_home["Welcome screen<br/>[index.tsx]"]
  node_explore["Explore screen<br/>[explore.tsx]"]
end

subgraph group_ui["Reusable UI"]
  node_animated["Animated icon<br/>[animated-icon.tsx]"]
  node_hint["Hint row<br/>[hint-row.tsx]"]
  node_text["Themed text<br/>[themed-text.tsx]"]
  node_view["Themed view<br/>[themed-view.tsx]"]
  node_badge["Web badge<br/>[web-badge.tsx]"]
  node_collapsible["Collapsible sections<br/>[collapsible.tsx]"]
  node_external["External link<br/>[external-link.tsx]"]
end

subgraph group_theme["Theme and platform"]
  node_themehook["Theme hook<br/>[use-theme.ts]"]
  node_scheme["Color scheme hook"]
  node_colors["Theme tokens<br/>[theme.ts]"]
end

node_user(("App user"))
node_docs(("Expo documentation"))

node_user -->|"opens app"| node_layout
node_layout -->|"renders tabs"| node_tabs
node_layout -->|"renders overlay"| node_animated
node_tabs -->|"routes to"| node_home
node_tabs -->|"routes to"| node_explore
node_home -->|"renders icon"| node_animated
node_home -->|"renders hints"| node_hint
node_home -->|"renders text"| node_text
node_home -->|"renders layout"| node_view
node_home -->|"renders on web"| node_badge
node_explore -->|"renders sections"| node_collapsible
node_explore -->|"renders link"| node_external
node_explore -->|"reads theme"| node_themehook
node_explore -->|"renders text"| node_text
node_explore -->|"renders layout"| node_view
node_explore -->|"renders on web"| node_badge
node_collapsible -->|"reads theme"| node_themehook
node_collapsible -->|"renders text"| node_text
node_collapsible -->|"renders layout"| node_view
node_themehook -->|"reads scheme"| node_scheme
node_themehook -->|"selects colors"| node_colors
node_external -.->|"opens link"| node_docs

click node_layout "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/_layout.tsx"
click node_tabs "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/app-tabs.tsx"
click node_home "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/index.tsx"
click node_explore "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/explore.tsx"
click node_animated "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/animated-icon.tsx"
click node_hint "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/hint-row.tsx"
click node_text "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/themed-text.tsx"
click node_view "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/themed-view.tsx"
click node_badge "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/web-badge.tsx"
click node_collapsible "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/ui/collapsible.tsx"
click node_external "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/external-link.tsx"
click node_themehook "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/hooks/use-theme.ts"
click node_scheme "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/hooks/use-color-scheme.ts"
click node_colors "https://github.com/visionbridge2026/vision111/blob/main/frontend/src/constants/theme.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_layout,node_tabs,node_home,node_explore,node_user toneBlue
class node_animated,node_hint,node_text,node_view,node_badge,node_collapsible,node_external toneAmber
class node_themehook,node_scheme,node_colors toneMint
class node_docs toneIndigo
```

## Components

### Navigation and screens

- [Tab layout](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/_layout.tsx): `frontend/src/app/_layout.tsx`
- [App tabs](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/app-tabs.tsx): `frontend/src/components/app-tabs.tsx`
- [Welcome screen](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/index.tsx): `frontend/src/app/index.tsx`
- [Explore screen](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/app/explore.tsx): `frontend/src/app/explore.tsx`

### Reusable UI

- [Animated icon](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/animated-icon.tsx): `frontend/src/components/animated-icon.tsx`
- [Hint row](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/hint-row.tsx): `frontend/src/components/hint-row.tsx`
- [Themed text](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/themed-text.tsx): `frontend/src/components/themed-text.tsx`
- [Themed view](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/themed-view.tsx): `frontend/src/components/themed-view.tsx`
- [Web badge](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/web-badge.tsx): `frontend/src/components/web-badge.tsx`
- [Collapsible sections](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/ui/collapsible.tsx): `frontend/src/components/ui/collapsible.tsx`
- [External link](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/components/external-link.tsx): `frontend/src/components/external-link.tsx`

### Theme and platform

- [Theme hook](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/hooks/use-theme.ts): `frontend/src/hooks/use-theme.ts`
- [Color scheme hook](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/hooks/use-color-scheme.ts): `frontend/src/hooks/use-color-scheme.ts`
- [Theme tokens](https://github.com/visionbridge2026/vision111/blob/main/frontend/src/constants/theme.ts): `frontend/src/constants/theme.ts`

### Other components

- **App user**
- **Expo documentation**

## Connections

- App user → Tab layout: opens app
- Tab layout → App tabs: renders tabs
- Tab layout → Animated icon: renders overlay
- App tabs → Welcome screen: routes to
- App tabs → Explore screen: routes to
- Welcome screen → Animated icon: renders icon
- Welcome screen → Hint row: renders hints
- Welcome screen → Themed text: renders text
- Welcome screen → Themed view: renders layout
- Welcome screen → Web badge: renders on web
- Explore screen → Collapsible sections: renders sections
- Explore screen → External link: renders link
- Explore screen → Theme hook: reads theme
- Explore screen → Themed text: renders text
- Explore screen → Themed view: renders layout
- Explore screen → Web badge: renders on web
- Collapsible sections → Theme hook: reads theme
- Collapsible sections → Themed text: renders text
- Collapsible sections → Themed view: renders layout
- Theme hook → Color scheme hook: reads scheme
- Theme hook → Theme tokens: selects colors
- External link → Expo documentation: opens link