Overview

myKitchen blends creativity with organization. Signed-in users can draft and publish personal recipes, browse inspirations pulled from a public food API, and keep everything at hand with a lightweight bookmarks system. A smart shopping list turns checked items into a separate “Purchased” list, keeping the main list focused while preserving history until users clear it.

Approach

I designed the app as a modular Vue SPA. Reusable components (RecipeCard, IngredientList, AppModal) keep the UI consistent, while composables centralize logic like form validation, list mutations, and API access. Vue Router organizes flows; Home, Discover (API ideas), Create/Edit, My Recipes, and Shopping; so the experience feels simple even as features expand.

Firebase manages authentication and user data securely, isolating each user’s content. Updates are processed intelligently to feel immediate while minimizing background activity, keeping the experience smooth and responsive. Bootstrap supports the core layout, and Sass variables control the design system—colors, spacing, and typography—for visual harmony across devices.

Core Flows

Users sign in to create recipes with ingredients, steps, and tags. From Discover, they can read API recipes to spark ideas, then adapt them into their own drafts. Any recipe can be pinned to Bookmarks for quick access; useful when tweaking a dish or keeping a “cook soon” queue.

The Shopping List is designed for momentum: adding ingredients is fast, checking an item moves it to Purchased, and a single action clears the purchased list when a trip is done. Subtle transitions, toast feedback, and accessible focus states make the experience feel polished.

Solution

The result is a responsive, app-like experience where inspiration flows naturally into creation and planning. Component reuse keeps the codebase lean; global state and route guards protect data integrity; and the UI emphasizes clarity; fewer taps to common tasks, readable recipe layouts, and predictable list behavior.

Reflection

Building myKitchen reinforced the value of reusable patterns and separation of concerns. If iterating further, I’d add shareable recipe links with permission scopes, collaborative lists, and offline caching for grocery runs.