View the live project here.
The aim of the project was to create a mobile-first user-friendly recipe search app for users to find meal ideas. The user can search based on ingredients they have available and the app presents a range of recipes using those ingredients, allowing users to quickly and easily find meal ideas using things they already have in their kitchens.
Everyone enjoys good food, but we don't always have the time or energy to be creative in the kitchen. This project aims to help with that, by allowing users to search for recipe ideas using ingredients that they already have available. Variety is the spice of life, or so the saying goes, so rather than making the same meals over and over week in week out, using the Feeling Hungry website to find new and exciting recipes allows users to do something different with the normal ingredients they have in their fridge or cupboards.
This is a recipe search app built with a mobile-first design, but intended to be accessible on all devices. My aim with the project was to present a colourful, warm and evocative appearance that felt comforting and relaxed while putting users in the mood to cook, and try new things!
Business Goals
-
To make it easy for users to find meal ideas through simple ingredient searches.
-
To encourage users to explore new ingredients, recipes and flavours.
-
To encourage users to reduce food waste by finding ways to use leftover ingredients.
User Stories
-
"Sometimes after a long day I have no idea what to cook for dinner, and we end up throwing something unhealthy in the oven or getting a takeaway. Being able to cook something using ingredients I've already got without having to think about it would be great!"
-
"I'd like to try new things and cook different recipes that I've maybe not tried before, but wouldn't know where to start. Having a list of recipes where I can use the ingredients I've already got would make life so much easier."
-
"We always have a full fridge and always end up cooking the same things each week. It would be nice to throw a bit of variety in there, and cook something different without having to go out and buy anything we don't normally buy."
-
"I hate wasting food, but sometimes it's really difficult thinking of how to use leftover food up. I'd rather find a way of using things up than end up throwing them away, and it might introduce us to some new meals as well."
The website is based on a MVP (Minimum Viable Product) methodology, for several reasons:
- Keeps the website uncluttered and minimalistic, avoiding information overload for users
- Makes site easier to navigate, with only key information displayed
- In line with my current abilities
- Meets the necessary needs of the user and business owner
The website is split into four sections - a home (landing) page, an about page, a recipe search page and contact page. The fixed navbar allows the user to easily navigate the site and get in touch, and presents a consistent layout, while the toggle feature makes the navbar more accessible for mobile and tablet devices whilst maintaining consistent positioning. The Home page holds prominent self-explanatory site message and CTA buttons in the centre of the page, with further information accessible on the About page. The Recipes page is clean and simple, giving users a no-fuss search box to utilise and find recipes. The Contact page gives users an easy way to give feedback and contact the site owner.
- Home Page: Home
- About Page: About
- Search Page: Search
- Recipes (Search Results) Page: Recipes
- Contact Page: Contact
The final version of the site added a footer for social media links and slightly changed the design of the recipe card presentation to more of a grid layout, but otherwise closely followed the initial design detailed in the wireframes.
I wanted to present a clean, bright background with imagery that reflects the purpose of the site. Use of colourful foods in combination with a bright and clean background serves to put the user in the mood to cook, both by representing a cooking/creative environment and also presenting appealing food images that capture the users imagination and encourage them to explore new foods and recipes.
Each of the images selected are designed to evoke specific reactions and emotions. The landing page buttons are specific to different mealtimes, and are instantly identifiable as the meal they represent. The main background image is bright and clean, to represent a "blank canvas" for cooking and evoking the kitchen environment.
- As there could be any number of different images and colours presented from the recipe searches, I deliberately chose a 'neutral' palette of colours to achieve good contrast wherever possible, whatever search results (and images) a user is presented with.
- Text is presented in solid black #000000 in order to contrast strongly against the background as much as possible, with the exception of the meal buttons on the Home page, which use solid white #ffffff in order to contrast against the specific images used as backgrounds.
- A bright orange colour #da6542 was used as a spot colour to help buttons and recipe cards stand out, allowing users to easily locate and use these features.
- I used Google Fonts to browse interesting fonts. 'Courgette' was used for headings and sub-headings as it adds a touch of elegance and flourish associated with "traditional" cookbooks (the sort of home-style cookery of the likes of Delia Smith and Mary Berry!). 'Montserrat' was used for the bulk of the page text, as it pairs well with 'Courgette' and presents an easy-to-read larger character font, again often found in cookbooks.
- Social media icons in the footer, as well as the toggle menu bars, are all from Font Awesome.
- I wanted users to easily be able to navigate the site from every page.
- The navbar resizes responsively into a toggle button at smaller screen sizes, to enable users to still navigate their way around the site.
- The navbar uses a static text underline and colour change to indicate present site location, and colour change hover effect and text underline on the other links whilst navigating to a new page.
- The user can click on site title to take the user back to the Home page.
- Contains prominent and direct site message to immediately catch user's attention and indicate the site's purpose.
- Prominent and colourful meal 'buttons' are simple to understand and easily direct users how to operate using imagery and text to indicate what each button is for.
- Contains prominent direction on how to use the search function, and presents recipe results in a grid layout for easy navigation.
- Grid layout ensures recipe presentation responds to different screen sizes, enabling all users to browse recipes easily whilst making best use of the full screen.
- Hover animation to allow users to focus on individual recipes.
- This page details what the site is about and how to use the recipe search.
- Allows users to easily get in touch with site owner.
- Makes use of the EmailJS API to allow user messages to be emailed directly to site owner.
- Provide links to social media with handy icons for easy navigation
My website was designed to present key information quickly and easily, and make the booking process as simple as possible to avoid info overload for users. I designed it so that it was clear and consistent across all pages and is accessible on all devices.
- Home page: Fixed navbar allowing the user to easily navigate through the site. Prominent site message and meal selection buttons for quick engagement.
- Recipes: Presentation of a selection of random recipes on page load means users immediately have access to meal ideas even before searching. Recipes cards are easily digestible and link to full recipes in new tabs so user doesn't navigate away from search. Random recipes refresh when search is cleared, meaning user is never "stuck" with old/already-browsed recipes.
- About page: Quick and simple instructions for site use, and explanation of site purpose. Display images for decoration.
- Contact page: Allows easy user feedback. Form requires at least name and email address to be complete, to prevent submission of empty forms
- Footer: Spacious footer with clearly visible social media icons, with colour change and grow hover effects to really make them stand out. Ample space for more features to be added.
- Adding the ability to navigate through multiple pages. Currently limited due to 'points' quota allowed with Spoonacular API, which means number of recipes that can be displayed in 24 hour period is restricted (and would result in user very quickly using up searches, and being presented with no results once points allowance is reached).
- Additional filters to allow more specific recipe seaches e.g. by cuisine type, by flavour ('sweet', 'savoury', 'spicy' etc.)
- Bootstrap v5.0 - A mobile-first responsive library used to construct various parts of the project, including extensive use of the grid system for layout, the Nav Menu and Contact Form, as well as Javascript/Popper bundle for the navbar Toggle function.
- Popper - Included as a requirement of Bootstrap. Used in menu toggler.
- GoogleFonts - 'Courgette' and 'Montserrat' fonts.
- Balsamiq - Used for the creation of wireframes.
- FontAwesome - Used for the nav bar toggler icon.
- JQuery - The project uses JQuery to simplify DOM manipulation.
- EmailJS - Allows the Contact Form to send emails directly to the site owner.
- Spoonacular - Recipe and Nutrition API with over 5000 recipes, nutrition information for thousands of products and ingredients, as well as detailed recipe instructions and images used as part of this site.
- Github - Used to store the code and use of GitHub Pages to deploy the website.
- Gitpod - Used as the primary version control IDE for development to further push and commit code to GitHub.
- Code Institute Course Content - Primary source of learning code.
- ChromeDevTools - Used frequently to detect any issues/bugs or layout differences.
- CSS-Tricks - Used as a general resource for CSS tips and questions.
- W3Schools - Used for examples and tutorials.
- Unsplash - Used to find suitable background and images throughout the project.
- Hover.css - Used for simple animation on recipe boxes.
- Stack Overflow - Used for general troubleshooting and examples.
- favicon.cc - Used to create site favicon.
-
Forms testing: to ensure the website was functioning as it should, I tested each of the forms on different devices and browsers. This was done by clicking the 'Submit' button on the Contact Form without any text in inputs to make sure it resulted with the desired response of 'Please fill out this field'.
-
Links (Internal & External): Each of the links when clicked have been checked so that the user is directed to the desired location. For a better UX experience, I made sure each link has either a colour change or colour-changing icon when hovered (with exception of the logo when visible) and included a target="_blank" attribute so that a new browser tab is opened when clicked.
-
Testing across various devices: I used BrowserStack for this, in addition to feedback from my friends and peers. The devices on which the website was tested are as follows:
-
Android Mobile:
- Samsung: Galaxy S8, Galaxy A42
-
Android Tablet:
- Samsung: Tab A6, Tab S4
-
IOS Mobile:
- iPhone: 5, 11 Pro, 12
-
IOS Tablet:
- iPad: Pro 12.9 2020
-
-
Tested on Chrome, Firefox, Safari and Microsoft Edge
-
Ensured the website was also responsive on all pages through Google Mobile Friendly Test.
-
- Home:
-
- Recipes:
-
- About:
-
- Contact:
HTML - W3C - Markup Validation
CSS - W3C - CSS Validation
Javascript - JSHint - Javascript Validation
- Contact form initially didn't work as intended; while testing, no emails were being sent. I investigation using Chrome Dev Tools, and consulting the Code Institute course material again, and discovered I had attached the "onsubmit" property to the Submit button, rather than the form itself. Removing the "onsubmit" property from the button and adding it to the form element instead fixed the problem.
- Found while testing on mobile devices that there was a massive empty space on the right-hand side of the screen when the site was zoomed out. Added additional CSS styling to restrict width and height to 100%, set max-width to 100% and set any x-overflow to hidden. This seemed to fix the issue.
- Several recipes from Spoonacular API had bad image URLs, resulting in the URL returning as 'undefined' and resulting in a 404 error. To fix, I created a custom image and set the recipe search Javascript function to display this custom image whenever the API image returned as 'undefined'. Although it doesn't help the user visualise the recipe, it gives an explanation for why the image isn't displayed and prompts the user to visit the full recipe (and view the proper image) rather than resulting in an ugly 404/Failed to Load visual on the page.
- Recipe cards using custom recipe image weren't showing correct recipe button. A quick look at the html showed this was down to the tag being written incorrectly, so was a simple fix to correct it and get the recipe card displaying properly.
"Sometimes after a long day I have no idea what to cook for dinner, and we end up throwing something unhealthy in the oven or getting a takeaway. Being able to cook something using ingredients I've already got without having to think about it would be great!"
- Recipe search allows for selection of different meal times (Breakfast, Lunch and Dinner) as well as the ability to search for one or multiple ingredients, meaning that users can easily find recipes that are suitable regardless of the meal type and that use appropriate ingredients (i.e. those the user already has available).
"I'd like to try new things and cook different recipes that I've maybe not tried before, but wouldn't know where to start. Having a list of recipes where I can use the ingredients I've already got would make life so much easier."
- A selection of random recipes are presented as soon as a user navigates to the page and are refreshed with new random recipes after each search, so there will always be new recipes presented to inspire users.
"We always have a full fridge and always end up cooking the same things each week. It would be nice to throw a bit of variety in there, and cook something different without having to go out and buy anything we don't normally buy."
- Random recipes are presented to users, and ingredients search allows users to find recipes that user ingredients already available.
"I hate wasting food, but sometimes it's really difficult thinking of how to use leftover food up. I'd rather find a way of using things up than end up throwing them away, and it might introduce us to some new meals as well."
- Recipe search provides recipes for known ingredients, and link to full recipe ingredients and amounts so that users know how much of each ingredient the recipe needs
- Go to GitHub and sign in, or sign up for an account.
- Once a Github account was created, I opened a new repository by clicking the green button "new". To create this project, I used the Code Institute's student template.
- Click on the green "gitpod" button to open Gitpod, a cloud-based version control software or IDE, which was used to write all code for this project.
- It was then pushed or saved in the terminal to Github where it is stored in a repository
- Under "Settings", scroll down to Github Pages and select "Master Branch" in the Source section, to where the page was automated.
- Once this was selected, the project was pushed to Github pages and the URL is then displayed
- To access the code, it can be run locally by either selecting "clone" which provides a URL to use on a local machine or "download" to download the zip file on to a local machine.
- Main background photo 'kitchen knife and green leaf vegetable on tabletop' by Lukas Blazek on Unsplash
- Breakfast image 'berry and nuts' by Dan Counsell on Unsplash
- Lunch image 'vegetable salad in plate' by Louis Hansel on Unsplash
- Dinner image 'roasted ribs with sliced tomatoes' by Alexandru-Bogdan Ghita on Unsplash
- Undefined search images use 'pile of French macaroons' by Keila Hötzel on Unsplash
- 'About' page gallery images:
- 'white book photo' by Becca Tapert on Unsplash
- 'berries on heart waffles' by Yoori Koo on Unsplash
- 'loaded sweet potato fries bowl' by Ella Olsson on Unsplash
- Seach bar clear icon adapted from this answer by Josh Crozier on Stack Overflow.
- Semi-transparent layer over meal images from this answer by 'd4ncer' on Stack Overflow.
- Passing Javascript variables to another page from this tutorial on Lage.us
- My Mentor, Nishant Kumar, for his guidance throughout this project.
- John, from Tutor Support, for his valuable assistance.
- The Slack Community for their help and support.
- My family and friends for their feedback and help with testing.
- My wife and son for their endless patience, support and lending of devices for testing!