A little while ago I wrote a post on cooking for developers. You can find it here:
In this post, I suggested building a web app with an integrated recipe API. I didn't integrate an API, but built a meal planning app, nevertheless.
Yummyplan is an app to plan meals for an entire week. You can select your favorite meals, place them on a day and time and get a grocery list for everything. Since all the content is stored in localStorage, you can access the plan anytime you want!
You can find Yummyplan here: yummyplan.github.io
- Create menus with ingredient lists and tags: Add your favorite meals and their ingredients and give them tags like "vegan" or "quick".
- Link to the recipe or cook book page: When actually cooking, click on the meal in the plan to see all ingredients and a link to the recipe.
- Saving everything to local storage: Access the plan anytime you want without having to rebuild it every time. Your tags, meals and ingredients are stored as well.
- Automatically created grocery lists: After you've finished planning the week, a grocery list containing everything you need to buy will be created
- Download the week plan as PDF or PNG: So you can print it or send it to someone else.
- Tag and title based search: All your meals are searchable by tags or title to further save your time.
- Randomize your week plan: Out of ideas? A button called "Randomize" will fill all empty slots on the plan with random meals, respecting which tags are allowed at which day and time. The allowed tags can be adjusted in the settings.
- Multilingual: Yummyplan is available in both English and German
- Available as a PWA: You can install it on your tablet and access it via your homescreen
- It's free: Free and licensed under MIT.
If you've found a bug or want to suggest a new feature, here's the GitHub repo:
A meal planning app for an entire week - built with Nuxt and tailwind
A meal planning app for an entire week
What is Yummyplan?
Yummyplan is an app that allows you to plan a week worth of meals for your household via drag and drop. Create, edit and delete meals, assign ingredients and tags to them and download the plan as PDF or PNG.
Out of ideas for meals? Use the "Random" button to assign random meals to empty slots! The random meals follow a set of allowed tags for each day and meal time.
Done with your plan and need to go grocery shopping? A sorted consolidated grocery list is available, too!
No login or account is required, since everything is saved in your browser.
Some default content is available in both german and english, but own meals and ingredients can be added.
Check it out here: yummyplan.github.io
# install dependencies $ npm…
I built this thing with Nuxt with Vuex in Typescript and Tailwind, as well as some extra libs for canvas and PDF handling.
Testing is done with Jest, the standard ESLint setup ensures high code quality.
Here's some screenshots!