Meal Planner

This is a personal side-project I have been slowly working on when I have spare time. The goal is to build a meal planning application that my family can quickly access from a mobile device or web browser. There are a lot of meal planning applications but this gives me the opportunity to practice different aspects of Angular development.

Tech Stack

Feature: Meals

The Meals screen, the landing screen of the Meal Planner application is displayed and a list of saved meals is shown.

Meals is the landing screen for Meal Planner. This screen lists all saved meals with queued and favorite meals appearing at the top of the list.

Search & Filter

A filter panel provides search and filter capabilities to help reduce the meals list down to only show meals that match the search and filter criteria.

Add New Meal

Clicking the Add (+) button at the bottom of the Meals screen opens Add New Meal panel. This panel acts similarly to a modal but slides up from the bottom of the screen instead.

Feature: Pantry

The Pantry screen lists all the items that can be added to a meal. In order to plan a meal, the "entry" and "side" items need to be added to the pantry. I've kept the fields that describe a pantry item fairly basic and I currently track whether the item is an entry, side, or ingredient and whether the item is gluten free, dairy free, or vegan.

Search & Filter

A filter panel provides search and filter capabilities to help reduce the pantry list down to only show items that match the search and filter criteria. I currently only include Entry, Side, and Ingredient as filter options but I plan to include the Gluten Free, Dairy Free, and Vegan options in the future as well.

Add a New Pantry Item

Clicking the Add (+) button at the bottom of the Pantry screen opens the Add New Pantry Item panel. This panel acts similarly to a modal but slides up from the bottom of the screen instead.

Future Enhancements

The intent of this application is to keep the meal planning process fairly lightweight but a future enhancement could be to save ingredient measurements and preparation details in order to dynamically display and export recipe cards.

I'd also like to better differentiate the queued meals. I'm not a designer so I've stuck to the basic material look-and-feel. At some point, I'll re-visit the layouts to improve the usability of the Meals and Pantry screens.