Hobby Responsive Web Bootstrap MongoDB

Story

The thing I hate the most is when I want to start cooking, I can't remember the link for a website and then I need to go hunting for the specific recipe . I used to print out recipes, but my mom threw them out. I saved things to the tabs on my phone, but my phone reset and I lost those links, too. I just had so much trouble cooking because of meal prep and not knowing what I needed.

I solved this problem with MongoDB and some Bootstrap, HTML, CSS, and JS, and created a DIY recipe card system that could be easily read on any device.

Award Won

I was a runner up in the MongoDB Atlas Hackathon for this project.
Here I am: https://dev.to/devteam/congrats-to-the-mongodb-atlas-hackathon-winners-4cc0

User Persona

It me. Person who likes food but can’t afford to order food from outside. I need:
  • The Knowledge of what I need for each recipe
  • What even is a good recipe and then putting them into an easily accessible collection
  • I need to view and read it from any device

User Goals

  • Be able to know what I need to cook whatever recipe I have favorited.
  • Help with meal prep and planning.

Inspiration

My inspiration for this was the DIY system in Animal Crossing: New Horizons. Take a look at the screenshot.

In the game there are certain features that inspired me. These are:
  • A hub for all the recipes that I have found and ingredient lists. Also, a link on how to make that recipe.
  • I’ve included an inventory that the end user can manage and see what they have and what is missing.
  • Based on what ingredients you have, recipes that have all the ingredients will have a “craftable” mark. It makes it easier to know what can be made.
Picture
My Inspiration for this project: Animal Crossing New Horizons, Published by Nintendo

DESIGN and Prototyping

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.

1st Iteration

Discovery 1: When I first started this, I thought I would only have 3 recipes, so I hard coded the HTML by hand. However, I saw that I would need to keep growing.

Discovery 2: Also, using Flexbox from scratch would require so much setup to make this responsive. I had trouble getting just one column of cards to show up when the screen was too small. It always showed two and the text was smaller. There were many issues.

Discovery 3: If I could pull in data from a CSV, that would be an easy way to keep all the recipe data in one place rather than just hard coding it into the HTML.

2nd Iteration (current)

Professionally, I'm a UX/UI Designer. I don't know how to use fancy developer tools and this was my first time making something with a backend connection.

Discovery 1: CSV Integration is pretty complex with just pure Javascript. It was easier to integrate with MongoDB, so I switched. I used MongoDB Atlas as my database and Realms as my way to connect to that database easily.

Roadmap

My goal is to have a full inventory, shopping list, and meal prep calendar system integrated into the cookbook. That way, I can take care of all my cooking needs in one spot.
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.
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.