# jbjpsakura/saveupapp architecture

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

- Interactive diagram: https://gitdiagram.com/jbjpsakura/saveupapp
- Repository: https://github.com/jbjpsakura/saveupapp

## Overview

Saveup is an Expo/React Native starter app with file-based routing, a home tab, an Explore tab, and a modal. The visible workflow is user navigation through the app shell to screens, which render shared themed and interactive UI. The Explore screen demonstrates collapsible sections, parallax scrolling, and external links. The home screen is a substantial source file but was not excerpted, so its domain behavior and dependencies cannot be established here.

Main entry points: [`app/(tabs)/explore.tsx`](https://github.com/jbjpsakura/saveupapp/blob/main/app/(tabs)/explore.tsx) (Explore screen), [`components/ui/collapsible.tsx`](https://github.com/jbjpsakura/saveupapp/blob/main/components/ui/collapsible.tsx) (Collapsible sections), [`hooks/use-theme-color.ts`](https://github.com/jbjpsakura/saveupapp/blob/main/hooks/use-theme-color.ts) (Theme color hook), [`components/themed-view.tsx`](https://github.com/jbjpsakura/saveupapp/blob/main/components/themed-view.tsx) (Themed view)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App navigation"]
  node_root["Root layout<br/>[_layout.tsx]"]
  node_tabs["Tab navigation<br/>[_layout.tsx]"]
end

subgraph group_screens["Screens"]
  node_home["Home screen<br/>[index.tsx]"]
  node_explore["Explore screen<br/>[explore.tsx]"]
  node_modal["Modal screen<br/>[modal.tsx]"]
end

subgraph group_ui["Shared UI and theme"]
  node_parallax["Parallax scroll"]
  node_collapsible["Collapsible sections<br/>[collapsible.tsx]"]
  node_external["External link<br/>[external-link.tsx]"]
  node_themed_text["Themed text<br/>[themed-text.tsx]"]
  node_themed_view["Themed view<br/>[themed-view.tsx]"]
  node_theme_color["Theme color hook<br/>[use-theme-color.ts]"]
  node_color_scheme["Color scheme hook"]
  node_theme["Theme palette<br/>[theme.ts]"]
  node_icons["Platform icons<br/>[icon-symbol.tsx]"]
  node_ios_icons["iOS icons"]
  node_haptic_tab["Haptic tab<br/>[haptic-tab.tsx]"]
  node_hello_wave["Hello animation<br/>[hello-wave.tsx]"]
end

node_user(("App user"))
node_browser["In-app browser"]

node_user -->|"opens app"| node_root
node_root -->|"reads scheme"| node_color_scheme
node_root -->|"routes to"| node_tabs
node_tabs -->|"hosts screen"| node_home
node_tabs -->|"hosts screen"| node_explore
node_user -.->|"opens modal"| node_modal
node_explore -->|"renders"| node_parallax
node_explore -->|"renders"| node_collapsible
node_explore -->|"renders"| node_external
node_explore -->|"renders"| node_themed_text
node_explore -->|"renders"| node_themed_view
node_explore -->|"renders"| node_icons
node_parallax -->|"renders"| node_themed_view
node_parallax -->|"reads color"| node_theme_color
node_parallax -->|"reads scheme"| node_color_scheme
node_collapsible -->|"renders"| node_themed_view
node_collapsible -->|"renders"| node_themed_text
node_collapsible -->|"renders"| node_icons
node_collapsible -->|"reads palette"| node_theme
node_collapsible -->|"reads scheme"| node_color_scheme
node_themed_text -->|"gets text color"| node_theme_color
node_themed_view -->|"gets background"| node_theme_color
node_theme_color -->|"reads scheme"| node_color_scheme
node_theme_color -->|"reads palette"| node_theme
node_external -->|"opens link"| node_browser
node_modal -->|"renders"| node_themed_text
node_modal -->|"renders"| node_themed_view

click node_root "https://github.com/jbjpsakura/saveupapp/blob/main/app/_layout.tsx"
click node_tabs "https://github.com/jbjpsakura/saveupapp/blob/main/app/(tabs)/_layout.tsx"
click node_home "https://github.com/jbjpsakura/saveupapp/blob/main/app/(tabs)/index.tsx"
click node_explore "https://github.com/jbjpsakura/saveupapp/blob/main/app/(tabs)/explore.tsx"
click node_modal "https://github.com/jbjpsakura/saveupapp/blob/main/app/modal.tsx"
click node_parallax "https://github.com/jbjpsakura/saveupapp/blob/main/components/parallax-scroll-view.tsx"
click node_collapsible "https://github.com/jbjpsakura/saveupapp/blob/main/components/ui/collapsible.tsx"
click node_external "https://github.com/jbjpsakura/saveupapp/blob/main/components/external-link.tsx"
click node_themed_text "https://github.com/jbjpsakura/saveupapp/blob/main/components/themed-text.tsx"
click node_themed_view "https://github.com/jbjpsakura/saveupapp/blob/main/components/themed-view.tsx"
click node_theme_color "https://github.com/jbjpsakura/saveupapp/blob/main/hooks/use-theme-color.ts"
click node_color_scheme "https://github.com/jbjpsakura/saveupapp/blob/main/hooks/use-color-scheme.ts"
click node_theme "https://github.com/jbjpsakura/saveupapp/blob/main/constants/theme.ts"
click node_icons "https://github.com/jbjpsakura/saveupapp/blob/main/components/ui/icon-symbol.tsx"
click node_ios_icons "https://github.com/jbjpsakura/saveupapp/blob/main/components/ui/icon-symbol.ios.tsx"
click node_haptic_tab "https://github.com/jbjpsakura/saveupapp/blob/main/components/haptic-tab.tsx"
click node_hello_wave "https://github.com/jbjpsakura/saveupapp/blob/main/components/hello-wave.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_root,node_tabs,node_user,node_browser toneBlue
class node_home,node_explore,node_modal toneAmber
class node_parallax,node_collapsible,node_external,node_themed_text,node_themed_view,node_theme_color,node_color_scheme,node_theme,node_icons,node_ios_icons,node_haptic_tab,node_hello_wave toneMint
```

## Components

### App navigation

- [Root layout](https://github.com/jbjpsakura/saveupapp/blob/main/app/_layout.tsx): `app/_layout.tsx`
- [Tab navigation](https://github.com/jbjpsakura/saveupapp/blob/main/app/(tabs)/_layout.tsx): `app/(tabs)/_layout.tsx`

### Screens

- [Home screen](https://github.com/jbjpsakura/saveupapp/blob/main/app/(tabs)/index.tsx): `app/(tabs)/index.tsx`
- [Explore screen](https://github.com/jbjpsakura/saveupapp/blob/main/app/(tabs)/explore.tsx): `app/(tabs)/explore.tsx`
- [Modal screen](https://github.com/jbjpsakura/saveupapp/blob/main/app/modal.tsx): `app/modal.tsx`

### Shared UI and theme

- [Parallax scroll](https://github.com/jbjpsakura/saveupapp/blob/main/components/parallax-scroll-view.tsx): `components/parallax-scroll-view.tsx`
- [Collapsible sections](https://github.com/jbjpsakura/saveupapp/blob/main/components/ui/collapsible.tsx): `components/ui/collapsible.tsx`
- [External link](https://github.com/jbjpsakura/saveupapp/blob/main/components/external-link.tsx): `components/external-link.tsx`
- [Themed text](https://github.com/jbjpsakura/saveupapp/blob/main/components/themed-text.tsx): `components/themed-text.tsx`
- [Themed view](https://github.com/jbjpsakura/saveupapp/blob/main/components/themed-view.tsx): `components/themed-view.tsx`
- [Theme color hook](https://github.com/jbjpsakura/saveupapp/blob/main/hooks/use-theme-color.ts): `hooks/use-theme-color.ts`
- [Color scheme hook](https://github.com/jbjpsakura/saveupapp/blob/main/hooks/use-color-scheme.ts): `hooks/use-color-scheme.ts`
- [Theme palette](https://github.com/jbjpsakura/saveupapp/blob/main/constants/theme.ts): `constants/theme.ts`
- [Platform icons](https://github.com/jbjpsakura/saveupapp/blob/main/components/ui/icon-symbol.tsx): `components/ui/icon-symbol.tsx`
- [iOS icons](https://github.com/jbjpsakura/saveupapp/blob/main/components/ui/icon-symbol.ios.tsx): `components/ui/icon-symbol.ios.tsx`
- [Haptic tab](https://github.com/jbjpsakura/saveupapp/blob/main/components/haptic-tab.tsx): `components/haptic-tab.tsx`
- [Hello animation](https://github.com/jbjpsakura/saveupapp/blob/main/components/hello-wave.tsx): `components/hello-wave.tsx`

### Other components

- **App user**
- **In-app browser**

## Connections

- App user → Root layout: opens app (evidence: `README.md`)
- Root layout → Color scheme hook: reads scheme (evidence: `app/_layout.tsx`)
- Root layout → Tab navigation: routes to (evidence: `app/_layout.tsx`)
- Tab navigation → Home screen: hosts screen (evidence: `README.md`)
- Tab navigation → Explore screen: hosts screen (evidence: `README.md`)
- App user → Modal screen: opens modal
- Explore screen → Parallax scroll: renders (evidence: `app/(tabs)/explore.tsx`)
- Explore screen → Collapsible sections: renders (evidence: `app/(tabs)/explore.tsx`)
- Explore screen → External link: renders (evidence: `app/(tabs)/explore.tsx`)
- Explore screen → Themed text: renders (evidence: `app/(tabs)/explore.tsx`)
- Explore screen → Themed view: renders (evidence: `app/(tabs)/explore.tsx`)
- Explore screen → Platform icons: renders (evidence: `app/(tabs)/explore.tsx`)
- Parallax scroll → Themed view: renders (evidence: `components/parallax-scroll-view.tsx`)
- Parallax scroll → Theme color hook: reads color (evidence: `components/parallax-scroll-view.tsx`)
- Parallax scroll → Color scheme hook: reads scheme (evidence: `components/parallax-scroll-view.tsx`)
- Collapsible sections → Themed view: renders (evidence: `components/ui/collapsible.tsx`)
- Collapsible sections → Themed text: renders (evidence: `components/ui/collapsible.tsx`)
- Collapsible sections → Platform icons: renders (evidence: `components/ui/collapsible.tsx`)
- Collapsible sections → Theme palette: reads palette (evidence: `components/ui/collapsible.tsx`)
- Collapsible sections → Color scheme hook: reads scheme (evidence: `components/ui/collapsible.tsx`)
- Themed text → Theme color hook: gets text color (evidence: `components/themed-text.tsx`)
- Themed view → Theme color hook: gets background (evidence: `components/themed-view.tsx`)
- Theme color hook → Color scheme hook: reads scheme (evidence: `hooks/use-theme-color.ts`)
- Theme color hook → Theme palette: reads palette (evidence: `hooks/use-theme-color.ts`)
- External link → In-app browser: opens link (evidence: `components/external-link.tsx`)
- Modal screen → Themed text: renders (evidence: `app/modal.tsx`)
- Modal screen → Themed view: renders (evidence: `app/modal.tsx`)