Meal Planning
What is this?

In our house I cook the food, which is something I enjoy...most of the time :)

However, something my wife and I both hate is trying to figure out what to actually make. Then once you do that you gotta figure out what you need to actually buy. It was one thing when it was just the two of us, but now that we're a family it's just one more stressor that we both wanted to alleviate. So what better approach than to spend a couple weeks writing a meal planning app right?


This app was my first serious exploration of Angular 2, and provided a really nice problem that was small enough to use when learning, but big enough to be useful once I was done. I am splitting this work up into two phases. The first phase was meant to deliver the following:

  • Create and manage foods
  • Create and manage recipes
  • Create and manage meals (which associate recipes with a specific day)
  • Automatically produce a grocery list based on the meals

This simple feature set was enough to be useful, but not too daunting. I'm thinking the second phase will include something like:

  • Allow you to scale recipes
  • Make the grocery list "smart" and reduce all ingredients so they only show up once with a common unit of measure
  • Using machine learning to automatically load the meal plan each week
  • Provide some basic inventory features to automatically know what you need to buy
  • Include built-in grocery lists (but I really don't want to re-invent the wheel...)

We'll see where this goes, but I thnk there are a lot of possibilities here!

Managing Foods

Foods are the simplest item in the system, and are meant to match an item you could buy at the store. They are presented as a simple list, and can be edited in-line by selecting them. Within the application I use a redux-like approach to managing state (using @ngrx/store) so that any changes to a food are automatically reflected throughout the system. I also use Pusher to update any connected clients automatically when a food is changed by another user.

Managing Recipes

Recipes are the next object up the chain in a meal planning application like this. They are really just a collection of foods, with each one having a quantity, and of course some additional information like a name, directions etc. Visually, recipes are little more complicated, but they operate the same as foods. You can click one to start editing, and any changes are automatically reflected both locally, and to any other users who are connected at the time.

Managing Meals

Meals are of course what this is all about, and a "meal" represents a set of recipes you plan to make on any given day. The UI for the meals makes it easy to expand or shrink how many days you're looking at, and this dictates what show up on the grocery list. By default, the app load the current week to, so there's when you load the page things are ready to go.