Yummyplan - An app to plan meals for an entire week🍞📅

A little while ago I wrote a post on cooking for developers. You can find it here:

🍳 🍲 Cooking for devs - a creative counterweight

Pascal Thormeier ・ Jan 11 '21

#watercooler #tutorial #tips #motivation

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.

Introducing Yummyplan

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

Features of Yummyplan

• 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.

Github repository

If you've found a bug or want to suggest a new feature, here's the GitHub repo:

yummyplan / yummyplan.github.io

A meal planning app for an entire week - built with Nuxt and tailwind

Yummyplan

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.app

Available languages

Yummyplan is currently available in these languages:

• English
• German
• Spanish (Thank…

View on GitHub

Technologies used

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.

What it looks like

Here's some screenshots!

Comments

[Lissa Leuschner]

When can I download this on iOS?

[Pascal Thormeier]

It's a web app, so if your iOS version supports PWAs, you can install it right away. There are currently no plans to create a native app port, though.

[Sauron-Dev]

Very nice, I was thinking the last weeks if I should make something like this. And then puff there it is, someone else made it :)

I really like this app, tho from a design perspective I would like more material like design, modern and simple.

From a functional perspective, a key feature for me would be the usage within my family (wife and me). The complexity raises exponentially with using other storage than local I know, but I would really like that. I didn't look deeply at the code yet, but (maybe there is already) you could make an abstract layer between the app and the data allowing us to write connectors to different storages (like cloud storage, or some home NAS storages).

Really good work!

[Pascal Thormeier]

Thank you so much for your feedback! Yeah, I'm thinking about adding cross device/sharing/groups for a while now. There's several challenges that those features pose. What do you think would be most helpful to implement?

[Freddy Hidalgo-Monchez]

Great stuff! Look forward to trying it out :)

[Pascal Thormeier]

Thank you so much! When you try it, I would love to get some feedback on stuff you think is missing or not ideal, the tool should be as helpful as possible. :)

[Pascal Thormeier]

I'm happy that you like it! You're very welcome!

[Tarun Dhillon]

This is brilliant ..we often struggle and leave it to last minute decisions. Thanks for making this

[Pascal Thormeier]

So glad you like it! Makes me happy to see that it's helpful for people :)

[Jan Küster]

Would Love to Install it as pwa on my mobile

[Pascal Thormeier]

Installing it as a PWA should work, at least from my tests 🤔 are you experiencing problems with that? Also, the app is only rudimentary optimized for phone screens and mostly works on tablets and desktops (more real estate for the week plan)

[Jan Küster]

Installation is offered on ff mobile but it won't Open. I will cross check with my Tablet later

[Pascal Thormeier]

Oh, that's a pity! The app doesn't do anything out of the ordinary Nuxt PWA module stuff, but perhaps the localStorage usage might be an issue. It does work when using Firefox itself, though, does it? Thank you so much for reporting!

[Jan Küster]

I tried with Chrome on XUbuntu 64bit and found, that there is an error with the service worker and CSP:

fd02311.js:1 [Report Only] Refused to create a worker from 'https://yummyplan.github.io/sw.js' because it violates the following Content Security Policy directive: "worker-src 'none'".
sw.js:3 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.jsdelivr.net/npm/workbox-cdn@5.1.4/workbox/workbox-sw.js' failed to load.
    at https://yummyplan.github.io/sw.js:3:1
(anonymous) @ sw.js:3
An unknown error occurred when fetching the script.

I will open an issue on GitHub :-)

[Pascal Thormeier]

Thank you! For everyone else experiencing this issue, please see: github.com/yummyplan/yummyplan.git...

[Krrish Dhaneja]

I've a feature suggestion, and that is collaboration! I mean if I share the list with anyone, it must be synced with the person I've shared and he can edit the food items, if the person ever wanted, and still get showed to me as it is synced!

[Pascal Thormeier]

Collaboration would be really cool! IS real-time collaboration something that you think might be useful, too? I'm working out ideas right now for cross device sync, which would be a first step towards that. Right now, the app doesn't require a backend or user login or anything, but a backend might become necessary really quick.

[Krrish Dhaneja]

I think real time colab would be good too cuz the participants can comment on ideas to what to cook

[Krrish Dhaneja]

And for ease one person can create some kind of a family group for such discussions

[Pascal Thormeier]

Groups would certainly be useful for collaboration, yes. For discussions, a chat would also be necessary, perhaps, otherwise there's the need for an extra tool.

[Reaper]

I really like the name and the overall design, the font could take a little tweaking , want me to recommend a font for this?

[Pascal Thormeier]

Thank you so much for your feedback! I used the standard Tailwind config and deemed it "good enough" for the time being. Doesn't mean I consider it perfect either, it really could use some tweaking 😄 What font would you recommend?

[Reaper]

I understand it's in the initial stage, so didn't go really go all crazy tester level feedback but considering it's a food related app the font's vibe kinda matters from the start.
I'd suggest you check out the gothic fonts, I'd recommend Nanum Gothic, it's a pretty subtle font but will add enough curves to make it look good.

[Pascal Thormeier]

You're absolutely right, font matters a lot in general. (I would have absolutely loved people going into the crazy tester level, it should be usable after all!)
Nanum Gothic looks amazing, I'll give it a shot and see what it looks like. Thank you so much again!

[Reaper]

Haha, i will test it later.
You’re welcome.
Have a good one!