Inspired by video games, this inventory-based cookbook keeps you on top of meal planning. To be frank, the only user I really cared about creating this cookbook website for was me. I need help with meal planning. TT___TT
With this cookbook website, I created a hub for all the recipes that I have found and included just the ingredient lists for the recipes and the link on how to make that recipe. I’ve included an inventory that the end user can manage and see what they have on the fly. In the future, based on what ingredients are in store, recipes that have all the ingredients will have a “craftable” mark on their card. That way the user can make sure they have all the items first before committing to anything. The greatest advantage to this is the ability to access it with ease. Sharing becomes much easier, too. However, as I said in the beginning, this is mostly for sharing with myself so that I’ll always have access to my DIY recipe card collection.
With this cookbook website, I created a hub for all the recipes that I have found and included just the ingredient lists for the recipes and the link on how to make that recipe. I’ve included an inventory that the end user can manage and see what they have on the fly. In the future, based on what ingredients are in store, recipes that have all the ingredients will have a “craftable” mark on their card. That way the user can make sure they have all the items first before committing to anything. The greatest advantage to this is the ability to access it with ease. Sharing becomes much easier, too. However, as I said in the beginning, this is mostly for sharing with myself so that I’ll always have access to my DIY recipe card collection.
User Goals
- Access a collection of recipes.
- Inventory management.
- Adding all missing items to a list automatically.
- Creating a meal plan calendar.
- Share cookbook with others immediately.
Roadmap
These are the things that I intend to do for this project. So far, I've completed the majority of Phase 1.
Phase 1: Basic Prototype
- Prototype basic recipe card.
- Design simple branding keywords for the UI.
- Create sprites for initial recipes and inventory items.
- Create a basic inventory list that is interactive.
- Have a tool bar to navigate to the “inventory” and the “shopping list.”
- The design must be responsive. (To Do)
Phase 2: Inventory Updates
- CSV Integration
- Inventory Categories
Phase 3: Shopping List Integration
- Add missing items of a recipe to a shopping list
- Update the shopping list based on what is on the inventory
- Filtering Main Page for Recipe Names
- Filtering based on if they are “craftable” (meaning all inventory items are in stock)
Phase 4: Meal Plan Calendar Integration
- Create a new tool called the “Meal Plan Calendar”
- For the new tool, create a drag and drop interface of different recipes that can be dropped onto different days.
- The calendar range will be a week.
- Based on the inventory, the shopping list will automatically update.
- The calendar must be saveable to allow the end user to refer back to it throughout the week.
- Each day must account for two spots.
- There is no requirement that each day must be filled with a meal plan.
DESIGN
I got the idea for making this style of a cookbook from Animal Crossing: New Horizons. Using a cards metaphor, the idea of choosing what recipe to craft was pretty easy. I made a few doodles on paper and then got to this working prototype.
Proof of Concept Prototype
Click to view here: roxioxx.github.io/DIY_Cookbook/
My Github repository for this project: github.com/roxioxx/DIY_Cookbook
UX of a DIY Card
This is my hand written HTML and CSS Code I made to create a single card.
See the Pen DIY Card to be flipped by Rox (@roxioxx) on CodePen.
I then created the first three recipes with their inventories. Then I added two more in pure HTML. After that, I began to see an issue: this was going to get messy fast if I were to add in more than this many recipes.
CSS Performance Improvements
My cookbook website is based off the Animal Crossing: New Horizons and thus, it relies a lot on imagery. The inventory itself could become at least a hundred sprites. So, I’ve been playing around with CSS sprites to reduce the number of callbacks. The result was that the load time was pretty quick, but its not easy to easily resize the images. I’m working on finding a decent size to remake each sprite.
CSV Integration
Hand coding everything in HTML would be the simplest way to do this, but if I make a mistake... well, that's too much. I'm looking into learning how I can use JavaScript to read from a CSV file to populate all these cards. That's where I am at right now (along with trying to learn Responsive Design).
