# findxme/fmhome architecture

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

- Interactive diagram: https://gitdiagram.com/findxme/fmhome
- Repository: https://github.com/findxme/fmhome

## Overview

fmHome is a household grocery-planning web app. Users browse or create recipes, choose what to cook, gather ingredients into a shopping list, and record purchases; favorites support saving recipes. The Vue frontend communicates with an Express API backed by MySQL. The graph preserves these product stages and shows the recipe-detail and shopping-list calls visible in sampled source. Other page, store, route, and controller wiring is represented at subsystem level from the tree and README; their implementation details were not sampled.

Main entry points: [`backend/src/app.js`](https://github.com/findxme/fmhome/blob/main/backend/src/app.js) (HTTP app), [`frontend/src/utils/api.js`](https://github.com/findxme/fmhome/blob/main/frontend/src/utils/api.js) (API client), [`backend/src/utils/db.js`](https://github.com/findxme/fmhome/blob/main/backend/src/utils/db.js) (SQL access), [`frontend/src/components/TabBar.vue`](https://github.com/findxme/fmhome/blob/main/frontend/src/components/TabBar.vue) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Vue client"]
  node_app["App shell<br/>[App.vue]"]
  node_navigation["Navigation<br/>[TabBar.vue]"]
  node_recipe_store["Recipe state<br/>[recipes.js]"]
  node_meal_store["Meal-pick state<br/>[mealPicks.js]"]
  node_shopping_store["Shopping state<br/>[shoppingList.js]"]
  node_favorites_store["Favorites state<br/>[favorites.js]"]
  node_purchase_store["Purchase state<br/>[purchase.js]"]
  node_api_client["API client<br/>[api.js]"]
end

subgraph group_planning["Meal planning"]
  node_home["Today’s meal<br/>[Home.vue]"]
  node_recipe_pages["Recipe browsing<br/>[Recipes.vue]"]
  node_recipe_detail["Recipe detail<br/>[RecipeDetail.vue]"]
  node_recipe_form["Recipe editor<br/>[RecipeForm.vue]"]
  node_favorites_page["Saved recipes<br/>[Favorites.vue]"]
  node_ledger_page["Purchase ledger<br/>[Ledger.vue]"]
  node_shopping_page["Shopping list<br/>[Home.vue]"]
end

subgraph group_api["Express API"]
  node_express_app["HTTP app<br/>[app.js]"]
  node_recipe_routes["Recipe routes<br/>[recipe.js]"]
  node_meal_routes["Meal-pick routes<br/>[mealPick.js]"]
  node_shopping_routes["Shopping routes<br/>[shoppingList.js]"]
  node_purchase_routes["Purchase routes<br/>[purchase.js]"]
  node_favorite_routes["Favorite routes<br/>[favorite.js]"]
  node_recipe_controller["Recipe operations<br/>[recipe.js]"]
  node_meal_controller["Meal-pick operations<br/>[mealPick.js]"]
  node_shopping_controller["Shopping operations<br/>[shoppingList.js]"]
  node_purchase_controller["Purchase operations<br/>[purchase.js]"]
  node_favorite_controller["Favorite operations<br/>[favorite.js]"]
end

subgraph group_storage["Persistence"]
  node_db_access["SQL access<br/>[db.js]"]
  node_mysql[("MySQL database")]
end

node_household(("Household user"))

node_household -->|"uses"| node_app
node_app -->|"renders"| node_navigation
node_navigation -->|"navigates"| node_home
node_navigation -->|"navigates"| node_recipe_pages
node_navigation -->|"navigates"| node_favorites_page
node_navigation -->|"navigates"| node_ledger_page
node_recipe_detail -->|"fetches recipe"| node_recipe_store
node_recipe_detail -->|"adds meal pick"| node_meal_store
node_recipe_detail -->|"uses list"| node_shopping_store
node_recipe_detail -->|"toggles favorite"| node_favorites_store
node_shopping_page -->|"manages items"| node_shopping_store
node_recipe_store -->|"requests data"| node_api_client
node_meal_store -->|"requests data"| node_api_client
node_shopping_store -->|"requests data"| node_api_client
node_favorites_store -->|"requests data"| node_api_client
node_purchase_store -->|"requests data"| node_api_client
node_api_client -->|"HTTP API"| node_express_app
node_express_app -->|"dispatches"| node_recipe_routes
node_express_app -->|"dispatches"| node_meal_routes
node_express_app -->|"dispatches"| node_shopping_routes
node_express_app -->|"dispatches"| node_purchase_routes
node_express_app -->|"dispatches"| node_favorite_routes
node_recipe_routes -->|"dispatches"| node_recipe_controller
node_meal_routes -->|"dispatches"| node_meal_controller
node_shopping_routes -->|"dispatches"| node_shopping_controller
node_purchase_routes -->|"dispatches"| node_purchase_controller
node_favorite_routes -->|"dispatches"| node_favorite_controller
node_recipe_controller -->|"queries"| node_db_access
node_meal_controller -->|"queries"| node_db_access
node_shopping_controller -->|"queries"| node_db_access
node_purchase_controller -->|"queries"| node_db_access
node_favorite_controller -->|"queries"| node_db_access
node_db_access -->|"reads/writes"| node_mysql

click node_app "https://github.com/findxme/fmhome/blob/main/frontend/src/App.vue"
click node_navigation "https://github.com/findxme/fmhome/blob/main/frontend/src/components/TabBar.vue"
click node_home "https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Home.vue"
click node_recipe_pages "https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Recipes.vue"
click node_recipe_detail "https://github.com/findxme/fmhome/blob/main/frontend/src/pages/RecipeDetail.vue"
click node_recipe_form "https://github.com/findxme/fmhome/blob/main/frontend/src/pages/RecipeForm.vue"
click node_favorites_page "https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Favorites.vue"
click node_ledger_page "https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Ledger.vue"
click node_shopping_page "https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Home.vue"
click node_recipe_store "https://github.com/findxme/fmhome/blob/main/frontend/src/stores/recipes.js"
click node_meal_store "https://github.com/findxme/fmhome/blob/main/frontend/src/stores/mealPicks.js"
click node_shopping_store "https://github.com/findxme/fmhome/blob/main/frontend/src/stores/shoppingList.js"
click node_favorites_store "https://github.com/findxme/fmhome/blob/main/frontend/src/stores/favorites.js"
click node_purchase_store "https://github.com/findxme/fmhome/blob/main/frontend/src/stores/purchase.js"
click node_api_client "https://github.com/findxme/fmhome/blob/main/frontend/src/utils/api.js"
click node_express_app "https://github.com/findxme/fmhome/blob/main/backend/src/app.js"
click node_recipe_routes "https://github.com/findxme/fmhome/blob/main/backend/src/routes/recipe.js"
click node_meal_routes "https://github.com/findxme/fmhome/blob/main/backend/src/routes/mealPick.js"
click node_shopping_routes "https://github.com/findxme/fmhome/blob/main/backend/src/routes/shoppingList.js"
click node_purchase_routes "https://github.com/findxme/fmhome/blob/main/backend/src/routes/purchase.js"
click node_favorite_routes "https://github.com/findxme/fmhome/blob/main/backend/src/routes/favorite.js"
click node_recipe_controller "https://github.com/findxme/fmhome/blob/main/backend/src/controllers/recipe.js"
click node_meal_controller "https://github.com/findxme/fmhome/blob/main/backend/src/controllers/mealPick.js"
click node_shopping_controller "https://github.com/findxme/fmhome/blob/main/backend/src/controllers/shoppingList.js"
click node_purchase_controller "https://github.com/findxme/fmhome/blob/main/backend/src/controllers/purchase.js"
click node_favorite_controller "https://github.com/findxme/fmhome/blob/main/backend/src/controllers/favorite.js"
click node_db_access "https://github.com/findxme/fmhome/blob/main/backend/src/utils/db.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_app,node_navigation,node_recipe_store,node_meal_store,node_shopping_store,node_favorites_store,node_purchase_store,node_api_client,node_household toneBlue
class node_home,node_recipe_pages,node_recipe_detail,node_recipe_form,node_favorites_page,node_ledger_page,node_shopping_page toneAmber
class node_express_app,node_recipe_routes,node_meal_routes,node_shopping_routes,node_purchase_routes,node_favorite_routes,node_recipe_controller,node_meal_controller,node_shopping_controller,node_purchase_controller,node_favorite_controller toneMint
class node_db_access,node_mysql toneRose
```

## Components

### Vue client

- [App shell](https://github.com/findxme/fmhome/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Navigation](https://github.com/findxme/fmhome/blob/main/frontend/src/components/TabBar.vue): `frontend/src/components/TabBar.vue`
- [Recipe state](https://github.com/findxme/fmhome/blob/main/frontend/src/stores/recipes.js): `frontend/src/stores/recipes.js`
- [Meal-pick state](https://github.com/findxme/fmhome/blob/main/frontend/src/stores/mealPicks.js): `frontend/src/stores/mealPicks.js`
- [Shopping state](https://github.com/findxme/fmhome/blob/main/frontend/src/stores/shoppingList.js): `frontend/src/stores/shoppingList.js`
- [Favorites state](https://github.com/findxme/fmhome/blob/main/frontend/src/stores/favorites.js): `frontend/src/stores/favorites.js`
- [Purchase state](https://github.com/findxme/fmhome/blob/main/frontend/src/stores/purchase.js): `frontend/src/stores/purchase.js`
- [API client](https://github.com/findxme/fmhome/blob/main/frontend/src/utils/api.js): `frontend/src/utils/api.js`

### Meal planning

- [Today’s meal](https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Home.vue): `frontend/src/pages/Home.vue`
- [Recipe browsing](https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Recipes.vue): `frontend/src/pages/Recipes.vue`
- [Recipe detail](https://github.com/findxme/fmhome/blob/main/frontend/src/pages/RecipeDetail.vue): `frontend/src/pages/RecipeDetail.vue`
- [Recipe editor](https://github.com/findxme/fmhome/blob/main/frontend/src/pages/RecipeForm.vue): `frontend/src/pages/RecipeForm.vue`
- [Saved recipes](https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Favorites.vue): `frontend/src/pages/Favorites.vue`
- [Purchase ledger](https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Ledger.vue): `frontend/src/pages/Ledger.vue`
- [Shopping list](https://github.com/findxme/fmhome/blob/main/frontend/src/pages/Home.vue): `frontend/src/pages/Home.vue`

### Express API

- [HTTP app](https://github.com/findxme/fmhome/blob/main/backend/src/app.js): `backend/src/app.js`
- [Recipe routes](https://github.com/findxme/fmhome/blob/main/backend/src/routes/recipe.js): `backend/src/routes/recipe.js`
- [Meal-pick routes](https://github.com/findxme/fmhome/blob/main/backend/src/routes/mealPick.js): `backend/src/routes/mealPick.js`
- [Shopping routes](https://github.com/findxme/fmhome/blob/main/backend/src/routes/shoppingList.js): `backend/src/routes/shoppingList.js`
- [Purchase routes](https://github.com/findxme/fmhome/blob/main/backend/src/routes/purchase.js): `backend/src/routes/purchase.js`
- [Favorite routes](https://github.com/findxme/fmhome/blob/main/backend/src/routes/favorite.js): `backend/src/routes/favorite.js`
- [Recipe operations](https://github.com/findxme/fmhome/blob/main/backend/src/controllers/recipe.js): `backend/src/controllers/recipe.js`
- [Meal-pick operations](https://github.com/findxme/fmhome/blob/main/backend/src/controllers/mealPick.js): `backend/src/controllers/mealPick.js`
- [Shopping operations](https://github.com/findxme/fmhome/blob/main/backend/src/controllers/shoppingList.js): `backend/src/controllers/shoppingList.js`
- [Purchase operations](https://github.com/findxme/fmhome/blob/main/backend/src/controllers/purchase.js): `backend/src/controllers/purchase.js`
- [Favorite operations](https://github.com/findxme/fmhome/blob/main/backend/src/controllers/favorite.js): `backend/src/controllers/favorite.js`

### Persistence

- [SQL access](https://github.com/findxme/fmhome/blob/main/backend/src/utils/db.js): `backend/src/utils/db.js`
- **MySQL database**

### Other components

- **Household user**

## Connections

- Household user → App shell: uses
- App shell → Navigation: renders
- Navigation → Today’s meal: navigates
- Navigation → Recipe browsing: navigates
- Navigation → Saved recipes: navigates
- Navigation → Purchase ledger: navigates
- Recipe detail → Recipe state: fetches recipe
- Recipe detail → Meal-pick state: adds meal pick
- Recipe detail → Shopping state: uses list
- Recipe detail → Favorites state: toggles favorite
- Shopping list → Shopping state: manages items
- Recipe state → API client: requests data
- Meal-pick state → API client: requests data
- Shopping state → API client: requests data
- Favorites state → API client: requests data
- Purchase state → API client: requests data
- API client → HTTP app: HTTP API
- HTTP app → Recipe routes: dispatches
- HTTP app → Meal-pick routes: dispatches
- HTTP app → Shopping routes: dispatches
- HTTP app → Purchase routes: dispatches
- HTTP app → Favorite routes: dispatches
- Recipe routes → Recipe operations: dispatches
- Meal-pick routes → Meal-pick operations: dispatches
- Shopping routes → Shopping operations: dispatches
- Purchase routes → Purchase operations: dispatches
- Favorite routes → Favorite operations: dispatches
- Recipe operations → SQL access: queries
- Meal-pick operations → SQL access: queries
- Shopping operations → SQL access: queries
- Purchase operations → SQL access: queries
- Favorite operations → SQL access: queries
- SQL access → MySQL database: reads/writes