An online communal cookbook
This website was designed so anyone can browse through tasty recipes as well as submit and share their own tasy recipe.
Purposefully done to be clean and simple; users can navigate very easily so they can either try someone else's recipe or share theirs to others.
The goal of this website is to create a user submitted library of recipes that is unique and with a "non-commercial" feel. Clean and simple, users should feel like they are cooking recipes from their grandparents, parents, friends and people close to them.
This website is catered for people who love to cook recipes with a "local" feel regardless of age and gender.
User needs:
- Selection of unique, non-commercial and user submitted recipes.
- Be able to share their own recipe.
- Simple and clean design.
- Free from ads, blogs and other "clutter".
- Easy to navigate on any device.
How this website meets their needs:
- Users are able to submit their own recipe.
- Growing collection of user submitted recipes to choose from.
- Design is simple and clean but still visually appealing.
- No blogs , unnecessary clutter or ads.
- The design like the fixed Navbar makes its very easy to navigate around.
- Expand my portfolio.
- Practice my Python ,Database and Framework skills as well as refresh my HTML,CSS and JS skills.
- A communal online cookbook with a collection of unique and user submitted recipes.
- Increase users which will also grow the number of recipes available.
As a user, what I would want in a recipe website:
- Direct and easy way to get to the recipe I want.
- A number of recipes to choose from.
- Submit and contribute my own recipes.
- For recipes to have that "home-made" feel.
- Access the website from any device.
I visited a number of recipes website for inspiration and to discover what works and what doesnt. I personally find it irritating that when I pick a recipe, I have to scroll past blogs and photos before getting to the information Im after. I also found that most recipes have a restaurant and commercial feel to it.
Colour scheme
- The initial colour design (refer to Wireframe) leaned towards a feminine feel so the colours were changed.
- The primary colours for this website are #fff , #51808B and different shades of grey. The colours are chosen because they are gender neutral so it caters to all users regardless of gender.
- The colour combination also presents a clean and simple looking website because the colours are not too "strong".
Fonts
- Intially, I used Pacifico:cursive for the header font. I decided to change the font as this was not reflective of my design goals.
- I'm using Poppins as my main font as this presents a much simpler and cleaner feel which is one of my design goals.
Ease of use
- Navbar is fixed at the top so users will always have access to the main/important pages.
Recipes Page
- Initial design was to display the available recipes (name and cooking time) in a accordion. The design was updated to cards as the accordion design simply did not allow me to provide enough information for the users browsing through the recipes page.
- Cards are nows used to display the available recipes as this allows me to display a lot more information to the user such as images, short description, prep time and etc.
- Cards also provide a cleaner and less cluttered look which reflects the "clean" look goal.
- Search bar added so users can quickly search recipes.
Footer
- Footer was added to the final design. The footer section allows me to put navlinks at the bottom of the page which will increase ease of use for users.
Figma was used to create my mock ups.
Initial Mock up Home
Mock up add recipe page
Revised Mock up Home
- Users are able to add their own recipes.
- Users are able to edit and update recipes.
- Search bar for recipes where users can search any keyword related to the recipe that they want.
- Time stamps for updated and added recipes.
- Newest recipe will be the first on the recipe list.
- Quick access to newest and most viewed recipes on home page.
- Ability to add recipes in Favourites using users local storage.
- Recipes already in Favourites will alert the user that recipe is already in favourites and will prevent them from adding a duplicate.
- Fixed Navbar so users can always find their way around.
- Form validation.
- Users can subscribe with their email.
- Collapsible navbar on mobile view.
- Jumbotron with "Hello" animated in different languages.
- Footer with access to navlinks and social links.
- Recipe library displayed in cards with images.
- User registry and login.
- Users are only able to update and delete recipes if it was submitted by them.
- The option to filter recipes by category, cooktime, preptime and etc.
- Pagination for when the library grows.
- Weekly automated emails for subsribers.
- Ability to rate the recipes and users to comment.
- More information such as servings, calories , nutrition value and etc.
- Admin access to delete, edit and update recipes.
- Admin ability to review recipes before website displays it.
- The ability to upload a photo file instead of a url.
- Auto-sizer and optimizer for photos.
- Improve Search feature.
I used MongoDB Atlas to store and retrieve data for this website.
To store Categories
_id: ObjectID
category_name: String
To store Recipes
_id:ObjectID
recipe_name: String
category_name: String
recipe_description: String
ingredients:String
methods: String
prep_time: String
cooking_time: String
url_image: String
added_on: String (note: This will be replaced by "last_update:" once recipe is updated)
fave: String
To store Subscribers
_id:ObjectID
email: String
HTML - To create the foundation and structure of my website.
CSS - To add styles and make my website visually appealing.
Figma - To create the wireframe of my website.
Javascript - To expand the capability and interactivity of my website.
Python - The core language used in this project.
Flask, Jinja, Pymongo - Frameworks used for this project to help tie everything together.
Bootstrap CDN - Components from BS library heavily used in this website.
MongoDB/Atlas - To store and grab user submitted data for my website.
GitHub- To store and share this project.
Heroku - To deploy my website.
Font Awesome- To access the icons that I wanted for this website.
Gitpod- To write my code using their IDE.
- W3C Markup Validation for HTML.
- W3C CSS validation for CSS.
- JSHint for JavaScript.
- Autoprefixer CSS for browser compatibility.
- Google Lighthouse
- Mobile Friendly Test - Result
- Chrome developer tools
- BrowserStack
Testing was done by me and 6 users
The following scenarios were tested:
- Submit recipe & Update function
- Multiple recipes were added and updated. Recipes checked to see if it was accurately added or updated.
- Checked to see any console log errors when adding and updating recipes.
- Confirmed that the added recipe shows in "Recently Added" on the Home page and also shows up in the Recipe page.
- Confirmed that time stamps accurately records date added and date updated.
- Layout and design
- Tested on multiple browsers and different devices.
- Tested responsiveness by putting it through responsivedesignchecker.com. (See Bugs section )
- Forms
- Tried to submit a recipe without filling the forms which website will not allow. A prompt will tell users that forms need to be filled out.
- Tried filling Image URL text area with non-url text which triggers the form validator.
- The update forms are pre-filled as intented.
- Update forms also will not let users submit unless all forms are filled correctly.
- Subscribe form will not accept submission unless its in email format.
- Favourites
- All recipes added to Favourites page are successfully displayed on the Favourites page.
- Tried to add a recipe thats already in Favourites to Favourites which the website will not allow and is working as intended.
- Newly added items
- Newly added recipes also appear first on the Recipes page as intended.
- Time stamps
- Added recipes correctly displayed the date it was added.
- Updated recipes correctly displayed the date it was updated.
- Updated a recipe and it correctly replaced "Added on" to "Last updated" as intented.
- Links
- All links were tested and all links correctly redirects to the intended page.
- Social links redirect to the correct social.
- Buttons
- All buttons work and execute their assigned functions.
- Search function
- Performed multiple searches using keywords and recipes associated to those keywords are displayed successfully. See Bugs section )
- If no results are found,the website successfully returns the "No results" feedback.
- 404 & 500
- 404 and 500 error simulated using "abort" and website successfully returns the intended feedback.
This website is subjected to further and ongoing testing as new features are added.
- Added on time stamp
- Initially, the "Added on" feature would over write and delete all other key values except for the "Added on" key and value. Fixed: This was remedied by adding the below code before inserting the time stamp directly.
added_on = now.strftime('%d %B %Y')
recipe['added_on'] = added_on- Flash feedback on Subscribe
- Initially, when a user subcribes with their email, the website will throw an error. Fixed: This was solved by adding a 'SECRET_KEY' to Heroku.
- Search
- When searching keywords, sometimes the search returns are barely related to my keyword. Status: I would like to optimise this in the future by probably using a 3rd party search engine.
- Layout and responsiveness
- The website is not fully optimised (some grids over lap) to work on older devices such as iPhone 4 - 6. Status: Due to those devices being uncommon these days and due to time constraints, I have decided to leave this as it is.
- Some images look pixelated
- Due to the lack of control on the size and quality of images submitted, some photos may look pixelated/ stretched. Status: I would like to implement a feature wher users are able to upload a file rather than a URL. I would also like to set a size for uniformity. Due to the complexity of this feature, this bugs remains for now.
- Edit/Update recipe text area blank spaces
- During edit/update, the text area for some recipes have empty white spaces. Issue might be fixed by making textarea code one line. This could also be caused by people editing and messing with the recipes. This issue is still under observation.
- HTML validator erros
- Fixed all errors shown on HTML validator. You can see new results here
Note: "Add recipe" button is designed to be overlapping the Jumbotron border on certain screen sizes and not on other screen sizes
This project was built using Gitpod IDE , commited and published using GitHub.
Note: You will need to create a free MongoDB account and create your own collection.
- Follow this link
- Click "Clone or Download".
- Copy the clone URL under the HTTPs section.
- Run the files in your local IDE.
- Upgrade PIP with
$ pip install -U pip
- Install dependancies using
$ pip3 install -r requirements.txt
- Create a env.py file with the data that matches my code. Place your own values.
import os
os.environ['MONGO_DB'] =
os.environ['MONGO_URI'] =
os.environ['SECRET_KEY'] =
Note: Please do not forget to add env.py to your .gitignore file.
Heroku was used to deploy this project with the following steps.
- Logged in to Heroku.
- Created a new file called "our-recipe" and picked the region closes to me.
- Under the Deploy section , I connected to Github and also connected to the repo associated.
- Under the Settings section, I updated the "Config Vars" to match my code
| Config Vars | Config Vars |
|---|---|
| IP | 0.0.0.0 |
| PORT | 5000 |
| SECRET_KEY | (hidden) |
| MONGO_URI | (hidden ) |
- In my IDE, I entered my Heroku credentials and typed:
$ git push heroku master
- Back to Heroku, I selected "Enable Automatic Deployment"
- Selected "Master" as branch.
- Wait for Heroku to finish and then click "Open app".
Fontawesome
- Icons used for social links.
Unsplash
- Photo by Brooke Lark on Unsplash
Stack Overflow
- For fixes and references that helped me create this website.
Photopea
- Used to edit images found through this website.
W3schools
- Used for references and as a refresher.
Code Institute Mini Task Manager
- Used as a reference and guide.
Mentor - Femi Medale
- For helping me with my search function and over all design of my website.
- My team of testers which include Estefi, Hines , Craig and Keitel who is always there to help me test my projects and help spot erros and bugs.
This entire website is used for educational purpose only.