Here is a link to the final project
https://for-the-love-of-food.onrender.com
-
My initial idea for this project was to create a recipe site about food from around the world. My target audience is anyone who is interested in cooking and all aspects of food, this can cover a huge spectrum of ages, genders and skill levels. This ranges from children who want to learn how to cook, to anyone who wants to use the site for recipe ideas to create at home.
-
The main features that I wanted to include are:
- Easy to use navigation menu.
- Easy to read content.
- Easy to see images.
- Easy to register, login and logout.
- Easy to Create, Read, Update and Delete recipes.
- A subtle hint of colour while not being over powering.
The structure of the site was designed to be simple and easy to use. It has a good balance of images and content, so it does not overload the user, while giving them enough information to create recipes. The step by step structure ensures the user knows what the next steps are and doesn't leave the user needing more knowledge.
- The website is for the following user types:
- Users with no previous experience about cooking, or experience on how to cook food, and would like to start learning.
- Users with basic experience about cooking who wish to hone their cooking skills while practising making new recipes.
- Users with advanced experience in cooking, who are feeling adventurous and looking for some new recipes.
- Users who are highly skilled and are looking to add their own twist on recipes that already exist.
- The site needs to be easily accessible.
- The navigation menu needs to be simple to use on a range of devices, including desktop, tablet and mobile.
- Manoeuvering around the site should be simple and straightforward.
- To be able to create an user account.
- It should be easy to Create, Read, Update and Delete recipes.
- The site should be informative and all the text should be easy to read.
- The images should be clear and not stretched or squashed.
- It should be easy to register, login and logout.
- I want the site to be easy to understand how to navigate throughout the site.
- I want the content to be easily read and understandable.
- I want images to be clearly visible.
- To gather information for recipes.
- To recommend the site to friends and family.
- To be able to Create, Read, Update and Delete recipes.
- To save recipes to favourites section.
- To delete recipes to favourites section.
My overall colour scheme used throughout the site was the variety of colours in the image below.
I chose these colours for my theme to add hints of brightness throughout the site as a wow factor, while using the colour white for the content throughout the site.
Here are my wireframes for desktop, mobile and tablet for this project
I have used the following features in this project:
- Changing navigation
- Recipe search bar
- Add recipes to site
- Add to favourites
- Pagination
- A inclusive search
These are a few ideas I've had and would like to implement in the future.
- Admin user
- Exclusive search
- Add recipes page to be able to accept image files
- Edit recipes page to be able to accept jpeg and png image files
- While trying to solve my adding to favourites functionality, I found a bug relating to going to the favourites page as shown below with the error message.
After looking closely at the bug and the error that was provided above, I worked out that I had to add favourite_id=favourite_id to the href below.
<a href="{{ url_for ('delete_from_favourites', recipe_id=recipe._id) }}">remove from favourites<i class="material-icons right">favorite</i></a>
- A bug below was found while working on the same functionality mentioned above.
After trying various ways to get the add to favourites functions to work, I have found a solution to this bug which has been added below.
Due to the way the code was written, when a user clicks to add a second recipe to favourites, each recipe card would render multiple add to favourites
text and heart icon.
The following steps have been taken during the process to solve the bug mentioned above.
- Delete entire code below from the
recipes.htmltemplate.
- Add the following code below to replace the code that was deleted.
In support of the changes that were made in the html template above a few steps were taken in the app.py which can be seen in the commit 368b140, this involved using an empty array in users document in the users collection.
- While working on my remove from favourites functionality, I found a bug with my favourites functionality. Adding the recipe to the favourites worked correctly. When I tried to remove the recipe while in the favourites page, it would give me the error below:
After having a closer look at my code, I tried various different ways in an attempt to solve the issue mentioned above with no success. At this point I decided to contact tutor support, after a lengthy discussion with Kevin from tutor support, he advised me to take the steps mentioned below.
- Delete
recipe_id=recipe._idand changefavourites=favourites_idtofavourite_id=recipe._id. - From the following code
mongo.db.favourites.remove({"_id": ObjectId(favourite_id)}), I changed_idtorecipe_name.
Git was used for version control by using the Gitpod terminal to add and commit to Git and push to Github.
GitPod was used as an IDE whilst coding this site.
GitHub is being used to store all the code for this project after being pushed from GitPod.
Am i Responsive was used to create the image in my Final Design section.
Firefox Developer Tools was used for troubleshooting and trying new visual changes without it affecting the current code.
Lighthouse was used to ensure that the site was performing well, conforming to best practices, SEO and Accessibility guidelines.
Favicon was used to create a favicon image that was added to the website.
Font Awesome was used for a few icons in the footer on all of this site's pages.
Google Fonts was used for all the text content on the site pages.
Balsamiq was used in the initial design process to make wireframes.
Materialize CSS was used for icons in some parts of my site.
MongoDB was used to store all contents of the database and allow full CRUD functionality.
Materialize was used to create an amazing, responsive site.
jQuery was used to initialise Materialize CSS.
Flask was used as the application framework.
Werkzeug was used for user information protection.
PyMongo was used to be able to work with MongoDB.
DNSPython was used as a toolkit to use with Python.
Flask-Pymongo was used to connect Python/Flask app to MongoDB.
Jinja was used to populate the site using the content from the site database.
Heroku was used to deploy the live site.
This project was developed using GitPod and pushed to GitHub then was deployed using Heroku using the following steps below:
- Create a
requirements.txtfile using the commandpip3 freeze --local > requirements.txtin the GitPod terminal. - Create a
Procfilewith the commandecho web: python app.py > Procfile. git add .andgit commit -mthe new requirements and Procfile files and thengit pushthem to the GitHub repository.- Login or Sign up to Heroku.
- Create a new app upon Login by clicking the "New" button in your dashboard. Choose a unique name and set the region to the one closest to you.
- From the Heroku dashboard of your newly created application, click on "Deploy" > "Deployment method" and select GitHub.
- Search for your GitHub repository and connect.
- In the Heroku dashboard for the application, click on "settings" > "Reveal Config Vars".
- Set the following config vars:
| Key | Value |
|---|---|
| PORT | 5000 |
| IP | 0.0.0.0 |
| DEBUG | False |
| MONGO_URI | USER_MONGODB_URI |
| MONGO_DBNAME | USER_MONGODB_NAME |
| SECRET_KEY | USER_SECRET_KEY |
If you need to make a copy of a repository:
- Login or Sign Up to GitHub.
- On GitHub, go to manni8436/MS3-Project.
- In the top right corner, click "Fork".
If you need to make a clone:
- Login in to GitHub.
- Fork the repository manni8436/MS3-Project using the steps above in How To Fork a Repository.
- Above the file list, click "Code".
- Choose if you want to close using HTTPS, SSH or GitHub CLI, then click the copy button to the right.
- Open Git Bash.
- Change the directory to where you want your clone to go.
- Type
git cloneand then paste the URL you copied in step 4. - Press Enter to create your clone.
If you need to make a local clone:
- Login in to GitHub.
- Under the repository name, above the list of files, click "Code".
- Here you can either Clone or Download the repository.
- You should close the repository using HTTPS, clicking on the icon to copy the link.
- Open Git Bash.
- Change the current working directory to the new location, where you want the cloned directory to be.
- Type
git cloneand then paste the URL you copied in step 4. - Press Enter, and your local clone will be created.
The W3C Markup Validator and W3C CSS Validator was used to validate my project to make sure there were no errors within the site.
-
W3C HTML Validator Results
-
W3C CSS Validator Results
The only error that came up on the CSS validator was related to Materialize CSS code, which I do not have control over
-
JSHint
-
PEP8 Online
Click Here to view the full testing steps that were completed on every device and browser.
-
Images mainly provided by BBC Food, but a full list have been provided below:
-
Generic Image If User Doesn't Upload a Image:
-
Background Images:
-
Recipe Images:
- Bean and Rice Burrito
- Fish and Chips
- Spaghetti Bolognese
- Beef Burgers with Beetroot and Carrot Slaw
- Sausage and Mash
- Beef and Ale Stew
- Chicken Gyro
- Tzatziki
- Onigiri
- Sushi
- Chocolate and Almond Ghriba
- Portuguese Custard Tarts
- Caldo Verde (Portuguese Cabbage Soup)
- Gazpacho Hispaniola)
- Gazpacho Shots with Pimenton and Caraway Seed Twists)
- Garlic Butter Twist Rolls)
- Vegetarian Thai Steamed Dumplings with Shiitake Mushrooms)
-
-
Text content on all Pages was copied and/or amended from the following sites:
-
Quotes Carousel:
-
Recipe Ingredients and Steps:
- Bean and Rice Burrito
- Fish and Chips
- Spaghetti Bolognese
- Beef Burgers with Beetroot and Carrot Slaw
- Sausage and Mash
- Beef and Ale Stew
- Chicken Gyro
- Tzatziki
- Onigiri
- Sushi
- Chocolate and Almond Ghriba
- Portuguese Custard Tarts
- Caldo Verde (Portuguese Cabbage Soup)
- Gazpacho Hispaniola)
- Gazpacho Shots with Pimenton and Caraway Seed Twists)
- Garlic Butter Twist Rolls)
- Vegetarian Thai Steamed Dumplings with Shiitake Mushrooms)
-
I would like to thank stack overflow to allow me to use two codes that I have used from there website, I have added the code below.
- Pagination
page = int(request.args.get('page', 1)) per_page = 12 offset = (page - 1) * per_page
The following code below was used on my carousel.
let autoplay = true; setInterval(function () { if (autoplay) $('.carousel.carousel-slider').carousel('next'); }, 5000); $('.quotes-panel').hover(function () { autoplay = false; }, function () { autoplay = true; });
I would like to give a big thanks to Chris Quinn for all his help, effort, guidance and patience he has provided during this project.
I would also like to thank Abi Harrison for all her support, advice, guidance, the push to keep me motivated during stressful times, also for taking all the screenshots for me.
I would also like to thank Dave Harrocks for all his support, problems solving skills, all the logic thinking, fun and laughs in our calls during this project.
I would like to thank my fiancee for her support, patience and listening to me talking about my project nonstop throughout.
And lastly I would also like to thank Suzy Bennett and Jonathan Swift for all the support, motivation given to me during the tough times, sharing bad jokes during these times and being my cheerleaders.