munch-ease-frontend/README.md

## 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

```bash
npm install
```

2) Run the dev server

```bash
npm run serve
```

3) Run unit tests (Vitest)

```bash
npm run test
```

4) Build for production

```bash
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.