This is a log of stuff I did w/ one of my random pet projects, it’s not terribly interesting and is mostly just so I can get into the habit of writing more. You have been warned.

I did a lot of work on mealplanner a couple weeks ago, but got bogged down with my irl pays-the-rent job and couldn’t write about it. Until now!

Mealplan Creation

I added the mealplan creation workflow (a rather important part of an app that helps you create meal plans). Now, you can actually do something with the recipes available to you.

Recipe selection

Recipe Selection Gif

There are two main ways to add recipes to a meal plan. The simplest way is just to select them, they’ll get added to the next day in the meal plan that has no recipes*. Clicking the recipe card again removes it from the meal plan.

This is the main use case I wanted to add, since it’s how I’ll probably use the app.

From using Plated while it was still a meal plan service that shipped stuff to you, I remember two servings of a recipe were pretty much all I needed for a day. So I’ll probably be just selecting one recipe per day and moving on.

Other users, however, might want more control, which brings me to the second way to create a meal plan.

Moving recipes & adding more than one to a day

Recipe Drag Drop Gif

I can imagine some people might want more than one recipe on a single day, or might want to skip a day if they know they don’t need to cook, or might want to cook a recipe more than once in a week. For all of this, I also added a drag-drop interface.

You can drag recipe cards onto meal plan days to add them there. This lets you add more than one instance of a recipe to the meal plan and it lets you pick which days get recipes more precisely.

You can also drag recipes within the meal plan to other days or to a different place within the same day, so you can rearrange the meal plan however you’d like.

And if you made a mistake and want to remove a recipe, other than clicking the recipe again in the search results, you can also drag a recipe in the meal plan outside of the meal plan.

As an aside, this was the first time I had cause to use the HTML 5 drag/drop API, and it was a surprisingly smooth experience. It took a couple hours to implement all of this and get it to work, again without having done something like this before.

_(Note: I know the dropzones on the right are a bit finnicky (as seen in the gif). I’m not sure if that’s because of something I’m doing or just because I’m going through X11 installed on WSL, but I want to fix it eventually.)

Other Stuff

It was a couple weeks ago so I can’t exactly remember, but I think I also added a lot of improvements to the search experience. Can’t remember exactly what though… Something to do with better use of the space available?


Next up, actually doing things with the meal plan, like creating a grocery list or doing nutritional analysis.

Also I should really figure out if I should be calling them “mealplans” or “meal plans”. Cuz I’m using both here and in my app and I don’t like it.