Find a recipe with the last of your ingredients in the pantry
Objective: To reduce food waste and offer inspiration to those with a bare fridge or cupboard by providing easy, affordable and healthy recipes.
Empty Pantry is a resourceful site/app to find cooking inspiration to use the last of the ingredients in the cupboard or fridge, to reduce food waste and to encourage home-cooking. The recipes offer approachable instructions, there are healthy options and the recipes are cost-efficient. Using a simple API to retreive recipes from a database, Empty Pantry aims to invite users to try home-cooking and have fun!
You can view the live project here
- Project Objectives
- User Goals
- Business Goals
- User Requirements
- Layout & Wireframes
- Colors
- Fonts
- Current
- Future
- Method
- Create a user-friendly recipe search site/app to inspire users to do more home-cooking.
- Provide a stylish and efficient user experience.
- Emphasise approachability of site for users to use and contact the company to share their input, increase recipes.
- Use a free API with a recipe data base that responds to an ingredient search.
- Demonstrate my use of Vanilla Javascript, JQuery and API's whilst maintaining visual integrity.
As a potential user of Empty Pantry I want:
- I want to visit a modern and clean website.
- I want to easily navigate the website.
- I want to find a variety of recipes with a recipe search.
- I want to be able to contact the Empty Pantry to complain if there aren't enough recipes.
- I want easy access to Empty Pantry's social media so I can judge their social media presence.
- Website that works on phone, tablet and desktop to accommodate my busy lifestyle.
- I want to feel excited to find a new recipe and to return to this website as a recipe reference.
- The Empty Pantry website should be very user-friendly and efficient for busy people.
- Empty Pantry must be approachable and inclusive to increase return users and home-cooking and reduce food waste.
- The Empty Pantry should provide a varity of recipes for an ingredient search and to continue to grow the recipe database.
- The Empty Pantry invites site visitors to share their input in the beta stage of the app and to share recipes to increase the recipe database.
- Responsive design for mobile/tablet/desktop.
- Simple and intuitive layout and design of the website, UX is efficient.
- Provides social media links.
- Provides contact information and address.
- Provides a very easy-to-use contact form.
- Site works on a variety of browsers.
- The design of the site is approachable and intuitive.
Empty Pantry is a site with featuring contemporary design and UX to provide recipes with a basic ingredient search with MealDB Api. The site is built with four responsive pages: a landing page, recipe search page, about page and contact page. The contact page is supported by EmailJs API with an automatic reply message for users to feel acknowledged after sending their initial message. I wanted to create a visual experience with the landing page of a modern kitchen, the recipe page being very simple and intuitive and the rest of the site to be fresh with green and simplicity.
I plan to keep the layout of the website to be very simple with a popular hamburger style of navigation bar and footer. Each page will be clean and intuitive for the user using HTML, CSS, Bootstrap and Javascript where appropriate.
The Empty Pantry site was planned out with mockup wireframes using Balsamiq. They are as follows:
To keep a clean and natural look to the Empty Pantry Website and to enhance and idea of health, I used warm browns and greens. I was using a beige for the background but it wasn't providing enough of a contrast to benefit the UX.
For the navbar, footer and background I used a warm off-white called #fafafa which I used in my last project, Stardust Gym, to create a clean effect and provide enough contrast with the text. I like this white because it is softer on the eyes. I do favour using white backgrounds because they look refreshing and are easy to read from.
- Black: #1F2027
- Brown: #463e2e
- Beige: #F3ECE8
- Green: #535b31
- Off-white: #fafafa
- Images were really important for this project. The landing page is a huge image of a modern and warm kitchen. I used this so the site visitor can feel like they were in the kitchen getting ready to cook. For the recipe page, the images are provided from the mealDB API. The About page has a very lovely green image of cabbage as the background to create an effect of freshness, energy and simplicity. Below is a carousel of clean images of a kitchen shelf and menu items which I ensure have alt text. The Contact page has a light pattern of vegetables in the background I made to add a little interest to the page but to not be too busy against the contact form.
- To stress contemporary design and consistency, and enhance the idea of simplicity, basics, and health, I used Courier New for the navbar, Courier new is such a familiar and old font it helps to create the idea of coming home when using this app. I used Rozha One for headings as it is a very strong font and Raleway for most of the content on the site, again because it is easy on the eyes, clean and modern. Rozha One and Raleway were from Googlefonts.
-
CSS3 for site styling
-
Bootstrap for navbar and page layouts.
-
Javascript for interactive alerts, prompts and calling the APIs.
-
JQuery a javascript library.
-
MealDB the FREE recipe search API
-
EmailJs the email API I used on the contact page.
-
Google Fonts for the Rozha One and Raleway fonts.
-
Gitpod for site development
-
Github for site deployment.
-
Techsini for mock-up mobile/tablet/desktop images
-
Balsamiq for wireframes.
-
W3C for HTML to check HTML.
-
W3C for CSS to check CSS.
-
Javascript Validator to check Javascript
-
Jshint to check Javascript
- Navigation bar
- Brand Logo
- Footer
- Responsive elements for Desktop, tablet and mobile.
- An easy contact/email form.
- Call to action buttons
- Javascript loops
- Javascript if/else statements
- Javascript prompts
- EmailJs API
- MealDB API
- Images
- I would like to find a better recipe Database so that i can include the ingredients and their measurements for the recipe search. I used mealDB because it is free and doesn't require a credit card to use.
- I would like to provide a way to filter the ingredients by dietary choice like vegetarian, vegan, gluten-free, kosher.
- I would like to make the site have an ability to 'login' so that users can subscribe to a premium version of the app with more perks.
- I also want to be able to make the ingredient search bar so that the user can enter multiple ingredients.
- Include a blog page with customer recipes and pictures of the meals they cooked with their recipes/
- Development testing
- I intermittently used Google Dev Tools to double check coding and debugging.
- Validation testing to double check coding accuracy was done with:
- Sent friends and family link to site to check on their variety of devices including: * Apple iPhone 6, XS, 12 * Apple iPad 5th Generation * Samsung Galaxy * Apple MacBook Pro * Apple MacBook Air * Windows Operated Laptop/PC * Chrome * Safari * Internet Explorer * Firefox
- Can only type one ingredient at a time FIXED-my solution was to create a prompt to inform user this is a beta site**
- Pictures of recipes are too big FIXED- I decreased the size of the images by percentage so they suit responive designs, also made pictures into circles
- The content of recipe, about and contact page are hard to read. FIXED-Made a better contrast with colors by using black and white.**
- The send button on the email page didn't notify the user their email was sent and they kept sending the email over again. FIXED- added a prompt to the send message button and included a message in the text box**
- Include a way to filter recipes for dietary type like vegetarian, low-carb... PENDING
- Fix the size of the landing page to avoid having to scroll FIXED
- Remove the prompt on the recipe page because it looks messy FIXED changed the prompt into if/else statement in innerHTML
- Make the contact page background a better contrast FIXED changed image for background.
- Make recipe images smaller for desktop FIXED solved this with media query.
- The footer blends in with the page too much FIXED added a border top to the footer to maintain light elegance but create division.
- The recipes don't provdie ingredient measurements PENDING My current free API is limited, I would like to develop this page later on but at the moment I don't feel comfortable sharing my credit card details with another Recipe API.
- Navbar dropdown not collapsing cleanly for mobile and tablet settings, the links were floating in the content. Redid the navbar with bootstrap and Chrome Dev Tools.
- Landing page was not extending fully on tablets so i changed the image to be a background image for the body in css instead, i had originally included a footer for the landing page which the gap initially helped but the footer wasn't necessary and took away from the effect of creating an environment for the user.
- Tried using Spoonacular API for a while, I struggled with this. I also was trying to use it without using my credit card because it is a freemium API and I didn't feel too confident about that at the point of time, in case anything went wrong. I considered using RecipePuppy API but it was too messy in the way it presents itself.
- Recipes from the API were coming out really long and not separated. Tried making modal it was hard to separate each recipe from the search response so I made a toggle bar with help from mozilla.
- Email page was not notifying the user they sent the email so they thought it wasn't sent and kept pushing the send button so I recieved many repeat emails. I fixed this with adding a prompt via the send button and text box.
- The images in the carousel were not showing in the pushed version and I realised I labeled their source file wrong, I fixed this from using Chrome developer tools.
- When checking the code, validating CSS, JavaScript and HTML, i had some missing semi-colons and the comments were a little messy.
- I had a few bugs with meal API. I didn't take note of these very well because I was so focused on trying to solve them.
- Favicon was not showing-had to edit how the file was named in the code. Now the Favicon is visible.
- Had issues with the enter button on the homepage. Initially I played with margin, and padding to try and center the button, I ended up finding bootstrap to be most effective.
- The landing page image was too big and I couldn't figure out why it was needing to be scrolled for figurative empty space, I fixed this with removing a 1220px style height of the container
- Had issues with the innerHTML response in recipe-sub of recipe page in the javascript, I had a misspelling. The issue was that i would search apple and the text would say "here are your recipe results for apple" and then i would search for chicken but the text would remain as apple.
- Contact page would validate any text for email because I accidentally had input type as text, changed this to email.
- Input bar and search button are not aligned. Fixed this by making a grid from stackoverflow
- When testing my site for CSS, the validator found issues with bootstrap on all four pages here
- The footer on the recipe page was floating in the middle of the page on tablets. I wanted to keep a sticky footer because the fixed footer was blocking the recipe results. I tried position absolute and changing the height of the container of the whole page but then if there are more recipe results, they are restricted and you couldn't see all of them. What I have managed to do it push the footer by creating margin-bottom 500px on #meal container. This allows the page to look flexible still.
To deploy this project with Github:
- On Github go to the Empty Pantry repository.
- Under the Empty Pantry repository name, click Settings.
- Scroll down the page to find the “GitHub Pages” section.
- Use the drop-down menu to select a folder for your publishing source and choose 'Master'.
- Refresh the page to confirm the site is published where you will see the notification highlighted in green.
To make a copy of the repository:
- Log into GitHub
- Click the ‘Settings’ option, the ‘Fork’ option is on top right of this page.
- Click on ‘Fork’ to make a copy of the original repository.
Content was written by Emma Sargeant 2021
Photos were found via Google Image search:
- I used a similar layout as my last project, Stardust Gym for the navbar and footer as it looks clean and it is easy to navigate, the contact page is pretty similar too. .
- For the recipe search, I found a free API called MealDB. I found a youtube video to show an example of how to set the API up:Video is here.
- I referred to Bootstrap libraries a lot
- I referred to CodeAcademy to get a better understanding of Javascript. I was having a very hard time with Javascript from the LMS as it was harder to understand. CodeAcademy
- I did look at StackoverFlow, I did get some ideas to solutions from it, mostly with Jquery. Most of the time I gained benefits by looking at other people's code to understand how it worked, it was more further learning with a visual aspect. This helps me a lot, to work from literal examples. StackOverFlow
- I did look at the last exercise from Code Institute in regards to the Rosie CV project, this is what I used for the Email.js page. I was trying to figure out how to apply the MEALDB API in a similar way to the GitHub Resume.
- I would like to thank the Code Institute for the knowledge shared.
- I would like to thank my mentor Chris for his support and encouragement.