# vaguer2/fleteandotechido architecture

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

- Interactive diagram: https://gitdiagram.com/vaguer2/fleteandotechido
- Repository: https://github.com/vaguer2/fleteandotechido

## Overview

1. **Project type and runtime**
   - This is an **Expo / React Native** application written in **TypeScript**.
   - The repository is structured for **cross-platform delivery**: native mobile plus web, with platform-specific file variants like `*.web.tsx` and `*.web.ts`.

2. **Application shell and routing**
   - The `src/app` folder is the main navigation root and appears to use **Expo Router** conventions.
   - `src/app/_layout.tsx` is the top-level shell where app-wide providers, navigation containers, and shared layout concerns are likely defined.
   - `src/app/index.tsx` and `src/app/explore.tsx` are route entry points, while `src/app/Screen/...` contains deeper screen content.

3. **Screen composition layer**
   - The actual user-facing screens are organized under `src/app/Screen/Home/`.
   - `ScreenHomeUser.tsx` and `ScreenHomeDelivery.tsx` suggest the app has at least two distinct home experiences or roles:
     - a **user-oriented home**
     - a **delivery-oriented home**
   - `src/app/MyNavegation.js` likely contains custom navigation logic or a role-based navigation selector that chooses which screen stack the user sees.

4. **Navigation boundary**
   - Navigation is a clear architectural boundary separating route-level orchestration from reusable UI.
   - Route files in `src/app` should be viewed as the **integration layer**, while the screen components under `Screen/Home` hold the **feature UI**.
   - This makes it easier to diagram the app as: app shell → navigation → role-specific screens.

5. **Shared UI component system**
   - `src/components` contains the reusable presentation layer:
     - `themed-text.tsx`, `themed-view.tsx`
     - `app-tabs.tsx`
     - `animated-icon.tsx`
     - `external-link.tsx`
     - `hint-row.tsx`
     - `web-badge.tsx`
   - `src/components/ui/collapsible.tsx` is a lower-level UI primitive used to build interactive interfaces.
   - These components form the **design system / shared widget layer** used by multiple screens.

6. **Theme and appearance handling**
   - Theme state is centralized in `src/constants/theme.ts` and `src/hooks/use-theme.ts`.
   - `src/hooks/use-color-scheme.ts` and `src/hooks/use-color-scheme.web.ts` show that color scheme detection is platform-aware.
   - `themed-*` components likely consume that theme context to keep styling consistent across screens and platforms.

7. **Web-specific behavior**
   - The presence of `*.web.tsx`, `*.web.ts`, and `src/global.css` indicates the web target is first-class, not an afterthought.
   - `animated-icon.web.tsx`, `app-tabs.web.tsx`, and `use-color-scheme.web.ts` override native behavior where the web platform needs different implementation details.

8. **Assets and visual resources**
   - Static images and tab icons are stored under `assets/images/tabIcons`.
   - These assets likely support navigation branding and bottom-tab UI, which matters when diagramming the visual entry points and persistent navigation areas.

9. **Styling model**
   - Styling appears to combine **React Native component styling** with **web CSS support**.
   - `src/global.css` is the main global stylesheet for the web build, while component-level styling is handled inside the `.tsx` files and the CSS module `animated-icon.module.css`.

10. **Tooling and project infrastructure**
   - `app.json`, `package.json`, `tsconfig.json`, and `package-lock.json` indicate a standard Expo/TypeScript build setup.
   - `scripts/reset-project.js` suggests the repo includes a maintenance/reset utility for re-initializing the project scaffold.

11. **External documentation and backend context**
   - The README points to **Figma**, **Drive documentation**, **daily logs**, and **Supabase**.
   - Supabase is an important architectural dependency at the project level, even though no backend code is present in this tree.
   - For a system diagram, treat Supabase as the external data/backend service the app is expected to integrate with.

12. **High-level data and control flow**
   - App startup enters through the Expo entry point, then the router shell in `_layout.tsx`.
   - Navigation routes lead to top-level screens such as home and explore.
   - Screens compose shared themed components and platform-specific UI pieces.
   - Theme/color-scheme hooks feed presentation decisions, while assets and tabs provide persistent UI affordances.

13. **What is not in this repository**
   - There is no visible server, API layer, or state-management backend implementation here.
   - The repo is primarily the **client application layer** plus documentation pointers to external services and design sources.

14. **How to draw it**
   - A good architecture diagram would show:
     - **Expo app entry / router shell**
     - **Navigation layer**
     - **Route screens**
     - **Shared UI + theme layer**
     - **Platform-specific web/native variants**
     - **Static assets**
     - **External Supabase backend and documentation/design tools**

