92 lines
3 KiB
Markdown
92 lines
3 KiB
Markdown
## 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.
|