HomeChopped is a user driven recipe web site where you are able share your ideas for delicious dishes. You can also rate recipes offered by other users and even add recipes to your collection of favourites for easy recall at a later stage.
If your recipe is chosen to be one of our featured recipes there is a chance that it will be presented on the main page slider section.
Recipes are displayed in the form of cards with the main focus being the image and the recipe name. From there users are able to use the more icon to view some additional key information about your recipe. The user can either select the VIEW or select any of the pictures of your recipe to see the full recipe.
The recipe section is easy to navigate and from this view your recipe can be shared or printed, this is also where a user is able to rate or favourite your recipe.
There is also a secure user profile area where you are able to add recipes as well as edit your existing recipes. From here you can also edit you user profile and even change your profile image.
- Overview
- UX
- Features
- Technologies Used
- Testing
- W3C Markup
- W3C CSS
- Autoprefixer
- Unit Testing
- CI/CD
- Google Lighthouse
- Browser and Device Testing
- User Testing
- Deployment
- Prerequisites
- Development
- Cloning
- Requirements
- Environment Variables
- Contribution
- Deployment
- Credits
- Acknowledgements
As a user I would like...
- to be able share my recipes with the world
- to view other users recipes with easy ways to navigate an filter them
- an application that is available on multiple platforms for ease of use
- the application to be easy to navigate with icons and other visual ques
- a rating system where others can rate my dish
- to share my recipes to popular platforms i.e. - Facebook, twitter, Pinterest
- a way to print my recipe to use when I am not able to get online
- a login area that securely stores a hashed version of my password and shows my username in the navigation bar when I am logged in
- a user profile area where I am able to manage my recipes, favourites and my user profile
- to change my user profile image as well as write a small bio about me
- a way to edit and delete recipes I have made
- to be able to delete my profile and all associated recipes with one button
The goal of this project was the create a user driven recipe website that uses a MongoDB database in the backend to manage the core data. The site is neat, clean and responsive and makes use of the full CRUD functionality in various areas.
Before starting the project I used Balsamiq to create the following wireframes. The licence for the software was provided by the Code Institute. Here You can find my Balsamiq project file as well as higher resolution images.
To keep track of the project I made use of a Trello board. The board was used to keep track of progress add ideas when they spring to mind and keep track of online resourses. You can view the board here
The database I used for this project was MongoDB hosted through MongoDB Atlas below is a screenshot of the schema.
I created a simple favicon 
At the top of my home page I have a large slider this is to create an eye-catching first impression. The slider will randomly choose four recipes from the pool of featured recipes each time the page is refreshed. The image for each recipe is accompanied by a banner with the recipe name that animates in from the top. If you select the image of any of the recipes you will be directed to that recipes page.
Above the list of recipe cards are filter options, this includes choosing the amount of cards to show at a time as well as some sorting options. These options are setup to submit on change for convenience.
The recipe cards are designed to look simplistic with a large picture and the recipe title underneath. There is a 'more' icon that can be used to reveal some more key information about the recipe. You can get to the complete recipe either by clicking the VIEW link or the recipe image.
Recipe cards are displayed with pagination navigation at the bottom of the page, this changes depending on the number of cards set to display. This also highlights the page you are currently on. The pagination section has chevrons that can be used for next and previous page and will disable at either end.
The footer is purposefully simple to not take away from the main recipe area, here you will find the links to our social pages.
The sign in page is simple, users can enter their username and password. This is authenticated in python and feedback is given if the credentials are incorrect. For security all passwords are hashed and the hashed versions are compared. Successfully signing in to the site will direct the user to their profile page. There is also a link here to register a new user.
Logged in users will have their username displayed in the navigation bar to show the login status.
Registration is a similar process to signing in. The form is set to give feedback if username is too short. There is also error checking against confirmation password mismatch and some basic password criteria. Passwords are hashed using bcrypt and then saved to the database, hashed passwords are compared on login attempt. Once registered the user ill be redirected to their profile page. There is also a link to go to the sign in page here.
The profile page is a users space to edit and manage their site presence. There are icons with tooltips to help the user navigate easily. From this view the user is able to add and edit recipes and sign out of the site.
Editing your profile could not be easier, with intuitive icons and tooltips. In the edit profile view you can upload an image, write a small bio about yourself and add your email address.
This is also where you will delete your profile. Deleting your profile will also delete all your recipes and images so you will be asked to confirm before the delete is executed.
Editing the recipe image is simple with a full size preview. When changing out an image the old image is automatically removed from the CDN using cloudinary's python package. This is also set to submit on change for instant feedback.
Here you can add the main information about your recipe. This includes timing information, serving information and a description of your recipe. this is also where the recipe's name is edited. Deleting a recipe is also managed from this tab with the same confirmation modal as deleting a user profile.
Here you can add or delete recipe ingredients as needed. There is a large add icon and a text field to insert records and items can be deleted in any order.
The main recipe view is what will be used to make the dish so this has all the features. Author information and the last date it was updated are displayed here along with the recipe's current rating.
Recipe's can be rated here and there is calculation in the backend managing the rating system. Currently I have made this so that any visitor or registered user can rate a recipe but this can easily be switched to registered users only.
A logged in user is able to favourite recipes, if you are viewing a recipe that you have favourited it will have a red icon.
The share button is setup to share the recipe to some popular social platforms, the links are working and will share the recipe if you are logged in.
If you are in need pf a printed version of the recipe there is a print button setup for that. I have used custom classes to manage the printed content.
The ingredient and methods are styled accordingly, for example the methods have numbered steps where the ingredients do not. These step numbers are created using jinja templating.
I have added some custom error pages to make it look a bit more professional when encountering an error, images are from Drlinkcheck.
After some time of adding features to the project I decided to split the Code into more manageable files. this helped a lot as the project grew in scale. below is an outline of this file / folder structure.
.
├── static
│ ├── css
│ │ ├── card.css
│ │ ├── errors.css
│ │ ├── index.css
│ │ ├── print-recipe.css
│ │ ├── recipe.css
│ │ └── style.css
│ ├── images
│ │ ├── favicon.ico
│ │ └── favicon.png
│ └── js
│ └── app.js
├── templates
│ ├── 403.html
│ ├── 404.html
│ ├── 410.html
│ ├── 500.html
│ ├── all-recipes.html
│ ├── base.html
│ ├── edit-method-list.html
│ ├── edit-profile.html
│ ├── edit-recipe.html
│ ├── featured.html
│ ├── index.html
│ ├── profile.html
│ ├── recipe.html
│ ├── register.html
│ └── sign-in.html
├── tests
│ ├── ./tests/__init__.py
│ ├── ./tests/test_login.py
│ ├── ./tests/test_profile.py
│ ├── ./tests/test_recipe.py
│ └── ./tests/test_views.py
├── __init__.py
├── errors.py
├── recipe.py
├── setup.py
├── user_login.py
├── user_profile.py
└── views.py
As with all software, this is a very organic site and there are so many features i would like to implement here is a list of some of them.
- multiple ingredient lists for a complex recipe
- more sorting and filtering options
- recipe categories
- About the author section
The following is a list of tools and technologies I used to create this website:
- Flask 1.1.2
- Used as the main framework for my application
- Python 3.8.3
- Used for backend data manipulation
- Pymongo 3.10.1
- Used to communicate with the mongoDB database
- Pytest 5.4.3
- Used for unit testing my application
- Jinja2 2.11.2
- Used as the main templating language for template manipulation
- Cloudinary 1.21.0
- Used to access the Cloudinary CDN server for image management
- HTML5
- Used as the main language for the templates
- CSS3
- Used for styling the webpage
- JavaScript
- Used for some front end functionality
- Git
- Used for version control
- Materialize
- Used as the main frontend framework
- Google fonts
- Used for website fonts
- Font Awesome
- Used for some icons on the website
- Heroku
- Used to host the website
- GitHub
- Used to store my project source code
- MongoDB
- Used as the main database technology
- Pycharm
- This is the main IDE I used to build the website.
- Adobe Photoshop
- Used to manipulate and create content for the website.
- Balsamq
- Used to create wireframes for the website.
- VS Code
- Used for some coding due to its wide range of add-ins.
- Grammarly
- Used to double-check all my spelling and grammar.
- W3C Markup
- Used this to check my HTML for errors and typos.
- W3C CSS
- Used this to check the validity of my CSS.
- jshint
- Used to validate JavaScript.
- Autoprefixer
- I used this tool to make sure I did not miss any prefixing in my code.
Testing and error checking was undertaken throughout the development process. With the aid of the following tools and the help of human testers, I was able to catch and fix errors and bugs in my code.
Even though using this validator would understandably show errors for the jinja code i managed to catch some small mistakes by validating all the individual html files.
I tested all the CSS files in the project using W3C CSS validator with no errors as per image below.
After finishing up my CSS and before the validation of CSS I used this tool to make sure I had not left out any prefixing in my code.
I used pytest for unit testing, you can fins a copy of my tests in the tests folder in the main app. I only wrote the basic response tests but they ended up helping me a lot when I was developing error handling. To manually run the tests you can run the command py.test. You can find all my unit tests here.
As an extra test I used github actions to set up continuous integration tests when ever I create a pull request. This was just in case I broke something. It was good to check before merging to the master branch.
I used google lighthouse in the chrome browser to help improve performance and catch errors, I fins this a very useful tool to catch small mistakes like forgetting an alt tag for images.
| Browser | Device | Compatibility | Version |
|---|---|---|---|
| Google Chrome | PC | Excellent | Version 83.0.4103.106 |
| Firefox | PC | Excellent | Version 77.0.1 |
| Microsoft Edge | PC | Excellent | Version 83.0.478.54 |
| IE 11 | PC | Good - slight styling differences, some share links are not supported due to depreciated browser | Version 11.900.18362.0 |
| Brave | PC | Excellent | Version 1.10.93 |
| Samsung Internet | Galaxy S8 | Excellent | Version 11.2.2.3 |
| Safari | iPhone 8 | Excellent | Version 13.1 |
- Test links to all pages
- Test errors by typing in random page redirects
- Try to access the user area without signing in
- Test filtering dropdowns
- Test searching
- Test clear search
- Tests card reveals
- Test social links
- Test recipe rating system
- Test recipe share links
- Test print option
- Test account registration
- Test add to favourites
- Test remove from favourites
- Test update profile picture
- Test update profile info
- Test create recipe forms
- Test add / del ingredients
- Test add recipe image
- Test delete recipe
- Test sign out
- Test sign in
- Test delete profile
This was probably the most useful of all, I had a number of friends and family test the application. This helped me get feedback and find bugs I had missed. some included styling issues on different devices to some UX ideas to make it a bit more intuitive. Unfortunately I could not implement all the suggested features in time but the feedback was invaluable. Below are some of the feedback images I received and consequently fixed.
The repository for this project is hosted on GitHub and uses Heroku to serve the site to the world. If you would like to contribute to this project or run it locally you would need to first have some sort of code editor installed like VS Code and some version control software like Git, you will also need a GitHub account.
In order to contribute to this repository you will need to have the following installed:
There are a number of steps required to deploy a local version of this project.
- At the top of the repository click on the
Clone or download button - Copy the path to the repo
https://github.com/Frozenaught/homechopped.git - In your command-line, navigate to the folder where you would like to make a copy of this repository -
c:\MyRepos>. - Type the following to clone the repo
c:\MyRepos> git clone https://github.com/Frozenaught/homechopped.git - Now you can navigate to the newly created directory
c:\MyRepos\homechopped>
Next you will need to install all the projects dependencies type pip install -r requirements.txt. If you add or update any new packages to the project use pip freeze --local > requirements.txt to update the requirements.txt file with the new dependencies.
You will need to setup the following environment variables on your system.
| Variable name | Used for | Notes |
|---|---|---|
| CLOUDINARY_CLOUD_NAME | Cloudinary Image package | Found in your Clouinary account dashboard |
| CLOUDINARY_API_KEY | Cloudinary Image package | Found in your Clouinary account dashboard |
| CLOUDINARY_API_SECRET | Cloudinary Image package | Found in your Clouinary account dashboard |
| HC_MONGO_DBNAME | Mongo DB | This is the name of your database collection eg: homechoped |
| HC_MONGO_URI | Mongo DB | Found in the connect button on the database cluster |
| SESSION_SECRET | Session Variables | This is a unique secret used for cookie encryption, you can use any random string for this |
| IP | Flask | You can use 0.0.0.0 here to indicate a local IP address |
| PORT | Flask | You can use the default port 5000 |
Note: you will need to add these environment variable to your GitHub repo in
settings -> secretsand Heroku insettings -> config vars
- If you chose to make changes to the website I would recommend using separate branches so that you can go back to the original master branch if the changes don't work as expected.
- Use
git checkout -b <brancname>to create a new branch and edit the files accordingly. - If you are happy with the changes to use
git commit -m "my commit message of changes I have made"to commit the changes. - Use
git pushto push the changes to the repository. - As these changes are on a different branch they will not be available on the deployed site until you merge them to the master branch.
- To merge the new branch to the master branch switch to the new branch on GitHub using the branch selector dropdown menu.
- create a new pull request and state what changes were made in the comment section.
- submit the pull request and switch back to the master branch.
- now you will have the option to merge the pull request and you will be done.
The easiest way to deploy the project to Heroku is to set your connect method to GitHub and link the repository master branch. If you set the project up for automatic deploys it will deploy once the master branch is updated.
The bulk of the credits should really go to the documentation of the various technologist I used, I managed to get most of what I needed from there.
The recipes on the site are all real recipes taken from BBC Food, all the text was copied from the links in this trello card
- Placeholder images - Icon Library
- Placeholder profile picture - PNG Item
- Error Images - Drlinkcheck
- Recipe images - Pixabay
- The name was generated using - Biz name wiz
Along the development process I saved all references I used to the References area in my Trello Board
- Used to help with ideas for web design
- Help with login system - Login System
- Cloudinary image upload
- Rate system
- Print Button
- Social links
- Project structure
- General queries Stack overflow