Main entry points: [`src/app/_layout.tsx`](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/_layout.tsx) (App shell), [`src/app/explore.tsx`](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/explore.tsx) (Explore), [`src/app/MyNavegation.js`](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/MyNavegation.js) (Nav selector), [`src/app/Screen/Home/ScreenHomeUser.js`](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/Screen/Home/ScreenHomeUser.js) (User home)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_g_app["App shell"]
  node_n_entry["Expo entry<br/>runtime entry<br/>[index.tsx]"]
  node_n_layout["App shell<br/>router shell<br/>[_layout.tsx]"]
  node_n_nav["Nav selector<br/>navigation logic<br/>[MyNavegation.js]"]
  node_n_explore["Explore<br/>route screen<br/>[explore.tsx]"]
end

subgraph group_g_screens["Screens"]
  node_n_home_user["User home<br/>screen<br/>[ScreenHomeUser.js]"]
  node_n_home_delivery["Delivery home<br/>screen"]
end

subgraph group_g_ui["Shared UI"]
  node_n_themed_text["Themed text<br/>shared component<br/>[themed-text.tsx]"]
  node_n_themed_view["Themed view<br/>shared component<br/>[themed-view.tsx]"]
  node_n_app_tabs["App tabs<br/>navigation UI<br/>[app-tabs.tsx]"]
  node_n_collapse["Collapsible<br/>ui primitive<br/>[collapsible.tsx]"]
  node_n_animated_icon["Animated icon<br/>shared component<br/>[animated-icon.tsx]"]
  node_n_external_link["External link<br/>shared component<br/>[external-link.tsx]"]
  node_n_hint_row["Hint row<br/>shared component<br/>[hint-row.tsx]"]
  node_n_web_badge["Web badge<br/>shared component<br/>[web-badge.tsx]"]
end

subgraph group_g_theme["Theme"]
  node_n_theme_state["Theme state<br/>theme config<br/>[theme.ts]"]
  node_n_use_theme["Use theme<br/>theme hook<br/>[use-theme.ts]"]
  node_n_color_scheme["Color scheme<br/>platform hook"]
end

subgraph group_g_platform["Platform variants"]
  node_n_color_scheme_web["Scheme web<br/>web override"]
  node_n_animated_icon_web["Icon web<br/>web override"]
  node_n_app_tabs_web["Tabs web<br/>web override<br/>[app-tabs.web.tsx]"]
  node_n_global_css["Global CSS<br/>web stylesheet<br/>[global.css]"]
  node_n_animated_css["Icon styles<br/>css module"]
end

subgraph group_g_assets["Assets"]
  node_n_tab_icons["Tab icons<br/>assets"]
end

subgraph group_g_external["External services"]
  node_n_supabase[("Supabase<br/>external backend")]
  node_n_figma["Figma<br/>external design"]
  node_n_drive["Drive docs<br/>external docs"]
end

node_n_entry -->|"bootstraps"| node_n_layout
node_n_layout -->|"hosts"| node_n_nav
node_n_nav -->|"selects"| node_n_home_user
node_n_nav -->|"selects"| node_n_home_delivery
node_n_layout -->|"routes to"| node_n_explore
node_n_home_user -->|"uses"| node_n_themed_view
node_n_home_user -->|"uses"| node_n_themed_text
node_n_home_delivery -->|"uses"| node_n_themed_view
node_n_home_delivery -->|"uses"| node_n_themed_text
node_n_explore -->|"uses"| node_n_collapse
node_n_explore -->|"uses"| node_n_external_link
node_n_explore -->|"uses"| node_n_hint_row
node_n_explore -->|"uses"| node_n_web_badge
node_n_app_tabs -->|"loads"| node_n_tab_icons
node_n_themed_text -->|"consumes"| node_n_use_theme
node_n_themed_view -->|"consumes"| node_n_use_theme
node_n_use_theme -->|"reads"| node_n_theme_state
node_n_color_scheme -->|"overrides"| node_n_color_scheme_web
node_n_animated_icon -->|"overrides"| node_n_animated_icon_web
node_n_app_tabs -->|"overrides"| node_n_app_tabs_web
node_n_animated_icon -->|"styles"| node_n_animated_css
node_n_layout -->|"includes"| node_n_global_css
node_n_layout -->|"detects"| node_n_color_scheme
node_n_layout -.->|"integrates with"| node_n_supabase
node_n_layout -.->|"references"| node_n_figma
node_n_layout -.->|"references"| node_n_drive

