# jricardoss/money-web architecture

> Architecture diagram of the GitHub repository jricardoss/money-web, 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/jricardoss/money-web
- Repository: https://github.com/jricardoss/money-web

## Overview

This is a React expense-tracking frontend. Users view and filter expenses, see a total, add or edit an expense, and delete one; the list and form call an HTTP API. The router selects the home or expense form page, while shared navigation and sidebar components provide search and navigation. The README describes only Create React App setup, so product capabilities here are inferred from the sampled source. The graph omits unsampled backend behavior.

Main entry points: [`src/pages/home/home.jsx`](https://github.com/jricardoss/money-web/blob/master/src/pages/home/home.jsx) (Expense list), [`src/pages/cadDespresa/cadDespesa.jsx`](https://github.com/jricardoss/money-web/blob/master/src/pages/cadDespresa/cadDespesa.jsx) (Expense form), [`src/components/navBar/navBar.jsx`](https://github.com/jricardoss/money-web/blob/master/src/components/navBar/navBar.jsx) (Search and total bar), [`src/index.js`](https://github.com/jricardoss/money-web/blob/master/src/index.js) (Route setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App routing"]
  node_router["Route setup<br/>[index.js]"]
end

subgraph group_expenses["Expense workflows"]
  node_home["Expense list<br/>[home.jsx]"]
  node_form["Expense form<br/>[cadDespesa.jsx]"]
end

subgraph group_shared["Shared UI and API"]
  node_navbar["Search and total bar<br/>[navBar.jsx]"]
  node_sidebar["Navigation sidebar<br/>[sideBar.jsx]"]
  node_api["HTTP API client<br/>[api.js]"]
  node_icons["Icon assets<br/>[icons.js]"]
end

node_browser(("User browser"))
node_backend["Expense API service"]

node_browser -->|"opens app"| node_router
node_router -->|"routes /"| node_home
node_router -->|"routes expenses"| node_form
node_home -->|"lists and deletes"| node_api
node_form -->|"loads and saves"| node_api
node_api -->|"sends requests"| node_backend
node_home -->|"renders with search"| node_navbar
node_navbar -->|"calls search callback"| node_home
node_home -->|"renders"| node_sidebar
node_form -->|"renders"| node_navbar
node_form -->|"renders"| node_sidebar
node_home -->|"uses icons"| node_icons
node_navbar -->|"uses logo"| node_icons
node_sidebar -->|"uses navigation icons"| node_icons

click node_router "https://github.com/jricardoss/money-web/blob/master/src/index.js"
click node_home "https://github.com/jricardoss/money-web/blob/master/src/pages/home/home.jsx"
click node_form "https://github.com/jricardoss/money-web/blob/master/src/pages/cadDespresa/cadDespesa.jsx"
click node_navbar "https://github.com/jricardoss/money-web/blob/master/src/components/navBar/navBar.jsx"
click node_sidebar "https://github.com/jricardoss/money-web/blob/master/src/components/sideBar/sideBar.jsx"
click node_api "https://github.com/jricardoss/money-web/blob/master/src/services/api.js"
click node_icons "https://github.com/jricardoss/money-web/blob/master/src/styles/icons.js"

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_router,node_browser toneBlue
class node_home,node_form toneAmber
class node_navbar,node_sidebar,node_api,node_icons,node_backend toneMint
```

## Components

### App routing

- [Route setup](https://github.com/jricardoss/money-web/blob/master/src/index.js): `src/index.js`

### Expense workflows

- [Expense list](https://github.com/jricardoss/money-web/blob/master/src/pages/home/home.jsx): `src/pages/home/home.jsx`
- [Expense form](https://github.com/jricardoss/money-web/blob/master/src/pages/cadDespresa/cadDespesa.jsx): `src/pages/cadDespresa/cadDespesa.jsx`

### Shared UI and API

- [Search and total bar](https://github.com/jricardoss/money-web/blob/master/src/components/navBar/navBar.jsx): `src/components/navBar/navBar.jsx`
- [Navigation sidebar](https://github.com/jricardoss/money-web/blob/master/src/components/sideBar/sideBar.jsx): `src/components/sideBar/sideBar.jsx`
- [HTTP API client](https://github.com/jricardoss/money-web/blob/master/src/services/api.js): `src/services/api.js`
- [Icon assets](https://github.com/jricardoss/money-web/blob/master/src/styles/icons.js): `src/styles/icons.js`

### Other components

- **User browser**
- **Expense API service**

## Connections

- User browser → Route setup: opens app
- Route setup → Expense list: routes / (evidence: `src/index.js`)
- Route setup → Expense form: routes expenses (evidence: `src/index.js`)
- Expense list → HTTP API client: lists and deletes (evidence: `src/pages/home/home.jsx`)
- Expense form → HTTP API client: loads and saves (evidence: `src/pages/cadDespresa/cadDespesa.jsx`)
- HTTP API client → Expense API service: sends requests (evidence: `src/services/api.js`)
- Expense list → Search and total bar: renders with search (evidence: `src/pages/home/home.jsx`)
- Search and total bar → Expense list: calls search callback (evidence: `src/components/navBar/navBar.jsx`)
- Expense list → Navigation sidebar: renders (evidence: `src/pages/home/home.jsx`)
- Expense form → Search and total bar: renders (evidence: `src/pages/cadDespresa/cadDespesa.jsx`)
- Expense form → Navigation sidebar: renders (evidence: `src/pages/cadDespresa/cadDespesa.jsx`)
- Expense list → Icon assets: uses icons (evidence: `src/pages/home/home.jsx`)
- Search and total bar → Icon assets: uses logo (evidence: `src/components/navBar/navBar.jsx`)
- Navigation sidebar → Icon assets: uses navigation icons (evidence: `src/components/sideBar/sideBar.jsx`)