(1) UX

• Project Purpose
• User Stories
• Site Owner Goals

(2) UI and Design Choices

• Design Choices
• Fonts
• Colours
• Background

(3) Wireframes

(4) Testing

(5) Bugs and fixes

(6) Deployment

(7) Technologies used

(8) Tools

(9) Code

(10) Credits

(11) Please Note

(11) Disclaimer

The purpose of this build is to provide a simple to use platform for a group to share recipes and instructions of their use using a common database. This should at the same time allow the site owner to collect data saved to the database.

1. As a user, I want to quickly access the detailed instrucitons for any recipe in the group. so that I can cook using the information presented to me.
2. As a user, I want to quickly and easily choose a category so that I can narrow down the type of recipe I am looking for.
3. As a user, I want to add my own reicpes to the group and be able to give a clear presentation of the recipe and instructions for its use so that I can allow friends and family to benefit.
4. As a user, I want to alter and ammend any of my recipes if I believe it improves the recipe so that I can help the group as a whole improve the recipes
5. As a user, I want to be able to easily navigate back to the home as well as between pages

• To have complete access to the collected data within the associated database.

• A mobile first approach to design will be used.
• A navbar with the website title as a central feature. A home button to allow easy navigation back to the main page. A dropdown menu with the main options will feature on the the right side
• Three simple and clear buttons in the main body of the landing page will provide easy options for lookin up, adding and editing recipes.
• A footer with basic website information
• The site should feel clean, simple and most of all intuative to the user as it will be the central hup for a commen family/friends experience
• The site is to be constructed according to the D.R.U.D (create, read, use, delete) principle.
• The site should have it's features emmidiately accesable to a user
• The user should have easily accesable recipes and be provided with basic instructions for its use
• The users should be able to share their recipes with the group. This will include details of the recipe such as ingredients, cooking time, amount of people it serves, cooking instructions etc.
• The user should be able to add their name to their recipe.
• The user should be able to add their own image of their recipe.
• The user should have the ability to edit or delete all recipes wihtin the group.
• The site should be easily navigated from page to page as it's purpose will be to assist the user in cooking rather then being their main focus of attention
• The site should be a familar place to return to after the initial intuatively learned experience

Google fonts wil be used thoughout. The font-familes will be indie flower and pangolin as I felt they have a friendly, almost handwritten feel to the site.

Colour schemes were chosen using colorcombos.com

The background images were chosen to be visually captive and to be an emmidiate indication of the reason and purpose of the website.

Wireframes were constructed using whimsical Wireframes as it allow me to easily construct both a mobile and desktop version of original concept. See the wireframes here.

I want through all my user stories and tested all functionality and working. I am satisfied that all the planned user stories have been implemented correctly.

Navbar: Dispite having "show-on-small" as a Materialize class which is defined as "show on mobiles ONLY" it is still showing up to a width of 992px in Dev Tools. The dropdown menu would not hide on mobile despite adding hide-on-small-only to class Mobile menu si showing on tablet instpite adding show-on-small class. Adding hide-on-med-and-up removed the menu on all formats.

<a href="#" data-activates="mobile-nav" class="button-collapse show-on-small"><i class="material-icons">menu</i></a>

I tried to use CSS @media queries but this did not work either. The addition of the btn class (materialize) in the mobile-nav resolved the issue.

Add Recipe:(example code)

 <div class="input-field col s12 m4 l3">

The rows and columns were re-arranged correctly.

Favicon:

"GET /favicon.ico HTTP/1.1" 404

Restarting workspace in gitpod fixed this issue temporarely but bug percisted. The favicon icons were moved out of the images folder and directly into the static folder. This resolved the issue.

• Create requirements.txt in the terminal:

pip3 freeze > requirements.txt

• Create a Procfile in the termianl:

echo web: python3 app.py > Procfile

• Push files to your repository:

git push

• Login to Heroku and in the dashboard create a new app.
• In the depley section select GitHub as the deployment method.
• Go to settings and click 'Reveal Config Vars' then set IP: 0.0.0.0 and PORT: 5000.
• Click 'Open app' to deploy.

Heroku live link: https://the-recipe-book-group.herokuapp.com/

Should you need to install the relevant requirements and dependencies use the following command:

pip3 -r requirements.txt

flask run

OR

python3 app.py

Heroku live link: https://the-recipe-book-group.herokuapp.com

• Desktop PC
• MacBook Air
• Galaxy Tab A
• Iphone X

• windows 10
• OS X
• Android 10
• iOS 13

• HTML for the base structure of the website
• CSS for adding styles to HTML elements
• MATERIALISE for frameworks
• JQUERY for javascript functionality

• FLASK microframework
• FLASK-PYMONGO
• DNSPYTHON
• HERUKO
• PYTHON
• PYMONGO
• MongoDB Atlas
• BSON

• Markdownlint
• JavaScript
• CSS Validator
• HTML Validator

• colorpicker.com
• whimsical Wireframes
• HTML formatter
• Python formatter

Some of my code was adapted from:

• W3Schools
• Whimsical

• Code Institute
• My Mentor Simen Deahlin.

This repository was created using the Code Institute Gitpod Template and the README.md file and wireframes were copied to this repository. For version control please kindly see the-cook-book-group

No "git push" commands were used until after commit 3efcdfc12417a64241343ce24c82a6d3d547a34b. I had Heroku directly connected and auto deployment set and so I thought I was not necessary to git push.

All content within this website are for educational purposes only. .