click node_n_entry "https://github.com/vaguer2/fleteandotechido/blob/main/src/app/index.tsx"
click node_n_layout "https://github.com/vaguer2/fleteandotechido/blob/main/src/app/_layout.tsx"
click node_n_nav "https://github.com/vaguer2/fleteandotechido/blob/main/src/app/MyNavegation.js"
click node_n_home_user "https://github.com/vaguer2/fleteandotechido/blob/main/src/app/Screen/Home/ScreenHomeUser.js"
click node_n_home_delivery "https://github.com/vaguer2/fleteandotechido/blob/main/src/app/Screen/Home/ScreenHomeDelivery.js"
click node_n_explore "https://github.com/vaguer2/fleteandotechido/blob/main/src/app/explore.tsx"
click node_n_themed_text "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/themed-text.tsx"
click node_n_themed_view "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/themed-view.tsx"
click node_n_app_tabs "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/app-tabs.tsx"
click node_n_collapse "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/ui/collapsible.tsx"
click node_n_animated_icon "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/animated-icon.tsx"
click node_n_external_link "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/external-link.tsx"
click node_n_hint_row "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/hint-row.tsx"
click node_n_web_badge "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/web-badge.tsx"
click node_n_theme_state "https://github.com/vaguer2/fleteandotechido/blob/main/src/constants/theme.ts"
click node_n_use_theme "https://github.com/vaguer2/fleteandotechido/blob/main/src/hooks/use-theme.ts"
click node_n_color_scheme "https://github.com/vaguer2/fleteandotechido/blob/main/src/hooks/use-color-scheme.ts"
click node_n_color_scheme_web "https://github.com/vaguer2/fleteandotechido/blob/main/src/hooks/use-color-scheme.web.ts"
click node_n_animated_icon_web "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/animated-icon.web.tsx"
click node_n_app_tabs_web "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/app-tabs.web.tsx"
click node_n_global_css "https://github.com/vaguer2/fleteandotechido/blob/main/src/global.css"
click node_n_animated_css "https://github.com/vaguer2/fleteandotechido/blob/main/src/components/animated-icon.module.css"
click node_n_tab_icons "https://github.com/vaguer2/fleteandotechido/tree/main/assets/images/tabIcons"

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_n_entry,node_n_layout,node_n_nav,node_n_explore,node_n_supabase,node_n_figma,node_n_drive toneBlue
class node_n_home_user,node_n_home_delivery toneAmber
class node_n_themed_text,node_n_themed_view,node_n_app_tabs,node_n_collapse,node_n_animated_icon,node_n_external_link,node_n_hint_row,node_n_web_badge toneMint
class node_n_theme_state,node_n_use_theme,node_n_color_scheme toneRose
class node_n_color_scheme_web,node_n_animated_icon_web,node_n_app_tabs_web,node_n_global_css,node_n_animated_css toneIndigo
class node_n_tab_icons toneTeal
```

## Components

### App shell

Expo Router entry points and route orchestration.

- [Expo entry](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/index.tsx): runtime entry · App startup and route bootstrapping. · `src/app/index.tsx`
- [App shell](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/_layout.tsx): router shell · Top-level app layout and providers. · `src/app/_layout.tsx`
- [Nav selector](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/MyNavegation.js): navigation logic · Custom navigation and role-based screen selection. · `src/app/MyNavegation.js`
- [Explore](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/explore.tsx): route screen · Secondary top-level route. · `src/app/explore.tsx`

### Screens

User-facing feature screens and role-specific home experiences.

- [User home](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/Screen/Home/ScreenHomeUser.js): screen · User-oriented home experience. · `src/app/Screen/Home/ScreenHomeUser.js`
- [Delivery home](https://github.com/vaguer2/fleteandotechido/blob/main/src/app/Screen/Home/ScreenHomeDelivery.js): screen · Delivery-oriented home experience. · `src/app/Screen/Home/ScreenHomeDelivery.js`

### Shared UI

Reusable presentation components and UI primitives.

- [Themed text](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/themed-text.tsx): shared component · Theme-aware text primitive. · `src/components/themed-text.tsx`
- [Themed view](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/themed-view.tsx): shared component · Theme-aware container primitive. · `src/components/themed-view.tsx`
- [App tabs](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/app-tabs.tsx): navigation UI · Tab navigation component. · `src/components/app-tabs.tsx`
- [Collapsible](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/ui/collapsible.tsx): ui primitive · Expandable UI building block. · `src/components/ui/collapsible.tsx`
- [Animated icon](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/animated-icon.tsx): shared component · Animated icon widget. · `src/components/animated-icon.tsx`
- [External link](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/external-link.tsx): shared component · Linking helper for outbound navigation. · `src/components/external-link.tsx`
- [Hint row](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/hint-row.tsx): shared component · Inline hint / guidance row. · `src/components/hint-row.tsx`
- [Web badge](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/web-badge.tsx): shared component · Web-only badge or label component. · `src/components/web-badge.tsx`

### Theme

Color scheme and theme state used by components.

- [Theme state](https://github.com/vaguer2/fleteandotechido/blob/main/src/constants/theme.ts): theme config · Centralized theme constants. · `src/constants/theme.ts`
- [Use theme](https://github.com/vaguer2/fleteandotechido/blob/main/src/hooks/use-theme.ts): theme hook · Theme consumption hook. · `src/hooks/use-theme.ts`
- [Color scheme](https://github.com/vaguer2/fleteandotechido/blob/main/src/hooks/use-color-scheme.ts): platform hook · Platform-aware color scheme detection. · `src/hooks/use-color-scheme.ts`

### Platform variants

Web-specific overrides and cross-platform styling hooks.

- [Scheme web](https://github.com/vaguer2/fleteandotechido/blob/main/src/hooks/use-color-scheme.web.ts): web override · Web-specific color scheme implementation. · `src/hooks/use-color-scheme.web.ts`
- [Icon web](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/animated-icon.web.tsx): web override · Web-specific animated icon implementation. · `src/components/animated-icon.web.tsx`
- [Tabs web](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/app-tabs.web.tsx): web override · Web-specific tab navigation implementation. · `src/components/app-tabs.web.tsx`
- [Global CSS](https://github.com/vaguer2/fleteandotechido/blob/main/src/global.css): web stylesheet · Web-wide styling layer. · `src/global.css`
- [Icon styles](https://github.com/vaguer2/fleteandotechido/blob/main/src/components/animated-icon.module.css): css module · Component-level CSS for animated icon. · `src/components/animated-icon.module.css`

### Assets

Static visual resources used by the UI.

- [Tab icons](https://github.com/vaguer2/fleteandotechido/tree/main/assets/images/tabIcons): assets · Static images for navigation branding. · `assets/images/tabIcons`

### External services

External dependencies and documentation/design sources referenced by the project.

- **Supabase**: external backend · External backend/data service referenced by the project.
- **Figma**: external design · Design source referenced in documentation.
- **Drive docs**: external docs · Documentation referenced in the README.

## Connections

- Expo entry → App shell: bootstraps · Expo entry loads the top-level app shell.
- App shell → Nav selector: hosts · Shell delegates screen selection and navigation.
- Nav selector → User home: selects · Navigation can present the user home experience.
- Nav selector → Delivery home: selects · Navigation can present the delivery home experience.
- App shell → Explore: routes to · Shared app shell also exposes top-level routes.
- User home → Themed view: uses · Home screen composes shared themed containers.
- User home → Themed text: uses · Home screen uses theme-aware text.
- Delivery home → Themed view: uses · Delivery screen composes shared themed containers.
- Delivery home → Themed text: uses · Delivery screen uses theme-aware text.
- Explore → Collapsible: uses · Explore route builds interactive sections with shared primitives.
- Explore → External link: uses · Explore route includes outbound links.
- Explore → Hint row: uses · Explore route presents helper rows.
- Explore → Web badge: uses · Explore route uses a web-oriented badge.
- App tabs → Tab icons: loads · Tab navigation is branded with static icons.
- Themed text → Use theme: consumes · Text styling is driven by the theme hook.
- Themed view → Use theme: consumes · Container styling is driven by the theme hook.
- Use theme → Theme state: reads · Theme hook derives values from centralized theme state.
- Color scheme → Scheme web: overrides · Web build replaces the native color scheme hook.
- Animated icon → Icon web: overrides · Web build replaces the native animated icon component.
- App tabs → Tabs web: overrides · Web build replaces the tab navigation implementation.
- Animated icon → Icon styles: styles · Animated icon relies on component-scoped CSS.
- App shell → Global CSS: includes · Web shell participates in global CSS styling.
- App shell → Color scheme: detects · Shell uses platform color-scheme detection for appearance.
- App shell → Supabase: integrates with · Project documentation indicates an external Supabase backend dependency.
- App shell → Figma: references · README points to external design source.
- App shell → Drive docs: references · README points to external documentation.