A Recipe Sharing Platform That Was Built For Those Who Live To Eat
My Roles
Full Stack Developer
Languages And Tools
Javascript
React Native
Redux
Saga
Docker
NodeJS
MySQL
Figma
Timeline
January 2021 - August 2021
Link To Project
Problem
For this project, we did some user research and found that many people are finding their recipes online. However, due to the sheer number of resources that were available, it became tedious for people who had dietary restrictions. Furthermore, there wasn’t a community based platform that allowed users to build a community around food and sharing their recipes.
Solution
1. A Recipe Based Community:
Umami allows you to create groups of people that you can share, upload and discuss recipes with. You can favourite recipes to save them for later or to keep track of the recipes that you love the most.
2. Ingredient Tracking:
Umami allows you to keep a virtual pantry and a grocery list integrated into your account. When viewing recipes you can keep track of what ingredients you need and what you need to shop for. Lastly, you can filter for recipes based on what you have in your pantry.
3. Nutrition & Dietary Restriction Focused Recipes:
Umami’s recipes focuses on nutrition and displays the nutritional values at the forefront of the recipes. Dietary Restrictions also give those who have restrictions easy filtering for recipes that fit their needs.
Learn More
Building The Pantry / Grocery List
One of the key elements of Umami was being able to have a built in grocery and pantry list that you can use when you are interested in making a recipe. We wanted the user to be able to easily see if they have the ingredients for a specific recipe or if they would have to go out shopping. If they had to go shopping, we wanted to make it easy to add ingredients to their grocery list.
One of the biggest lessons I learned during this process was the use of redux and saga together. It allows me to update the backend of the application and then refresh the component to show the updated data.
One of the biggest lessons I learned during this process was the use of redux and saga together. It allows me to update the backend of the application and then refresh the component to show the updated data.
An Integrated Pantry and Grocery List
Integrating the pantry and the grocery list was an integral part of the application as it allowed the user easily decide if a recipe is going to be easy to make or if it was going to take time (Needing to buy more groceries). It also allows for the user to plan ahead by adding ingredients for a recipe into the grocery list for a meal later in the week.
In order to keep track of the grocery and pantry lists that were shared between components, I used a redux store to share the states of the grocery and pantry list between the various components that needed it. I chose redux since it was already integrated into the application and seemed to be a good learning opportunity to try one of the most widely used react libraries. I also needed help learning the backend as it was the first time I was working with an MVC architecture but learning about how controllers and services worked was extremely eye opening.
In order to keep track of the grocery and pantry lists that were shared between components, I used a redux store to share the states of the grocery and pantry list between the various components that needed it. I chose redux since it was already integrated into the application and seemed to be a good learning opportunity to try one of the most widely used react libraries. I also needed help learning the backend as it was the first time I was working with an MVC architecture but learning about how controllers and services worked was extremely eye opening.
Reflections On Umami 💭
These are some of the things that I did and learned:
1. I learned mobile development using React Native
For Umami, I had my first taste of mobile development which I found to be an aamazing experience. I quickly realized that there were some quirks of mobile development and the setup process was difficult at first. But after those small obstacles, I found mobile development to be extremly rewarding.
2. I had my first taste of the backend
During the development of Umami I had my first taste of real world backend development. Prior to Umami I had only experienced backend development through tutorials. I learned how the data flows from the frontend to the backend interacting with the database before being sent back to the frontend.