Cooking With Love

Contents

1. Summary
2. UX
   1. Strategy
   2. Scope
   3. Structure
   4. Skeleton
   5. Surface
3. Features
   1. Existing Features
   2. Features left to implement
4. Bugs
5. Technologies used
6. Testing
7. Deployment
   1. Github Pages
   2. heroku
8. Credits
   1. Content
   2. Acknowledgements

Summary

This site is a virtual cookbook.

It provides a database of recipes which can be searched, viewed, added to, removed from and edited.

UX

Strategy

New site user's goals:

• As a new site user, I want to be able to browse and search for recipes
• As a new site user, I want to get inspiration for a recipe to make
• As a new site user, I want to be able to understand the intent of the page
• As a new site user, I want I want to understand easily how to navigate the page and access the facilities provided

Returning user's goals

• As a returning site user, I want to be able to log in
• As a returning site user, I want to be able to view my recipes
• As a returning site user, I want to be able to edit and delete my recipes
• As a returning site user, I want to be able to add new recipes

Site owner'as goals:

• As a site owner, I want recipes added via the site to be stored in the correct format in the database
• As a site owner, I want to be able to see who has added each recipe

Scope

Functional requirements:

For ease of use:

• Navigation bar which is simple and easy to navigate
• A search Function

To ensure the database is up to date and editable:

• Function to add a recipe
• Function to edit a recipe
• Function to delete a recipe
• For the recipes to be only editable by the creator

Content requirements:

To ensure the site is visually appealing and to draw the user's eye:

• Images of recipes
• Clear, crisp colours which do not detract from or make the text unreadable

For usability

• For the time commitment to be clear as this is often a factor in a recipe choice

Structure

Interaction design:

• User friendly interface to ensure usability and to encourage the user to return
• Responsive and visible links which change on hover to provide user feedback as they navigate the site
• Ability to exit pop ups so a user is not forced to use the browser navigation tools

Information Architecture:

• Navigation bar at the top of the page
• Footer at the bottom of the page - sticky to the bottom so it is only visible when the bottom of the page is reached
• Responsive navigation bar - adjusting for mobile for ease of use
• Responsive images to ensure they fit within the designated spaces, no matter what device is being used or the size of the screen
• All features appropriate size and responsive for mobile and desktop viewing
• All information is appropriate and relative to the subject and not misleading or hard to find

Skeleton

Please click the below link to view the wireframe mock up of the website in mobile, tablet and desktop sizing

Wireframe

Surface

The intention of the website is to be clean, crisp and clear

• The font family chosen is 'Lato' as this is a clear and easy to read font
• The colour scheme selected is shades of teal and white. The only variant to this is the borders for the recipes which (although the colour is actually lime) provides the feel of an invitation card with a gold border
• The colour scheme was selected as it is clean and crisp. It is reminicent of a kitchen and the background chosen includes images of tools used in a kitchen

Features

Existing Features

Features left to implement

Bugs

Technologies Used

• Materialize - https://materializecss.com/
• JavaScript
• Google fonts - https://fonts.google.com/
• www.validator.w3.org
• http://www.css-validator.org/
• Git
• Gitpod
• GitHub
• Google Chrome
• http://www.responsinator.com/
• Chrome Dev Tools
• Python
• Flask
• Amazon AWS S3
• MongoDb
• Heroku
• Jinja
• Favicon.io
• Balsamiq

Testing

New site user testing:

• As a new site user, I want to be able to browse and search for recipes
  1. Upon entering the site, users are automatically greeted with the page title and sub heading
  2. There is a clear call to action to browse the recipes
• As a new site user, I want to get inspiration for a recipe to make
  1. The images and cook/prep times within the page provide inspiration to the site user
• As a new site user, I want to be able to understand the intent of the page
  1. Upon entering the page, it is clear the site is designed around food and cooking. The carousel content and background image point the user to this
• As a new site user, I want I want to understand easily how to navigate the page and access the facilities provided
  1. The navigation bar has clear and easy to understand links. These links are also dynamic to whether the user is signed in or not so they are only seeing the relevant options

Returning user testing

• As a returning site user, I want to be able to log in
  1. Upon entering the site, there is the option in the nav bar to register and log in
• As a returning site user, I want to be able to view my recipes
  1. the user's profile page provides all of the recipes the user has submitted
• As a returning site user, I want to be able to edit and delete my recipes
  1. The recipes the user has submitted all show buttons to edit and delete the recipes. This is not visible to other users
