Milestone 3 project for Code institute Software Development Programme.
Live site
The aim of this project is to create an online cookbook where users can create and share their recipes with fellow users.
As an unregistered user
- I want to be able to understand the purpose of the website
- At the centre of the home page there is a brief description of the purpose of the page and with registrations comes with access to various recipes and uploading own recipes will give user a chance to win recipe of the month.
- Be able to register to the website
- There is a call to action button for registration on the index page. As the user scrolls down, they’ll be prompted to register again with another call to action button.
- View recipe of the month
- In the home page user only has to scroll to see the recipe of the month.
As a registered user I would like to
- Be able to log in/log out
- Log in button is available on the navbar for all users at the home page and the log out button only available to logged in users.
- Be able to Create, View, Update and Delete recipes
- Users can easily create recipes by following link presented on the navbar. Once a user selects one of their own recipes, they will be presented with both and edit and delete button.
- Be able to share recipes while keeping some private
- While creating a recipe, a user can select whether they want to keep the recipe private or not.
- Be able to browse and search all public recipes
- In the navbar users can easily navigate to all recipes and select what recipe they'd like to view.
As the site Admin I would like to be able to
- Post recipe of the month on the Home page
- In the navbar only visible to the admin there, they can click the 'winner' link to where they can then select which recipe has won. The recipe is automatically shown on the index page.
- Delete all users’ recipes
- While users can delete their own recipes. These privileges are also awarded to the admin so they can make sure appropriate content is posted.
The wireframes were designed using the balsamiq tool for different sections and screen sizes. These can be found here.
- #fb8600
- #faedcd
- #f5f5f5
- #28a745
- #f79d65
- #ced4da
- #faebd7
Google fonts: Roboto
Features differ between visitors, users and admin.
Visitors: Minimal features available. They can access login and register page.
Users: Have access to the above features and all recipes, my recipes, create recipes, logout. They can also edit and delete their own recipes.
Admin: Have access to the above features and winners feature. Can also delete any recipe.
Users: Allow users to participate in voting for recipe of the month.
Admin: Give admin rights to delete users.
- HTML5: For the structure of the site.
- CSS3: For styling of the site.
- Bootsrap4: For fast development of the site and its responsiveness.
- Fontawesome: For visual icons.
- Github: For remote access of the project.
- Git: For version-control.
- Visual Studio Code: A development environment as an upgrade to gitpod.
- Mongodb: As the database for storing users data
- Python/Flask: Used for the backend and for communication with mongodb
- Heroku: Deployment of project
PEP8 was used to check python file, until file was pep8 compliant.
The HTML validator used was https://validator.w3.org/. Several errors caught due to jinja the other errors were corrected until no errors shown.
The CSS validator used was https://jigsaw.w3.org/css-validator/validator.
Google devtools was used to make sure the site is responsive to different devices and screen sizes.
These are tests done on the project based on the user stories, to make sure all functionalities are tested.
As an unregistered user I want to
- Be able to register to the website
Both register buttons lead to the registration page successfully. User must enter a name, email with the correct format, and a password with appropriate strength and confirm the password. Incorrectly filled section will prompt user to refill with correct input and entering mismatched password leads to a flash message guiding user to enter matching passwords.
As a registered User I want to
-
Be able to log in
Test 1: Does log in button work?
Result: Log In button on the navigation bar and bottom of home page successfully go to the login page
Test 2: Can a user log in?
Result: User who enters an existing email/password will be logged in successfully. A user who writes an invalid email format or password will be prompted to enter correct values. A wrong email/password will ask user to try again. -
Be able to Create, View, Update and Delete recipes
Test 1: Does create link work? Can a user create recipe?
Result: Yes. all inputs work correctly and require user input. Cancel button redirects user to all recipes page. Delete button also functions and recipe can be deleted. Private recipes are only accessible to owner through ‘My recipes’ link.
Test 2: Does ‘Go to recipe’ link work? Can a user view their own recipes?
Result: Yes. ‘My recipes’ link also works and shows user all their recipes.
Test 3: Does Edit button work? Can a user edit their recipe?
Result: Yes. User is directed to the ’Edit recipe’ page. The edit form is functional, cancel button and update button also work.
Test 4: Does delete button work?
Result: Yes.
Test 5: Can admin delete/edit recipes?
Result: Admin can only delete recipe not make edits. -
Be able to share recipes while keeping some private
Test 1: Can users have their recipes public/private?
Result: Yes. If user does not check the ‘private’ input, their recipe will be public. The user can edit their recipe and decide to make it private by checking the private box.
As the Admin I want to
-
Post a ‘Recipe of the month’ to the home page
Test 1: Does Winner link work?
Result: Yes.
Test 2: Can Admin choose a user and recipe?
Result: Yes, drop down shows all public recipes in the database along with the author email. -
Be able to delete any users’ recipes
Test 1: Does delete button work?
Result: Yes. Test 2: Is recipe deleted successfully
Result: Yes.
Testing has been carried out to make sure unauthenticated users can’t access all pages. Two functions were created to enforce user authentication. The function def is_authenticated(): return 'user' in session , checks if a user is authenticated by checking if a user is in session object, if not the user is directed to the login page.
The second function def is_user_owner_of(recipe): return recipe['author'] == session['user'] authenticates if a user is the owner of a recipe. If a registered user tries to edit, delete a recipe other than theirs they are redirected to ‘All recipes’ page available to all authenticated users.
- Open this repository
- Select code in the following and clone using HTTPS or SSH
- Select the working directory you would like the repo to be cloned
- Type ‘git clone’ followed by URL decided above
- Create an env.py file as shown below, while replacing values with password and the name of the database
import os
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", <SECRETKEY>)
os.environ.setdefault("MONGO_URI", "mongodb+srv://zuhur:<PASSWORD>@milestones.wpely.mongodb.net/<DATABASE>?retryWrites=true&w=majority")
os.environ.setdefault("MONGO_DBNAME", <DATABASENAME>)
- Login / sign up to Heroku
- Create a new app
- Select unique app-name
- Choose appropriate region
- Heroku cannot read env.py files therefore the contents need to be manually input into config vars (via settings)
- Enter values in env.py into config vars
- Push all code to GitHub
- Enable automatic deployment to allow automatic update when code pushed to GitHub
Home page background: https://www.freepik.com/photos/background
Recipe