DEV Community

loading...
Cover image for Yummyplan - An app to plan meals for an entire week🍞📅

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

thormeier profile image Pascal Thormeier ・2 min read

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.

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!

Yummyplan logo

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:

GitHub logo yummyplan / yummyplan.github.io

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

Yummyplan logo

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.github.io

Some screenshots

Week plan Editing meals
A filled out week plan Overview of all meals
Consolidated grocery list Edit modal for meals

Build Setup

# install dependencies
$ npm
Enter fullscreen mode Exit fullscreen mode

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!

Yummyplan overview

Yummyplan meal overview

Edit a meal

The grocery list

Discussion (24)

pic
Editor guide
Collapse
krrishdhaneja profile image
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!

Collapse
thormeier profile image
Pascal Thormeier Author

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.

Collapse
krrishdhaneja profile image
Krrish Dhaneja

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

Thread Thread
krrishdhaneja profile image
Krrish Dhaneja

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

Thread Thread
thormeier profile image
Pascal Thormeier Author

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.

Collapse
barelyhuman profile image
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?

Collapse
thormeier profile image
Pascal Thormeier Author

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?

Collapse
barelyhuman profile image
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.

Thread Thread
thormeier profile image
Pascal Thormeier Author

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!

Thread Thread
barelyhuman profile image
Reaper

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

Collapse
jankapunkt profile image
Jan Küster

Would Love to Install it as pwa on my mobile

Collapse
thormeier profile image
Pascal Thormeier Author

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)

Collapse
jankapunkt profile image
Jan Küster

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

Thread Thread
thormeier profile image
Pascal Thormeier Author

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!

Thread Thread
jankapunkt profile image
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.
Enter fullscreen mode Exit fullscreen mode

I will open an issue on GitHub :-)

Thread Thread
thormeier profile image
Pascal Thormeier Author

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

Collapse
saurondev profile image
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!

Collapse
thormeier profile image
Pascal Thormeier Author

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?

Collapse
freddyhm profile image
Freddy Hidalgo-Monchez

Great stuff! Look forward to trying it out :)

Collapse
thormeier profile image
Pascal Thormeier Author

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. :)

Collapse
charlesmknox profile image
Charles M. Knox

This is very cool! Thanks for sharing this.

Collapse
thormeier profile image
Pascal Thormeier Author

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

Collapse
tarundhillon profile image
Tarun Dhillon

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

Collapse
thormeier profile image
Pascal Thormeier Author

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