Growing up me and my siblings learned how to cook at an early age, starting with some basic dishes. So when I was older and going to school I always found it strange that most of my classmate could not cook. When I would ask them about that they would say that there, mostly, mother cooked or they had not learned to cook and take out is way faster. Cooking is not that difficult if only I could help them figure that out.
When I finished school I decided to travel instead of study on and starting to work like all my classmates. While travelling I saw new cultures and new exiting foods and no idea how to make them. I made new friends from all over the world and I got to try some of there favourite dishes. I have asked how to make some of those dishes but I was not able to remember all of them and I did not have anywhere to write them down in a save place.
- A way for people to have a save and structured place to write recipes. Where they are easy to access from anywhere in the world and the recipes are easy to find and shared with others.
- A way for friends to share recipes with each other in one place. Motivating them to try something different.
- A place for people to find inspiration on that question everyone asks him/her self every day what will I be eating today?
This project is aimed for everyone how is interested in cooking no matter how good your cooking skills are. The layout of the website should be structured, easy to use and not too crowed/distracting. The website needs to be visually appealing enough to encourage user interaction whilst also provide a good User Experience to the everyday chef.
- Easy to follow and well-written recipes.
- Different kind of recipes/cuisines.
- Easy accessible and interactive from any device and on any type of internet.
- A secure place to put recipes.
- Clear images of the finished dish so they have an idea of how it is going to look.
- finding tips to improve there cooking skills.
- As a traveller, I would like to store the recipes I learned in my cooking class. So I can make them at home.
- As someone how loves to cook, I want to share some easy recipes with my friends. So that they can see it is not that difficult.
- As a student, I would like to find some really easy recipes. So I can save money.
- As a traveller, I would like my friend to share their local dishes. So I can learn to make them my self.
- As a terrible cook. I would like to learn to make a good dish. So I can impress my date.
- As a foodie, I want to share unconventional recipes that taste great. So those people might broader their taste buds.
- As a stay at home mom. I want to share some easy kid-friendly meals. So other moms could stress less when it is dinner time.
- As a beginning cook, I want to see an image of a dish. So I have something to compare my result with.
- As a student, I want to know the cooking time. So I can make dinner in between studying.
- As I am always busy, I want the uploading process to be easy. So I can share some fast meal.
- As I am always on my phone, I want the website to work on my phone. So I can use it on the go.
- As long as you have internet you can log in from anywhere in the world.
- There is the option to share a cookbook with your friends. So they can easily see your recipes or your friends can share theirs with you.
- On every recipe card, it shows the difficulty level of the dish.
- On the recipe cards, you can also find how long it takes to make that dish.
- It is very easy to insert a dish on to the site and it can be seen directly after doing so.
- We ask users to provide an image of the dish so other users will have an idea of how the dish will look like.
- The content displayed in a visually appealing manner.
- Visible and working images to get an impression of dishes
- Navigation should make navigating the website easier.
- Login and register form need to be secure to help against hacking.
- Insert recipes form validation to help with incorrect display of dishes.
- Navigation takes a user to specific parts of the website.
- The pop-out navbar appears in place of the navbar on Tablet + Mobile Devices.
- Every recipe should have an image to give other users an idea of how the dish looks like.
- Also, every recipe should have a difficulty level and cooking time to make it easier to decide if it is achievable for other users.
- Form Validation works correctly.
- Login and register form is secured.
- Can click on Recipe name which displays the information needed to make the recipe.
I built the wireframes for this project using Balsamiq. First I started by making a design for the desktop version, which I then translated to mobile/tablet version of the same design. I am not sure yet if I should create a different design for tablet mode as nowadays you have many different sizes for tablets. To get a better understanding of how the elements will be structured on the page.
View my wireframes here
The theme of this project is food and there are a lot of websites like the one I am making for this project. So I wanted to do some research to see if there was anything that I could put in my design to make my website more appealing to users. And that would make users more likely to try and make some of the different recipes on my website.
I also looked into the effects of different fonts and I found an article that talked about scientific facts about fonts. It states that "Experiments show that people are more likely to believe information set in Baskerville". People see Baskerville as a trustworthy font. So that would hopefully mean that users would be more likely to choose my website over another one. As there is a lot of competition in the segment.
So I went to look for this trustworthy font on Google fonts, turns out it is not available there. So for my primary font, I went for the next best thing on Google fonts Libre Baskerville. I decided to go with Regular 400. As the bold 700 would make it harder to read and the regular 400 italic could make it harder to follow instructions. As fact 3 in that same article says "The same researchers found that when people were given a task, those who got fancy fonts estimated the task would take nearly twice as long." I would not want to scare users off because they think the recipes take longer than the estimated time.
The second font I wanted to be a bit fancier to draw users eyes to it. According to fact number 2 in this article "Fancier fonts are associated with more skill in certain professions; in one study, diners who received menus with fancy fonts assumed the chef had more skill."
It cost me some time to find because I had to look through all 999 different family font, where I found 6 that I liked. After that, I had to test the different fonts with my primary font. In the end, I choose for the font family Playball as my second font, even though I find it a bit too bold.
After putting the different font families on the page and working with it for a couple of days. I found out I did not like the Libre Baskerville at all. The two fonts did not match well in the end either. In the beginning, I was not sure about the Playball font but in the end, I liked it a lot. So I have decided to change the main font family. I choose to look at the pairing section on google fonts and decided on a font that I have already used before Roboto. They are a bit similar but Playball is more elegant. So I still have a simple and elegant font but with a similar base.
I looked into which colours would make people more likely to give them an appetite. From all the different articles that I have read, I found out that the colours yellow, orange, green and red stimulate most peoples appetite. In some articles, they also name the colour turquoise because it's often connected to happiness and the feeling of being carefree. The colours orange and yellow are the 2 that are seen as the colours that mostly only have positive effects on your appetite.
-
Yellow: The colour yellow makes most people very happy. When people are happy, they are more likely to eat than when they are feeling sad or overly calm.
-
Orange: Orange is a colour that makes people feel welcome and when someone is comfortable, eating sounds like a great idea.
As for the colours red and green, they have a positive effect but they can also have an increasing effect on your appetite.
-
Green: Many people are attracted to the colour green and associated it with abundance. This is a good colour to promote healthy eating and lots of it. Some people associate green vegetables with a bitter or sour taste. The colour green also has a calming effect and would help with eating a satisfying meal
-
Red: The colour red raises a person’s blood pressure, heart rate, and causes hunger to be more prevalent. Bit if you eat from a red plate you are more likely to eat less. They think it has to do with the fact that red is also a colour that is associated with danger, warnings or stopping.
Therefore these are the four colours I am going to use in this project. The colours orange and yellow I will be using more primary and red and green I will be using too high lights.
At the beginning of this project, I was not sure if I wanted any icons beside the hamburger icon for my mobile menu bar. As I went on in this build I found it visually better to add icons to the small and simple forms, like login and register. I used the icons from the icons library from Materializecss. The icons are easy to understand and they provide visual support to the input fields.
The navbar is vertical on top of the screen. The navbar on a large screen is fully viewable. On smaller screens, it will present itself as a hamburger navbar whereas you click it the menu slides out. The Navbar is styled the color #ff9800 orange from Materialize. The text in the navbar is the colour White. I tried to give it the colour yellow, from Materialize, but that did not work. I have to say that I think it works the white text in the orange navbar. The text has some extra shadow so it will pop out of the orange navbar. The page has the colour #ffff80. As for these 2 colours, I choose them because they have a positive effect on your appetite. I choose to style the page titles all in H1 and centred on the page and use the default black for all the text. I have used two types of buttons, an edit button and a delete/cancel button. The edit buttons have a light green colour from Materialize. The delete/cancel button have a red colour also from Materialize. I styled the text on all the buttons in the same white colour as the navbar. To make it stand out better against the colour of the button.
The Intro section on the home page consists of the text Welcome to and the name of the project. Under the welcome text, I have placed a carousel with some of the pictures of the dishes that you can find on the page. The last part of this intro section has an h5 and it tells the user what the idea is of the website.
In the About section is an explanation about the idea about this website. The text in the home page is the default black. It gives some quite in the colourful page. I added a white box around the about section as this will make it easier to read for users.
I styled the recipes in card panel that has a reveal. So that the user just can the title, image and cookbook name on first glance at the card. The background colour of the cards is white. The background colour of the card together with the simplistic look of the front of the card should give the user a calming effect even though the very bright and loud background colour of the page.
The back of the revealed card is styled a bit busier as I had to add a bit more information to it. I decided the card into 3 sections to make it easier to read. In the first section, I put the name of the recipe again so a user knows which recipe card it has turned around. The second section tells the user more information about times and servings of the recipe. In the last section, the user can find a description of the dish. Under this description is a light green button, with a white text to open the hole recipe.
These 2 pages are styled in the same way. I put the form in a white card to take the attention off the background colour of the website. Under the form, I have put a link that leads to the other page, just in case a user made a mistake.
The login page has three input fields with an understandable icon in front of it. Under the input fields, there is a submit button, with an icon next to it. In front of the link, I put a question, if they already have made a cookbook before. So when they get an error that there is no account with that username they can use the link to go to the register page. I made the background colour of the link is light green. This way it will stand out and it will try in with the submit button.
The register page has four input fields. These are presented the same way as on the log in page. The question in front of the link to the login page, Do you already have a cookbook?
On the profile page, the page title is different than throughout the rest of the page. The page header is situated in a white card and it will show the users username next to the words username's Profile. I am hoping it will make the profile page look more personal to the user.
Under the page title, the user's input data will be shown in recipe cards. I have used the same styling for these cards as in the recipes page. Instead of the open button, the user will see on the left a button to edit the recipe and on the right a button that will delete the recipe.
I have put these pages together because they are copies from each other. The form, again in a white card to distract from the background of the website. The form has different input fields like textarea, select, switch and input fields. At the bottom of the form, there is a submit button. Sadly I have not been able to give the switch the same green colour as the submit button when turned on. So it is still in it's green/blue default colour.
The only difference between the two pages is that in the edit page the input field is already filled in with the inserted data. On the right side of the submit button, there is a cancel button. This button will take the user back to there profile page.
I used a white card to present the card in. I divided the card into three sections. In the first section, you can find all the information that was on the recipe card on the recipes page. I gave the background of this section an orange colour to make it more visible that there are different sections on the card.
In the second section, I put all the new information. I divided this section up into three rows and I kept the background white. The first row the user can find the ingredients and the method they will have to follow to make this list. In the second and third-row, the user can find Tips and if the dish is vegetarian. I put all the titles in an h4, to make them stand out from all the other text.
In the last section, I have put a link that will take the user back to the recipes page. The background colour of this section is also orange. I did this with the same reason as in the first section.
The first thing on the manage categories page is an orange button and it has an icon next to it. With this button, the user can add a new category.
Under this button are the category cards, where the user can see which categories are already made. The cards match with the rest of the theme of the website as they are white with black text on them. On the card, the user can also find two buttons. The first button is light green, which the user can use to edit a category. On the right of this button is a red delete button. Where the user can delete the category.
I also put these twee pages together again because they are a copy from each other. On the page, there is a white card with one input field where you can put in a category name. Under the input field, there is a light green submit button with an icon next to it.
On the edit category page, there is a red cancel button on the right of the green submit button. This button will take the user back to the manage categories page.
- Navbar
- carousel
- Cards
- The feature where you can invite friends to join you cookbook.
- Giving users the possibility to put more than one category with there recipe.
- Add to the ingredients and method field a button that user can make different lines to fil these field in.
- Markdown
- HTML
- CSS
- Jquery/JavaScript
- Python
- For design:
- One article I found on the effects of colours
- One article I found on the effects of colours
- One article I found on the effects of colours
- One article I found on the effects of colours
- One article I found on the effects of colours
- The articleI found on the scientific facts about fonts.
- w3schools
- Google fonts
- Materialize
- For creating my README.md:
- For creating my profile page:
- Text-transformTo capitalize the first letter of the username
- First-letter selector To capitalize the first letter of the username
- The database I used
- Jquery
- For testing:
- For the recipe cards:
- The correct way to use important in css
- Balsamiq Where I made my Wireframes.
- beautifytool Where I beautifyed my code.
I asked some of my friends and family members to test my project. So would get some idea's of what I needed to fix or they would see something I didn't even think about.
-
Test user 1:
- Issue 1: The text of the "About" section is a bit too long, and it conflicts with the simple feel the rest of the website tries to give. Solution: I shorted the "About" text and put it in a white card to make it look similar to the rest of the page.
- Issue 2: Cookbook field is too short, doesn't fit the simple I-can't-cook public. Solution: I removed the length restriction on the cookbook name field.
- Issue 3: The user uses an iPhone to test the website. On the iPhone, the user can not register nor login to the site. Solution:
-
Test user 2:
- Issue 1: The user also uses an iPhone to test the website. On the iPhone, the user can not register nor login to the site. Solution:
-
Test user 3:
- Issue 1: The "Cook with me" in the top left corner should probably have more padding on the left so it's not so close to the edge. Solution: I added a padding-left of 10px.
- Issue 2: The text on the website had a lot of typos and badly structured sentences. Solution: I used the suggested spelling/grammar checker before realizing I have a Grammarly account. So the rest of the text on the website I checked using Grammarly
-
Test user 4:
- Issue 1: The pictures in the different recipe cards could use some top padding. Solution: I added on the top of the pictures the same amount of padding as the sides/bottom had to make to picture look more in balance.
- Issue 2: The user thinks that the website could benefit from having a footer. Solution: As I don't have any contact to make a proper footer. I used the footer to show the following text: © 2020 Copyright Cook with me | For educational purpose.
-
Test User 5:
- Issue 1: The title of the website shows document. Solution: I changed the title in the header from Document to Cook with me.
- Issue 2: Make use of some more headings to make more important elements to stand out. Solution: I played around with putting headers in different parts of the cards. I ended up putting the card titles in a h5 and on the recipe.html I put the middle section in H4 to make it look more important.
Having other people check your progress is useful. I have gotten very useful feedback from them but even I know that people can overlook things, I definitely do. So I decided to test the code that I have written in another way, with tools. I will put down the tools that I have used and what the outcome was when I tested my project with them.
-
Spelling and Grammar. One of the people how tested my website suggested that I put all my texts through a spelling and grammar tool. I know this is one of my weaknesses. So I did not think I did not make any mistakes but I was not expecting to make this many mistakes. In my README.md at that time I found about 77 mistakes and in the About section, I made about 7 mistakes. That I have corrected with the help of the spelling and grammar tool. Knowing this will mean I have to keep checking my spelling and grammar.
-
Tools
-
HTML validator
- add_category.html This is the error I am getting: Error: Bad value {{ url_for('add_category') }} for attribute action on element form: Illegal character in path segment: { is not allowed. This error has to do with the fact that I am using jinja code in html and it is not liking it.
- add_recipe.html I have gotten errors for the for="icon_prefix" in the label tag and as I am not using any icons there I removed them. Al the other errors I am getting are to do with jinja code in the HTML.
- base.html The first error is because I put too many - in my , So I corrected this. The other errors have to do with the jinja code in the HTML.
- categories.html The only errors I get here have to do with the jinja code in the HTML.
- edit_category.html The first error is because I put too many - in my , So I corrected this. The other errors have to do with the jinja code in the HTML.
- edit_recipe.html I have gotten errors for the for="icon_prefix" in the label tag and as I am not using any icons there I removed them. I also have errors that have to do with jinja code in the HTML. The last code I got has to do with the fact that I have two input fields in the label tag at my switch. The reason I have two input fields here has to do with the fact that I have prefilled the edit_recipe. So users can easily what they need to edit in the recipe
- home.html I got two types of errors here, firstly I get the error that I have used two h1 as a top-level heading. This is because I put twee pages in one. So I have the Welcome message in h1 for the intro for this project. Under that, I put the about for this project and there I have also used an h1. Secondly, the other errors have to do with the jinja code in HTML.
- login.html Also here the first error I get is because I put too many - in my , So I corrected this. The second error came because I made a typo at the submit button, I wrote submite but I corrected this. The other errors have to do with the jinja code in the HTML.
- Profile.html The first error I got was telling me I forgot to close one of my div's, so I corrected that. The other errors came from the jinja code in the HTML.
- recipe.html The only errors I am getting here are from the jinja code in the HTML.
- recipes.html The only errors I am getting here are from the jinja code in the HTML.
- register.html I made a typo at the submit button, I wrote submite but I corrected this. The other errors are from the jinja code in the HTML.
-
CSS validator I put my CSS code through the CSS Validator to correct any mistakes or typo's I made. When I clicked check, it told me congratulations no mistakes where found.
-
| Test Cases | Status |
|---|---|
| As a student, I would like to find some really easy recipes. | Pass |
| As a traveller, I would like to store the recipes I learned in my cooking class. | Pass |
| As a beginning cook, I want to see an image of a dish. | Pass |
| As a student, I want to know the cooking time. | Pass |
| As I am always busy, I want the uploading process to be easy. | Pass |
| As I am always on my phone, I want the website to work on my phone. | Pass * |
-
- See remaining bug
-
Bug 1 Problem: Profile page doesn't load, it gives a NoneType error Solution: I gave my parameter and var the same name and that turned out to give the error. After correcting this my profile was shown but instead of the username, it was displaying the password. Turns out that I made a mistake in my login route. After checking the password it should match up the correct username but instead of a username, I wrote password. When I corrected this mistake the profile page showed the correct username.
-
Bug 2 Problem: MongoDb is not inserting the name of the cookbook, it inserted null. Solution: The name in the registration form and in the insert route was not the same. So when I made them match the correct name of the cookbook was inserted in MongoDB.
-
Bug 3 Problem: Second select field doesn't show in edit_recipe- or add_recipe.html. Solution: I reused the code of my first select field but I did it t get_recipes- instead of add_recipes route. Correcting this made the second select field only work at the add_recipe.html. Ather writing this made me look at the edit_recipe route and saw I had to copy the code here too and this made it work on the edit_recipe.html as well.
-
Bug 4 Problem: In the user Profile page I want to put all the recipes that, that user has inserted. But it is giving me this error: TypeError: 'Collection' object is not callable. If you meant to call the 'find_all' method on a 'Collection' object it is failing because no such method exists. Solution: Turnes out I did two things wrong in the code in my app.py. first of all, I did not give my search to the different recipes a variable. Secondly, I used the wrong variable in my return statement. In the code, in the profile.html I misunderstood how the for loop works. After changing all these things my data was presented on the profile.
-
Bug 5 Problem: After clicking on the open recipe button on a recipe card. It would not present the whole recipe. Solution: I used the same code to set up my recipe card as on the recipes page. I was told on Slack that it doesn't have to be in a for loop as I only need one. So after changing that the different recipes got presented.
-
bug 6 Problem: The welcome flash text does not display the username Solution: With the help of a tutor I found out that was down to a syntax error. I wrote a comma(,) instead it had to be a point(.).
- bug 7 Problem: When a user tries to use an iPhone they can not log in or register on the page. Solution:
This project was developed using the Gitpod IDE, committed to git and pushed to GitHub. To deploy this page to Heroku.com from its GitHub repository, the following steps were taken:
- Log into Heroku.
- Go to the button with new on it, on your personal page. Then choose the create new app option.
- I named the new app cook-along-me, choose a region and clicked on the button create app.
- In the app page, go to the deploy tap.
- Connect with Github and choose the correct Github repository you want to use.
- Then Enable Automatic Deploys.
- Go to the top of the page and click on the button open app to see the webpage of Cook with me, https://cook-along-me.herokuapp.com/
Cloning Cook with me from GitHub:
- Navigate to https://github.com/ceciliabinck/(cook-with-me).
- Click the green 'Clone or Download' button.
- Copy the URL in the dropdown box.
- Using your favourite IDE open up your preferred terminal.
- Navigate to your desired file location.
- Copy the following code and input it into your terminal to clone Cook with me.
- git clone https://github.com/ceciliabinck/(cook-with-me).git
The recipes and their pictures, as well as the pictures in the carousel on the home page, are from the website Allrecipes. These are mostly recipes from users from that site. The about section I wrote myself. Other sources I have used in the making of this project I have added them to the tools & libraries section.
I want to thank Tim Nelson, for sharing the new video lessons of the Data Centric Development module. As the used sources where more up to date. I also found they had more useful tips and his explanation of the material was a bit more clear.
I also would like to thank the tutors from the code institute for all the help during the making of this project, as well of my mentor. Here by I want to thank all the people that helped me testing this project, I got some very good feedback from them.