How findxme/fmhome works
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: app.js HTTP app · api.js API client · db.js SQL access · TabBar.vue Navigation
Components 29
Vue client
- App shell
frontend/src/App.vue - Navigation
frontend/src/components/TabBar.vue - Recipe state
frontend/src/stores/recipes.js - Meal-pick state
frontend/src/stores/mealPicks.js - Shopping state
frontend/src/stores/shoppingList.js - Favorites state
frontend/src/stores/favorites.js - Purchase state
frontend/src/stores/purchase.js - API client
frontend/src/utils/api.js
Meal planning
- Today’s meal
frontend/src/pages/Home.vue - Recipe browsing
frontend/src/pages/Recipes.vue - Recipe detail
frontend/src/pages/RecipeDetail.vue - Recipe editor
frontend/src/pages/RecipeForm.vue - Saved recipes
frontend/src/pages/Favorites.vue - Purchase ledger
frontend/src/pages/Ledger.vue - Shopping list
frontend/src/pages/Home.vue
Express API
- HTTP app
backend/src/app.js - Recipe routes
backend/src/routes/recipe.js - Meal-pick routes
backend/src/routes/mealPick.js - Shopping routes
backend/src/routes/shoppingList.js - Purchase routes
backend/src/routes/purchase.js - Favorite routes
backend/src/routes/favorite.js - Recipe operations
backend/src/controllers/recipe.js - Meal-pick operations
backend/src/controllers/mealPick.js - Shopping operations
backend/src/controllers/shoppingList.js - Purchase operations
backend/src/controllers/purchase.js - Favorite operations
backend/src/controllers/favorite.js
Persistence
- SQL access
backend/src/utils/db.js - MySQL database
Other components
- Household user
Connections 33
- 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