• As a returning site user, I want to be able to add new recipes
  1. The form to enter a new recipe allows the user to instantly add a recipe to the site in the required format

Site owner testing:

• As a site owner, I want recipes added via the site to be stored in the correct format in the database
  1. The form to add or edit a recipe validates the content to ensure all fields are complete and are in the correct format
• As a site owner, I want to be able to see who has added each recipe
  1. When a recipe is submitted, the user's _Id is stored in the database. This shows on the site as the user's username on each recipe

Performance testing:

1. Tested website responsiveness using http://www.responsinator.com/
   1. Results: The website is responsive to all device sizes without any unnecessary x-scroll.
2. Tested the image size to ensure no image is to large and impacting the website loading times. I used the Google Dev Tools - Network
   1. Results: The site loading time is sub optimal. The total website loading time is 1.30s which can be improved
3. Tested the images on the all recipes page using Google Dev Tools - Lighthouse
   1. Results: An issue highlighted using this tool is the image formats used. Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption.
4. All HTML pages were tested using https://jigsaw.w3.org/css-validator/validator
   1. All but the 'base' template resulted in errors that the Lang Doctype and Title were missing. This was to be expected as the details were being extended from the base template to did not need to be added
   2. All HTML pages resulted in errors where the Jinja template language was used
   3. None of these are actual errors within the code
5. Tested the CSS using http://www.css-validator.org/
   1. No errors were found
6. Tested the website on the Google Chrome browser Version 87.0.4280.88 (Official Build) (64-bit)
   1. Results: The website was responsive and the elements performed in the way they were intended to
7. Tested the website on the Microsoft Edge browser Version Version 87.0.664.66 (Official build) (64-bit)
   1. Results: The website was responsive and the elements performed in the way they were intended to
8. Tested the website on the Firefox browser Version 82.0.3 (64-bit)
   1. Results: The website was responsive and the elements performed in the way they were intended to
9. Tested the form validation worked correctly on each of the above browsers
   1. Results: The form correctly sent when the fields were completed as they should have been and did not when the fields had not been completed

Deployment

Github Pages

1. Create a new repository or access an existing repository
2. Click the green Gitpod button to launch the project in Gitpod
3. Create an index.html file
4. Add the file to the staging area using the git add Functional
5. Commit the file using the git commit function, adding an appropriate commentary
6. Push the file to GitHub using the git commit and git push functions
7. Refresh your GitHub repository and click the 'Settings' tab
8. Scroll to the GitHub Pages section and select a publishing source
9. Click 'Save'
10. Click the URL created within the Settings - GitHub Pages section

To clone the repository for local deployment:

1. On the main page of the repository, click the down arrow Code button
2. Click the download icon under the relevant section to clone with either HTTPS, SSH or GitHub CLI
3. In Git Bash, change the current directory to the location you want the directory to be stored
4. Type git clone and then paste the URL you copied in step 2
   1. An example for HTTPS: git clone
5. Press enter - that's it, your clone has been completed!

To fork the repository:

1. Navigate to the main page of the repository you wish to fork
2. Click the Fork button on the top right hand side of the page

Heroku

How to deploy to Heroku

To deploy the app to Heroku from its GitHub repository, the following steps were taken:

1. From the GitPod terminal, create requirements.txt and Procfile using these commands:

pip3 freeze --local > requirements.txt
echo web: python app.py > Procfile

2. Push these files to GitHub
3. Log In to Heroku
4. Select Create new app from the dropdown in the Heroku dashboard
5. Choose a unique name ('recipe-nation') for the app and the location nearest to you
6. Go to the Deploy tab and under Deployment method choose GitHub
7. In Connect to GitHub enter your GitHub repository details and once found, click Connect
8. Go to the Settings tab and under Config Vars choose Reveal Config Vars
9. Enter the following keys and values, which must match those in the env.py file created earlier:

10. Go back to the Deploy tab and under Automatic deploys choose Enable Automatic Deploys
11. Under Manual deploy, select master and click Deploy Branch
12. Once the app has finished building, click Open app from the header row of the dashboard

Credits

Content

All of the recipes and images added under the usernames 'holly' and 'green' were sourced from : http://www.desktopcookbook.com/default.asp https://data-centric-cookbook.herokuapp.com/ https://www.pexels.com/ https://www.stockvault.net/

Acknowledgements

• My mentor Antonio Rodriguez who has provided me with guidance and support through the project