(Full Version) All-in-One Food Hub: Recipes, Meal Planner, & Grocery List

Doc Structure

This document was structured to have 3 main “flows” and a lil bonus view to encourage using up perishables.


Under the hood, these required separate pages and underlying structures for the database layers.

The interaction layers follow similar patterns of 1) buttons & search, sort, and filter settings at the top, 2) buttons on the main table/cards of the page where valuable, and 3) link buttons to configuration pages either at the top or end of page depending on how frequently the user is to need to visit the config page for a given flow. All pages were designed for either desktop or mobile use in mind, with the exception of
which is mobile-oriented.

For the presentation layer, most pages are meant to be “functional” working pages and lack a header page (with exceptions of
, and
which are more “mellow” pages). Where possible, I opt for card views with pictures instead.

You can read more about the intent behind each flow here:

1. Figure out what to eat

2. Prepare to eat

3. Execute!

Bonus: Perishables Reminder

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
) instead.