# narngisa/web-software architecture

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

- Interactive diagram: https://gitdiagram.com/narngisa/web-software
- Repository: https://github.com/narngisa/web-software

## Overview

NutriTrack is a browser-based food and personal-health tracker. Users can classify food from a webcam or uploaded image and see confidence and calorie information, calculate BMI/BMR, or build a calorie and macronutrient plan for a health goal. The frontend routes these distinct workflows; an optional Express server serves the built frontend. The source excerpts show page routing, calculations, and food-data lookup. The README documents TensorFlow.js model use and server behavior, but model-loading details are not fully shown.

Main entry points: [`client/src/pages/home.tsx`](https://github.com/narngisa/web-software/blob/main/client/src/pages/home.tsx) (Food classifier), [`client/src/routes/Router.tsx`](https://github.com/narngisa/web-software/blob/main/client/src/routes/Router.tsx) (Page router), [`client/src/pages/bmi.tsx`](https://github.com/narngisa/web-software/blob/main/client/src/pages/bmi.tsx) (BMI and BMR), [`client/src/pages/goalsPage.tsx`](https://github.com/narngisa/web-software/blob/main/client/src/pages/goalsPage.tsx) (Nutrition goals)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_entry["React entry<br/>[main.tsx]"]
  node_app["App shell<br/>[App.tsx]"]
  node_router["Page router<br/>[Router.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_food["Food analysis"]
  node_foodpage["Food classifier<br/>[home.tsx]"]
  node_model["Food model<br/>[model.json]"]
  node_fooddata["Calorie reference<br/>[foodInfo.ts]"]
end

subgraph group_health["Health planning"]
  node_bmi["BMI and BMR<br/>[bmi.tsx]"]
  node_goals["Nutrition goals<br/>[goalsPage.tsx]"]
end

subgraph group_hosting["Frontend hosting"]
  node_server["Express host<br/>[index.js]"]
end

node_user(("User"))

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_router
node_router -->|"routes to"| node_foodpage
node_router -->|"routes to"| node_bmi
node_router -->|"routes to"| node_goals
node_foodpage -->|"renders"| node_navbar
node_foodpage -->|"renders"| node_footer
node_bmi -->|"renders"| node_navbar
node_bmi -->|"renders"| node_footer
node_goals -->|"renders"| node_navbar
node_goals -->|"renders"| node_footer
node_foodpage -->|"looks up calories"| node_fooddata
node_foodpage -.->|"loads for inference"| node_model
node_user -->|"requests hosted app"| node_server

click node_entry "https://github.com/narngisa/web-software/blob/main/client/src/main.tsx"
click node_app "https://github.com/narngisa/web-software/blob/main/client/src/App.tsx"
click node_router "https://github.com/narngisa/web-software/blob/main/client/src/routes/Router.tsx"
click node_navbar "https://github.com/narngisa/web-software/blob/main/client/src/components/Navbar.tsx"
click node_footer "https://github.com/narngisa/web-software/blob/main/client/src/components/Footer.tsx"
click node_foodpage "https://github.com/narngisa/web-software/blob/main/client/src/pages/home.tsx"
click node_model "https://github.com/narngisa/web-software/blob/main/client/public/model/model.json"
click node_fooddata "https://github.com/narngisa/web-software/blob/main/client/src/data/foodInfo.ts"
click node_bmi "https://github.com/narngisa/web-software/blob/main/client/src/pages/bmi.tsx"
click node_goals "https://github.com/narngisa/web-software/blob/main/client/src/pages/goalsPage.tsx"
click node_server "https://github.com/narngisa/web-software/blob/main/server/index.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_entry,node_app,node_router,node_navbar,node_footer,node_user toneBlue
class node_foodpage,node_model,node_fooddata toneAmber
class node_bmi,node_goals toneMint
class node_server toneRose
```

## Components

### Web application

- [React entry](https://github.com/narngisa/web-software/blob/main/client/src/main.tsx): `client/src/main.tsx`
- [App shell](https://github.com/narngisa/web-software/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Page router](https://github.com/narngisa/web-software/blob/main/client/src/routes/Router.tsx): `client/src/routes/Router.tsx`
- [Navigation](https://github.com/narngisa/web-software/blob/main/client/src/components/Navbar.tsx): `client/src/components/Navbar.tsx`
- [Footer](https://github.com/narngisa/web-software/blob/main/client/src/components/Footer.tsx): `client/src/components/Footer.tsx`

### Food analysis

- [Food classifier](https://github.com/narngisa/web-software/blob/main/client/src/pages/home.tsx): `client/src/pages/home.tsx`
- [Food model](https://github.com/narngisa/web-software/blob/main/client/public/model/model.json): `client/public/model/model.json`
- [Calorie reference](https://github.com/narngisa/web-software/blob/main/client/src/data/foodInfo.ts): `client/src/data/foodInfo.ts`

### Health planning

- [BMI and BMR](https://github.com/narngisa/web-software/blob/main/client/src/pages/bmi.tsx): `client/src/pages/bmi.tsx`
- [Nutrition goals](https://github.com/narngisa/web-software/blob/main/client/src/pages/goalsPage.tsx): `client/src/pages/goalsPage.tsx`

### Frontend hosting

- [Express host](https://github.com/narngisa/web-software/blob/main/server/index.js): `server/index.js`

### Other components

- **User**

## Connections

- User → React entry: opens app (evidence: `README.md`)
- React entry → App shell: renders (evidence: `client/src/main.tsx`)
- App shell → Page router: renders (evidence: `client/src/App.tsx`)
- Page router → Food classifier: routes to (evidence: `client/src/routes/Router.tsx`)
- Page router → BMI and BMR: routes to (evidence: `client/src/routes/Router.tsx`)
- Page router → Nutrition goals: routes to (evidence: `client/src/routes/Router.tsx`)
- Food classifier → Navigation: renders (evidence: `client/src/pages/home.tsx`)
- Food classifier → Footer: renders (evidence: `client/src/pages/home.tsx`)
- BMI and BMR → Navigation: renders (evidence: `client/src/pages/bmi.tsx`)
- BMI and BMR → Footer: renders (evidence: `client/src/pages/bmi.tsx`)
- Nutrition goals → Navigation: renders (evidence: `client/src/pages/goalsPage.tsx`)
- Nutrition goals → Footer: renders (evidence: `client/src/pages/goalsPage.tsx`)
- Food classifier → Calorie reference: looks up calories (evidence: `client/src/pages/home.tsx`)
- Food classifier → Food model: loads for inference (evidence: `README.md`)
- User → Express host: requests hosted app (evidence: `README.md`)