Dishy is an intelligent, collaborative application for weekly meal planning. To clear up a common misconception right away: Dishy is expressly not a recipe app. Instead, it serves to save familiar and established everyday meals that can be cooked without much effort or the need to study new recipes. At its core, it is a highly customizable calendar that makes it easier for households, families, and flatmates to organize their daily meal plans. Based on a modern tech stack consisting of Angular, Ionic, NestJS, and MySQL, Dishy allows users to intuitively plan and manage their everyday meals, and have the plan generated automatically if needed.

problems solved by the app

The app primarily addresses the everyday stress of deciding what to eat. This daily deliberation and discussion are eliminated by a clear, pre-planned weekly overview. Furthermore, Dishy solves the problem of a lack of synchronization within a household. Analog notes on the fridge or confusing chat groups are replaced by a centralized digital solution where every household member can view the same plan in real time. When inspiration is lacking in a stressful everyday life, the app fills empty days with random but already proven favorite dishes of the household at the push of a button. Ultimately, the clear assignment of dishes to specific days also prevents duplicate purchases and planning errors when grocery shopping.

core functionalities

The heart of the application is the comprehensive household management system. Users can organize themselves into households, with all data such as dishes and plans strictly isolated from one another, ensuring that data privacy and clarity are always maintained. The interactive Weekly Planner offers a calendar view for the current week, allowing users to navigate through weeks and edit days individually. A particularly intuitive feature is the drag-and-drop planning, which allows dishes to be seamlessly dragged and moved within the calendar. Additionally, the app features a Smart Shuffle, essentially a random generator. This algorithm can automatically fill completely empty weeks or remaining gap days with dishes from the user’s own library. This dish library is a complete CRUD system designed to build and maintain a personal pool of favorite meals. The entire system is secured by a robust authentication process with login and registration based on secure JSON Web Tokens.

plugins and technologies used

In the frontend, Dishy relies on the Ionic Framework in combination with Angular to ensure a responsive and cross-platform user interface with a mobile-first approach. For smooth interactions within the weekly planner, the Angular CDK Drag and Drop module is utilized. Reactive state management and event communication between the various views are handled via RxJS. The backend is built with NestJS as a scalable, modular Node.js framework. TypeORM is used for the relational database design and seamless communication with the MySQL database. Security is ensured by Passport.js and the NestJS JWT module for token-based authentication, alongside bcrypt for password hashing. Additionally, the NestJS Config module ensures the secure and flexible loading of environment variables.

technical tricks and special features

A significant technical aspect of the app is the intelligent cache management in the frontend. Instead of querying the database for every action, the app uses a local Map as a temporary storage. The cache key is generated dynamically from the household ID and the specific date. Upon updates, this cache is selectively cleared, and the user interface is forced to reload via an observer, which physically prevents asynchronous rendering errors. Another extremely important building block is the date-fns library. Since working with native JavaScript date objects is often prone to errors, date-fns ensures the absolutely precise calculation of calendar weeks, start days, and date formatting. To always provide users with visual feedback during loading processes or API calls, strategically placed loading spinners were integrated into the UI, significantly improving the user experience. Also, the shuffle algorithm shines with a clever reverse loop. To guarantee that a whole week is completely filled even if the household has only stored a few dishes, the algorithm iterates over the still-empty days instead of the available dishes, intelligently drawing meals multiple times if necessary. The asynchronous configuration loading in the backend is also an important detail, ensuring that database and JWT modules are strictly initialized only after the configuration file has been fully loaded.

key components

The architecture is built upon several central components. The WeeklyPlannerPage is the visual hub of the frontend, where the calendar is rendered, drag-and-drop actions are controlled, and overlay menus are invoked. The DishSelectionPage serves as a dedicated view to specifically search for and assign a meal for a selected day from the list of all household dishes. In the background, the Services act as the communication engine of the app. It manages the data cache, formats the date strings, and handles all HTTP requests with the backend. On the server side, the AuthService and the corresponding JWT strategies encapsulate the entire logic for login, token generation, and the validation of incoming requests, ensuring that only authorized individuals gain access to their specific household data.

conclusion and future expansions

With Dishy, a highly performant, practical, and scalable application has been created that elegantly solves a daily planning problem. Through the strict architectural separation of frontend and backend, as well as the use of proven design patterns, the app forms a very solid foundation. For the future, concrete expansions are already planned to make the app even more useful. This includes the implementation of error handling to better guide users during network fluctuations or input errors. In addition, more interactive features for group use are to be added to strengthen shared household management. A specifically planned feature is the ability to optionally assign dishes to specific people in the household. Thus, the calendar will not only show what is being cooked on a certain day but also directly indicate who is responsible for the preparation.