This is my third Code Institute milestone project concerning Backend Development. This is a website for people wanting to look up and share recipes; I created it to be a fully responsive CRUD based web application which allows users to share recipes.
The website is for users who want to look up recipes to use or share recipes that they have found useful. It should have all posted recipes available for the user such that they can find anything posted by another user or themselves.
The user can use full CRUD functionality to create, update and delete your recipe on the website, while anyone on the website can read the posted recipes. It should be user friendly such that the customer can easily access other people's recipes and share their own with ease.
- As a first time visitor, I want to easily navigate this website
- As a first time visitor, I want there to be recipes that have information about the dish
- As a first time visitor, I want to be able to use the website comfortably on any of my devices
- As a returning visitor, I want to be able to access more information about the recipes easily
- As a returning visitor, I want the website to be intuitive
- As a returning visitor, I want to be able to create an account to post recipes
- As a frequent visitor, I want to be able to update and delete my own recipes within the website easily
- As a frequent visitor, I want to be able to quickly log in to my account to access the CRUD functionalitites of the website
The website is contained within multiple html pages, which all extend from base.html. The navbar is constant across pages when logged in or logged out, and is collapsible at smaller screen sizes. The navbar contains links to access The register, login and recipes pages of the website. The structure of the website remains the same throughout all layouts; with the elements of each page simply extending horizontally upon the page changing sizes.
The purpose of this is to fulfill user stories:
As a first time visitor, I want to easily navigate this website
As a first time visitor, I want to be able to use the website comfortably on any of my devices
As a returning visitor, I want the website to be intuitive
In the recipes page, there are collapsible elements which open to show more information on each recipe. The purpose of this is to fulfill user stories:
As a first time visitor, I want there to be recipes that have information about the dish
As a returning visitor, I want to be able to access more information about the recipes easily
In the add page, there are multiple fields that operate with a dropdown choice. The purpose of this is to fulfill user story:
As a returning visitor, I want the website to be intuitive
There is a Register and a Log In page available in the navbar
As a returning visitor, I want to be able to create an account to post recipes
As a frequent visitor, I want to be able to quickly log in to my account to access the CRUD functionalitites of the website
In the recipes page, a user can edit and delete recipes that they have added. The purpose of this is to fulfill user story:
As a frequent visitor, I want to be able to update and delete my own recipes within the website easily
I used aspects of a colour scheme from the featured section of coolers. The background of the website is white as standard, with the nav and collapsible elements being charcoal: #264653ff, buttons and other interactive elements as persian green: #2a9d8fff and the background of the collapsible elements' bodies being thistle: #D8BFD8 to contrast with the flags in the body.
I have used Alegreya for the full website, across the navbar and the body.
I used no images across this website, only using Flag-icons and Fontawesome for icons within the website.
Wireframes are linked here:
To access these wireframes seperately, click the links below:
The main divergence from my wireframes is that I have a message in the left of the navbar shwoing the session user's username. Other than that, the project is relatively close to how the wireframes predict.
- Can Create by using the add function in the Add a Recipe page
- Can Read through the Recipe page
- Can Update by pressing the edit button on your own recipe in the Recipe page
- Can Delete by pressing the delete button on your own recipe in the Recipe page
- HTML
- This project uses HTML for the structure and content of the site.
- CSS
- This project uses a custom CSS file to style the site.
- JS
- This project uses custom JS files to add functionality to the site.
- Python
- This project uses a custom python to add functionality to the site and in the HTML files to extend functionality, structure and content.
- Materialize
- This project uses Materialize CSS and JS to style the site and add layout and various functionalities such as buttons.
- Google Fonts
- This project uses Google fonts to style the text in the site.
- Flag-icons
- This project uses flag-icons to add flag icons to the project.
- Fontawesome
- This project uses fontawesome to add icons to the project.
- Balsamiq Wireframes
- Balsamiq Wireframes were used to create wireframes for UX design.
- Github
- This project uses Github as the hosting site, which stores the code.
- Coolors
- This project uses a colour scheme made from the featured colour schemes on coolers.
- Jquery
- Jquery is used in this project as a method of adding functionality in the js file.
- Mongodb
- Mongodb is used in this project to add content (recipes page) and functionality (login/register and CRUD functionality)
- Heroku
- Heroku is used for the deployment of this app.
All HTML files have been run through the W3C Markup Validation Service; this service has given a few errors.
- Error: Bad value has been given for lines containing urls, which is a consequence of using flask and can be ignored.
- Error: Stray End Tag/ Start tag seen but an element of the same type was already open have both been given for base.html head and body tags. Each of these have been checked against the code and have only one ninstance despite the error.
- Error: Text not allowed in element in this context has been given; this error is a consequence of using python in html and can be ignored.
style.css has been run through the W3C CSS Validation Service, giving no errors or warnings.
script.js has been run through JSHint and no warnings were given. There is 1 undefined variable: $, which is used in jquery and thus can be ignored.
app.py has been run through Extends Class Python Tester and returned no errors. app.py has also been tested using python3 -m flake8 in the terminal, which returns 2 errors:
- ./app.py:9:5: F401 'env' imported but unused; which is unused as I have set variables in my gitpod and heroku settings and can be ignored.
- ./app.py:23:1: E304 blank lines found after function decorator; which I cannot find the reason for, as there is no blank line found after and the function decorator is formatted the same as all others which did not return this error.
As this is a backend oriented project, the testing will have a large emphasis on functionality while also having to maintain layout and responsiveness to changes in screen size. Testing will be done across google chrome, mozilla firefox and microsoft edge at small (phone), medium (tablet/notebook) and large (any larger screen) sizes.
To be considered successful, in each browser and at each size the webpage should;
- Contain working and correct hyperlinks, both internal and external, with external links opening in a fresh tab.
- Have no overlapping divs/ sections such that the layout is compromised.
- Display a similar layout as to the wireframes provided above, with the exception of changes in layout design mentioned alongside the wireframes.
| Test Description | Shorthand Reference |
|---|---|
| Layout should be preserved at all window sizes | TC1 |
| Register a user | TC2 |
| Logout of the user | TC3 |
| Login to the user | TC4 |
| Add a recipe | TC5 |
| Edit a recipe | TC6 |
| Delete a recipe | TC7 |
Testing process:
- Open website in the tested browser
- Right click and inspect element
- Change device width for each size class (small, medium and large)
Test case results for each browser:
- Google chrome - Testing all 3 size classes, the webpage acted as desired and passed.
- Microsoft edge - Testing all 3 size classes, the webpage acted as desired and passed.
- Mozilla firefox - Testing all 3 size classes, the webpage acted as desired and passed.
Testing process:
- Open website in the tested browser
- Register a user through register.html
Test case results for each browser:
- Google chrome - Registered user google and gained access to the blocked part of the website, passed.
- Microsoft edge - Registered user edge1 and gained access to the blocked part of the website, passed.
- Mozilla firefox - Registered user firefox and gained access to the blocked part of the website, passed.
Testing process:
- Open website in the tested browser
- Logoutfrom the user using the logout link in the navbar
Test case results for each browser:
- Google chrome - Logged out from user google successfully.
- Microsoft edge - Logged out from user edge1 successfully.
- Mozilla firefox - Logged out from user firefox successfully.
Testing process:
- Open website in the tested browser
- Login as a user through login.html
Test case results for each browser:
- Google chrome - Logged in to user google successfully.
- Microsoft edge - Logged in to user edge1 successfully.
- Mozilla firefox - Logged in to user firefox successfully.
Testing process:
- Open website in the tested browser
- Add a recipe through add.html
- Check the recipe is correct through recipe.html and the mongodb database
Test case results for each browser:
- Google chrome - Added a recipe which can be seen in recipe.html and mongodb
- Microsoft edge - Added a recipe which can be seen in recipe.html and mongodb
- Mozilla firefox - Added a recipe which can be seen in recipe.html and mongodb
Testing process:
- Open website in the tested browser
- Edit a recipe through edit.html
- Check the recipe is correct through recipe.html and the mongodb database
Test case results for each browser:
- Google chrome - Edited the recipe which can be seen as changed in recipe.html and mongodb
- Microsoft edge - Edited the recipe which can be seen as changed in recipe.html and mongodb
- Mozilla firefox - Edited the recipe which can be seen as changed in recipe.html and mongodb
Testing process:
- Open website in the tested browser
- Delete a recipe through the delete button in recipe.html
- Check the recipe is deleted through recipe.html and the mongodb database
Test case results for each browser:
- Google chrome - Deleted the recipe and it cannot be seen in recipe.html or mongodb
- Microsoft edge - Deleted the recipe and it cannot be seen in recipe.html or mongodb
- Mozilla firefox - Deleted the recipe and it cannot be seen in recipe.html or mongodb
Upon perfoming these tests using the deployed Heroku app, the app has been demonstrated as working as intended.
- Before my testing session, I had difficulty displaying the edit.html page which was easily fixed with a small change to the python code rendering the template.
- Before my testing session, I had difficulty displaying the dropdown fields in add.html and edit.html, which was simply a typing error inside the option value for each one.
This project was created in its own repository using Github under my account name. It is named Willdeakin/Milestone-Project-3, and all pushed files can be seen here.
I used Gitpod to write and edit these files, using the bash terminal for saving, updating and version control of the project. For the purpose of this project, I used these commands:
- git add -A; to add all files to the staging area
- git commit -m "message detailing the changes from the last version"; to commit changes from the staging area to the local repository
- git push; to push committed changes from the local repository to the Github repository
For project deployment I used Heroku, a cloud platform where users can host their projects. For the purpose of this project the free version was suitable. All of the files were pushed to Heroku for this deployment.
Heroku setup:
- I created a new app by clicking on New and then Create new app
- I named the new app milestone-project-3-willdeakin and chose the region europe
Steps I took before deployment:
- I froze all requirements using pip3 freeze > requirements.txt so that Heroku could load all dependencies upon deployment
- I created a Procfile such that Heroku knows the necessary details to deploy correctly
Before enabling automatic deploys, I had to set Config Vars in settings for the Mongo DB Name, URI etc. After adding all the necessary Config Vars, I enabled automatic deploys such that every subsequent push in my linked GitHub would push to Heroku also.
- Every time the app deploys, this is seen in the Activity tab.
- Access the Project using Heroku here
- Select the Repository on Github .
- Click on the "Clone or download" green button located to the top right of the File Structure table.
- Click on the "clipboard icon" to the right of the Git URL to copy the web URL of the Clone.
- Open your preferred Integrated Development Environment (IDE) and navigate to the terminal window.
- Change the directory to your desired repository.
- Paste the Git URL copied from above and enter.
-
Code
- The main structure of the app.py and base.html is inspired by the task manager mini project
- Lines 164-172 of app.py are from askpython
- The code of this project was created by Will Deakin.
-
Content
- The content of this project was created by Will Deakin.
Thanks to my mentor Spencer Barriball for feedback and guidance for this project, which lead me in good stead.