-
UX
World Recipes has been created for people to discover and share recipes from around the world and offers users the ability to save favourite recipes
As a user I would like:
- To be able to view recipes without having to create an account
- To be able to see popular recipes that other users have liked
- To have the option of saving favourite recipes
- To have the option to remove favourite recipes
- To have the option to share recipes
- To have the option to edit shared recipes
- To be able to change my password
In addition to these options, as the admin user I would like:
- To be able to Edit search categories
- To be able to Edit all recipes
The webite was initially designed using balsamiq to create wireframes representing the site structure. See link below for details
I used dbdiagram.io to design the database structure and relations ships
In order to create the feeling of handwritten recipe cards I chose the following fonts from Google fonts.
- Dancing Script cursive
- Courgette cursive
- Comfortaa cursive, Style: Italic
The following sites were used for icon creation
For the majority of colours the below colour panel was used to represent different colours of the world (land, sky and sea)
Navigation bar
- Not signed in Nav Bar
- Not signed in Nav Bar Mobile
- Standard User Nav Bar
- Standard User Nav Bar Mobile
- admin User Nav Bar
- admin User Nav Bar Mobile
Footer
- Social media links
Home Page
- Popular Recipes Carousel
- Blue like button showing number of likes and indicating current user has liked the recipe
Recipe Details Page
- Recipe showing:
- Reicpe Name
- Category
- Country of origin
- Description
- Ingredients
- Method steps
- Likes
- Favourite button
Recipes Page
- Recipe card showing:
- Recipe name
- description
- added by
- likes* favourite
- Country of origin
- Search bar showing fields for:
- Country
- Category
- Vegetarian yes/no
- Keyword search
Manage Recipes & My Recipes Page
- Edit & Delete Recipe buttons
Manage Categories Page
- Manage Categories cards with Edit and Delete options
Favourite Recipes Page
- Remove favourite button
Add Recipe Page
- Remove Ingredient & Remove step Buttons after click add
ย
- Sign out confirm modal
- Delete Recipe confirm modal
- Delete Category confirm modal
Change Password
- Incorrect old password entered
- New and confirm passwords don't match
Sign In
- Incorrect username or password entered
Register
- Incorrect confirm password entered
Front-End
Back-end
Deployment
Details of all tests that were performed can be found here
In order to test this site as admin you will need the following credentials:
- Username: admin
- Password: Password1
- Incorrect Recipes deleting & Removing from Favourites
- Issue was caused by a modal generation in for loop taking the same ID for every modal. Fixed by appending {{ loop.index }} to modal id
- Change Password modal trying to flash messages to deleted my account page
- Fixed by changing modal to a Change password page where flash message can be displayed until password is successfully changed and then redirect to Home page
In addition to the tests that were completed in the testing document, all code has been tested using the following code validators.
- JSHint (JS file passed validator)
- PEP8 online
- W3C HTML Validator (all pages passed validator)
- W3C CSS Validator (css file passed validator)
Does this site provide the following user features?
- To be able to view recipes without having to create an account
- Yes
- To be able to see popular recipes that other users have liked
- Yes
- To have the option of saving favourite recipes
- Yes
- To have the option to remove favourite recipes
- Yes
- To have the option to share recipes
- Yes
- To have the option to edit shared recipes
- Yes
- To be able to change my password
- Yes
As admin user:
- To be able to Edit search categories
- Yes
- To be able to Edit all recipes
- Yes
-
Open browser of choice.
-
Copy/Paste the address of World Recipes in your search box.
-
When on the page, click on the "Code" button.
-
Copy the the HTTPS Link.
-
Open your IDE and in your terminal, create a virtual environement supporting python and flask and activate it.
-
Type "git clone" and paste the HTTPS Link.
-
Create an environement file called "env.py" and add :
- MONGO_URI=mongodb+srv://...
- SECRET_KEY= [Your Secret key]
-
Add your env.py to .gitignore. to avoid it being uploaded.
-
In app.py, switch debug=False to debug=True
-
Upgrade pip locally with the command "pip install -U pip".
-
Install the modules used to run the application using "pip freeze > requirements.txt" in your terminal.
-
Create a MongoDB account and create a database called "world_recipes".
-
Add documtents to database collection as per database design
-
You can now run your application locally by typing the command "python3 app.py" or "run app.py" in your terminal.
-
You can visit the website at http://127.0.0.1:5000
- Create a requirements.txt file using the command pip3 freeze --local > requirements.txt in your CLI.
- Create a Procfile (always with an uppercase P) through the command echo web: python app.py > Procfile. Commit and Push.
- Create an account on Heroku.
- Create a new app with unique name.
- Select your nearest region.
- Create a new python project within the project.
- Link that project through your Github repository in the deployment section.
- Navigate to Haroku Settings and set up the following in Config Vars
- Go back to the Deploy section, select the master branch and deploy the project.
-
Recipes
-
Home page images
I would also like to thank my Mentor Aaron Sinnot for all of his advice and my family and friends for testing the site for me