The world_recipes from code-institute-submissions

UX
- Introduction
- User Stories
- Design
  - Wireframe
  - Database
  - Fonts
  - Icons
  - Colours
Features
Technologies
Testing
Deployment
Credit

Introduction

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

UX (User Experience)

User Stories

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

Design

Wireframes

The webite was initially designed using balsamiq to create wireframes representing the site structure. See link below for details

Database

I used dbdiagram.io to design the database structure and relations ships

Fonts

In order to create the feeling of handwritten recipe cards I chose the following fonts from Google fonts.

Logo and Recipe descriptions

Dancing Script cursive

Titles

Courgette cursive

Buttons and other where clairity is required

Comfortaa cursive, Style: Italic

Icons

The following sites were used for icon creation

Colours

For the majority of colours the below colour panel was used to represent different colours of the world (land, sky and sea)

- like hover
- Header & Footer
- Submit Buttons
- button effects
- Background

Features

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

Defensive Programming

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

Technologies, libraries and tools used

Front-End

Back-end

Deployment

Testing

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

Issues identified and fixed

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)

User Story verification

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

Deployment

Local Deployment

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

Deploying on Heroku

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.

Credits

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

code-institute-submissions / world_recipes Goto Github PK

world_recipes's Introduction

Contents