Munch Ease — Plan, Cook, Shop, Repeat

Munch Ease is a snappy Vue 3 app that helps you plan meals, manage recipes, and turn plans into stress-free shopping lists. Search and save recipes, build your weekly meal plan, and seamlessly check items off your shopping list—everything stays in sync so you can focus on what’s cooking.

Built with modern Vue patterns, a clean API layer, and lightweight tests, the project is easy to extend and fun to work on.

---

Quick start

1. Install dependencies

npm install

2. Run the dev server

npm run serve

3. Run unit tests (Vitest)

npm run test

4. Build for production

npm run build

Environment

• API base URL: set VUE_APP_API_BASE (e.g. http://localhost:8081)

---

Architecture and conventions

The codebase follows clear boundaries and Vue 3 Composition API throughout.

• Routing and auth

  • Centralized in src/router/index.js with named routes and an auth guard via route meta requiresAuth.
  • Components use useRouter/useRoute for navigation and route access.

• API layer and mappers

  • src/api/http.js is a tiny JSON fetch wrapper that honors VUE_APP_API_BASE.
  • Feature services live in src/api/* (meals, recipes, shopping, auth, persons).
  • Normalization lives in src/api/mappers/* (e.g., date parsing, shape cleanup).

• Composables (UI-facing logic)

  • Reusable logic in src/composables/* (useAuth, useMeals, useShopping).
  • Components stay thin: data via refs/reactive, effects via computed/watch.

• Components

  • All Single File Components use <script setup>.
  • Props via defineProps, events via defineEmits, routing via useRouter.
  • Event bus for alerts is in src/alert.js with AlertToast subscribing; can evolve into a useAlert composable.

• Testing

  • Vitest configured (vitest.config.js) with @ alias to src.
  • Targeted unit tests cover units and API mappers under tests/.

• Formatting and linting

  • Prettier is the source of truth; Husky + lint-staged auto-format on commit.
  • ESLint configured for Vue 3 and Composition API macros.
  • Recommended: use Volar in your editor for Vue intelligence.

Folder highlights

• src/api/ — HTTP wrapper, feature services, and data mappers
• src/composables/ — Reusable app logic (auth, meals, shopping)
• src/components/ — UI components and pages (all in <script setup>)
• src/router/ — Route definitions and auth guard

---

Development tips

• Prefer composables for shared logic; keep components presentational where possible.
• Use computed for derived values; avoid mutating props directly.
• When navigating, prefer named routes for stability.
• Keep tests small and fast; add a test when you add a new mapper or unit.

---

Troubleshooting

• API errors: verify VUE_APP_API_BASE is set and reachable.
• Type/IDE help: ensure Volar is enabled and ESLint is not conflicting with Prettier.
• Build issues: this project uses Vue CLI 5. If migrating to Vite, update scripts and configs accordingly.