1. Finding the next recipe
As a cook, I’d like to quickly find recipes I’m interested in. I have a particular taste and diet type.
Kitchen Geek
Helping people discover recipes, customise servings and tailor their own cookbook.
Background
During the 2020 pandemic, I became more curious about cooking and experimented around the kitchen. Being at home for extended periods of time allowed me to hone my skills. I also wanted to add variety to my diet and learn the roles of certain ingredients in recipes.
As I got more into cooking, I faced a series of problems.
Problems
2. Too many cookbooks
I’m only interested in a few recipes from each cookbook. As a result, redundant recipes occupy shelf space.
3. Manual ingredient calculations
Most recipes either produce above or below the ideal serving size. When adapting serving sizes, the ingredients need to be recalculated in proportion.
4. Leftover ingredients
After making new dishes, spare ingredients are left over. They often go to waste when people don't know what to make with them.
I searched for solutions but found ones that partially solved these problems. Others shared the same experiences.
Initially, I created a spreadsheet to store and recalculate ingredient portions. Even though this addressed a few issues:
- I kept referring to videos or cookbooks for instructions
- Made copies of an existing recipe then manually edited all details including the name, source link (if web-based), original serving size, ingredient name, quantity and unit.
- I kept switching between multiple touch points: the recipe instructions, prepared ingredients, list of ingredients and cooking utensils.
I felt an app or site would be the best option to consolidate all solutions into one.
Solutions
Recipe Search
The search bar has three modes:
- Named search
- Ingredient search
- Filtered search (main search bar can be empty)
When the ingredient filter is enabled, the cuisine, diet and time dropdowns are disabled. Any selected values are removed.
Ingredients can be listed either with commas or spaces separating them.
Ingredients Panel
This section lists all ingredients and allows people to adjust servings and convert units. It stays in view as the instructions are scrolled through.
Ingredient Portion Calculation
When the serving size changes, each ingredient amount updates.
The amount turns blue and flashes periodically to indicate that the amount has been modified from its original amount. The reset button resets all quantities back to the original amount.
Unit Conversion
Clicking the UK/US button changes the unit for each ingredient. I chose to name it “UK” and “US” because certain users may not know the difference between imperial and metric units.
Bookmarking
Clicking the bookmark icon stores the recipe in your cookbook. Navigating to the cookbook page displays all bookmarked recipes. Recipes are stored in a database for each user.
User Authentication (IN DEVELOPMENT)
Simply sign in with your email and password, Google or Facebook.
Kitchen Geek was developed with a mobile-first approach. In mobile view, the website resembles a mobile application layout. The content in the recipe details is contained in tab views. Search filters appear in a modal.
The tab view is hidden for tablets and desktop breakpoints, and the content is split into two horizontal panels. The search filters are visible in the search section.
Recipe Content
The Spoonacular API provides recipe content. It has a vast library of recipes, search utility, detailed recipe information and instructions.
Within Kitchen Geek, this API provides:
- Recipe Search (by name, by ingredient and additional filters)
- Recipe Information
- Recipe web scraping (coming soon)
UI Considerations
My aim was to have a clean and minimal UI that:
- Is simple to follow and understand
- Excites through visual flair and use of motion
- Engages users by delivering value through core functions and features.
Font
I chose Outfit because it looks friendly, semi-formal and looks good in all sizes. A semi-formal appearance signals safety, professionalism and is inclusive for all ages. It also has variable font weights and supports all language glyphs.
Iconography
Icons are generously used throughout the app to boost the recognition and comprehension of menu options. All icons are scalable (SVG) and maintain their quality at all screen sizes. Icons are created by MingCute which is an open source icon library.
Ingredient List
On most recipe websites, the ingredient list is usually above the instructions and goes out of sight as readers scroll through the page. Most often, readers refer back to them as they read through the instructions; causing them to scroll up and down frequently.
To address this, the ingredient list floats on the left side of the screen.
Error states
Sometimes in applications, things can go wrong or have no supporting data. With this in mind, I used encouraging messages and illustrations to inform users about loading data, missing pages, missing instructions and empty cookbooks.
Illustrations are created by Magica Studio.
Animations
Animations guide users through flows, elements needing attention and to inform them of immediate changes within the app. Animations are used within modals, ingredient portion changes and pages to prevent users from feeling surprised or failing to notice immediate changes.
Challenges
Time
For this capstone project, we were given two weeks to deliver our applications. Towards the end of the week, we had a group hackathon involving students from product design and data science courses. Due to time constraints, I had to push back features for the end of the course.
Using Asana helped me stay on track. I was able to break large features into small tasks and stay accountable.
Database Integration
During the working period, I wasn’t able to integrate a database into Kitchen Geek because we learnt Knex.js a few days before. Due to time constraints, I didn’t have an opportunity to practice it outside of classes and during our group project.
As a temporary workaround, bookmarks were stored in a JSON file on the backend for demo purposes.
Post boot camp, I refactored this feature to run off a MySQL database through Node.js and Knex.js.
User Authentication
Learning to implement this was a steep learning curve. Initially, I wanted to develop a solution which doesn't rely on cookies in case users disable them.
This was tougher than I thought. In the end, I relied on cookies.
Reception
This project was well received by my educators, peers and the public during our open demo day.
As people explored Kitchen Geek, I was able to validate its features and gather the improvements they requested. Improvements included:
- Providing a detailed description of the recipe, calories per serving and information about substitute ingredients in the recipe details page.
- Predictive search
- Search History
- Indicating the number of included ingredients per recipe after searching by ingredients.
- Categorised bookmarks.