# ferdinaldopelembe/mali architecture

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

- Interactive diagram: https://gitdiagram.com/ferdinaldopelembe/mali
- Repository: https://github.com/ferdinaldopelembe/mali

## Overview

Mali is an offline shopping-budget app: the shopper sets a starting balance, adds priced products and quantities, watches the remaining budget, then saves or discards the purchase and can review past purchases. The graph separates shopping interaction, product suggestions, state and persistence, history, and shared app presentation. Edges follow the shown screen calls and store actions; the README documents offline storage and system-driven themes, while storage internals beyond the sampled store are not inferred.

Main entry points: [`app/(tabs)/index.tsx`](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/index.tsx) (Shopping screen), [`src/store.tsx`](https://github.com/ferdinaldopelembe/mali/blob/main/src/store.tsx) (Purchase rules and state), [`src/AddProduct.tsx`](https://github.com/ferdinaldopelembe/mali/blob/main/src/AddProduct.tsx) (Product entry), [`app/(tabs)/historico.tsx`](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/historico.tsx) (History screen)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shopping["Shopping flow"]
  node_shopping_screen["Shopping screen<br/>[index.tsx]"]
  node_budget_start["Set starting balance<br/>[index.tsx]"]
  node_balance_card["Balance display<br/>[Hero.tsx]"]
  node_cart["Cart and checkout<br/>[index.tsx]"]
end

subgraph group_catalog["Product entry"]
  node_product_entry["Product entry<br/>[AddProduct.tsx]"]
  node_product_catalog["Product and price references<br/>[data.ts]"]
  node_formatting["Text and money formatting<br/>[format.ts]"]
end

subgraph group_state["Purchase state"]
  node_purchase_state["Purchase rules and state<br/>[store.tsx]"]
  node_local_storage[("On-device persistence<br/>[store.tsx]")]
end

subgraph group_history["Purchase history"]
  node_history_screen["History screen<br/>[historico.tsx]"]
  node_history_actions["Expand and delete records<br/>[historico.tsx]"]
end

subgraph group_app["App presentation"]
  node_root_layout["Provider and app gate<br/>[_layout.tsx]"]
  node_tab_navigation["Tab navigation<br/>[_layout.tsx]"]
  node_theme["System color theme<br/>[theme.ts]"]
  node_shared_ui["Shared UI components<br/>[ui.tsx]"]
end

node_shopper(("Shopper"))

node_shopper -->|"opens"| node_shopping_screen
node_shopping_screen -->|"shows when inactive"| node_budget_start
node_budget_start -->|"starts budget"| node_purchase_state
node_shopping_screen -->|"renders"| node_balance_card
node_shopping_screen -->|"renders"| node_product_entry
node_product_entry -->|"reads references"| node_product_catalog
node_product_entry -->|"adds item"| node_purchase_state
node_shopping_screen -->|"renders"| node_cart
node_cart -->|"removes or finalizes"| node_purchase_state
node_purchase_state -->|"loads and saves"| node_local_storage
node_purchase_state -->|"provides purchases"| node_history_screen
node_history_screen -->|"renders records"| node_history_actions
node_history_actions -->|"deletes record"| node_purchase_state
node_root_layout -->|"provides state"| node_purchase_state
node_root_layout -->|"hosts screens"| node_tab_navigation
node_tab_navigation -->|"reads colors"| node_theme
node_shopping_screen -->|"reads colors"| node_theme
node_history_screen -->|"reads colors"| node_theme
node_product_entry -->|"formats and normalizes"| node_formatting
node_cart -->|"formats amounts"| node_formatting
node_history_screen -->|"formats amounts"| node_formatting
node_balance_card -->|"formats balance"| node_formatting
node_shopping_screen -->|"uses components"| node_shared_ui
node_product_entry -->|"uses components"| node_shared_ui
node_history_screen -->|"uses components"| node_shared_ui
node_shared_ui -->|"reads colors"| node_theme

click node_shopping_screen "https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/index.tsx"
click node_budget_start "https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/index.tsx"
click node_balance_card "https://github.com/ferdinaldopelembe/mali/blob/main/src/Hero.tsx"
click node_cart "https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/index.tsx"
click node_product_entry "https://github.com/ferdinaldopelembe/mali/blob/main/src/AddProduct.tsx"
click node_product_catalog "https://github.com/ferdinaldopelembe/mali/blob/main/src/data.ts"
click node_formatting "https://github.com/ferdinaldopelembe/mali/blob/main/src/format.ts"
click node_purchase_state "https://github.com/ferdinaldopelembe/mali/blob/main/src/store.tsx"
click node_local_storage "https://github.com/ferdinaldopelembe/mali/blob/main/src/store.tsx"
click node_history_screen "https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/historico.tsx"
click node_history_actions "https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/historico.tsx"
click node_root_layout "https://github.com/ferdinaldopelembe/mali/blob/main/app/_layout.tsx"
click node_tab_navigation "https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/_layout.tsx"
click node_theme "https://github.com/ferdinaldopelembe/mali/blob/main/src/theme.ts"
click node_shared_ui "https://github.com/ferdinaldopelembe/mali/blob/main/src/ui.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_shopping_screen,node_budget_start,node_balance_card,node_cart toneBlue
class node_product_entry,node_product_catalog,node_formatting toneAmber
class node_purchase_state,node_local_storage toneMint
class node_history_screen,node_history_actions toneRose
class node_root_layout,node_tab_navigation,node_theme,node_shared_ui,node_shopper toneIndigo
```

## Components

### Shopping flow

- [Shopping screen](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/index.tsx): `app/(tabs)/index.tsx`
- [Set starting balance](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/index.tsx): `app/(tabs)/index.tsx`
- [Balance display](https://github.com/ferdinaldopelembe/mali/blob/main/src/Hero.tsx): `src/Hero.tsx`
- [Cart and checkout](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/index.tsx): `app/(tabs)/index.tsx`

### Product entry

- [Product entry](https://github.com/ferdinaldopelembe/mali/blob/main/src/AddProduct.tsx): `src/AddProduct.tsx`
- [Product and price references](https://github.com/ferdinaldopelembe/mali/blob/main/src/data.ts): `src/data.ts`
- [Text and money formatting](https://github.com/ferdinaldopelembe/mali/blob/main/src/format.ts): `src/format.ts`

### Purchase state

- [Purchase rules and state](https://github.com/ferdinaldopelembe/mali/blob/main/src/store.tsx): `src/store.tsx`
- [On-device persistence](https://github.com/ferdinaldopelembe/mali/blob/main/src/store.tsx): `src/store.tsx`

### Purchase history

- [History screen](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/historico.tsx): `app/(tabs)/historico.tsx`
- [Expand and delete records](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/historico.tsx): `app/(tabs)/historico.tsx`

### App presentation

- [Provider and app gate](https://github.com/ferdinaldopelembe/mali/blob/main/app/_layout.tsx): `app/_layout.tsx`
- [Tab navigation](https://github.com/ferdinaldopelembe/mali/blob/main/app/(tabs)/_layout.tsx): `app/(tabs)/_layout.tsx`
- [System color theme](https://github.com/ferdinaldopelembe/mali/blob/main/src/theme.ts): `src/theme.ts`
- [Shared UI components](https://github.com/ferdinaldopelembe/mali/blob/main/src/ui.tsx): `src/ui.tsx`

### Other components

- **Shopper**

## Connections

- Shopper → Shopping screen: opens (evidence: `README.md`)
- Shopping screen → Set starting balance: shows when inactive (evidence: `app/(tabs)/index.tsx`)
- Set starting balance → Purchase rules and state: starts budget (evidence: `app/(tabs)/index.tsx`)
- Shopping screen → Balance display: renders (evidence: `app/(tabs)/index.tsx`)
- Shopping screen → Product entry: renders (evidence: `app/(tabs)/index.tsx`)
- Product entry → Product and price references: reads references (evidence: `src/AddProduct.tsx`)
- Product entry → Purchase rules and state: adds item (evidence: `src/AddProduct.tsx`)
- Shopping screen → Cart and checkout: renders (evidence: `app/(tabs)/index.tsx`)
- Cart and checkout → Purchase rules and state: removes or finalizes (evidence: `app/(tabs)/index.tsx`)
- Purchase rules and state → On-device persistence: loads and saves (evidence: `src/store.tsx`)
- Purchase rules and state → History screen: provides purchases (evidence: `app/(tabs)/historico.tsx`)
- History screen → Expand and delete records: renders records (evidence: `app/(tabs)/historico.tsx`)
- Expand and delete records → Purchase rules and state: deletes record (evidence: `app/(tabs)/historico.tsx`)
- Provider and app gate → Purchase rules and state: provides state (evidence: `app/_layout.tsx`)
- Provider and app gate → Tab navigation: hosts screens (evidence: `app/_layout.tsx`)
- Tab navigation → System color theme: reads colors (evidence: `app/(tabs)/_layout.tsx`)
- Shopping screen → System color theme: reads colors (evidence: `app/(tabs)/index.tsx`)
- History screen → System color theme: reads colors (evidence: `app/(tabs)/historico.tsx`)
- Product entry → Text and money formatting: formats and normalizes (evidence: `src/AddProduct.tsx`)
- Cart and checkout → Text and money formatting: formats amounts (evidence: `app/(tabs)/index.tsx`)
- History screen → Text and money formatting: formats amounts (evidence: `app/(tabs)/historico.tsx`)
- Balance display → Text and money formatting: formats balance (evidence: `src/Hero.tsx`)
- Shopping screen → Shared UI components: uses components (evidence: `app/(tabs)/index.tsx`)
- Product entry → Shared UI components: uses components (evidence: `src/AddProduct.tsx`)
- History screen → Shared UI components: uses components (evidence: `app/(tabs)/historico.tsx`)
- Shared UI components → System color theme: reads colors (evidence: `src/ui.tsx`)