View a live version of Family Recipes here This is the main website for Family Recipes. This website will allow customers to store their precious family recipes, so they are never lost again. "Family Recipes on multiple displays"

• First Time Visitor Goals
• Returning Visitor Goals
• Frequent Visitor Goals

• Color Scheme
• Typography
• Imagery
• Features
• Defensive Design
• Wireframes

• Languages Used
• Frameworks Libraries and Programs Used

• GitHub
• Cloning to Local Device
• Setting up a google maps javascript API

Photo story for first time user Bugs

• Gallery
• Navbar
• form
• Javascript for Maps
• Javascript for mail

• Media
• Individuals

• The main goal of this website is to allow families and individuals to place all those recipes, they keep on scraps of paper, or in a tatty notebook, thats tooked away in drawer in their pantry to be uploaded to database that will keep them safe. These recipes will also be passed onto other families who will enjoy them. Individuals may check recipes before they start cooking, rather than a panicked message home asking how to making Nana's sponge cake so you can impress your date. Instead the recipes are there for all of you to share.

• A website that allows user full CRUD(Create, Read/Locate , Update and Delete) functionality. Users will upload their recipes and search a database of other recipes.

• Site will use HTML, CSS, jQuery, Python, Flask and MongoDB.

• The user needs to know that their recipes are safe and therefore they must log in to upload a recipe, edit and delete. Only the logged in person should be able to delete an uploaded recipe. These users are also limited to edit the recipe. You are also unable to edit another users recipes.

• The website should be a attractive and well layed out. All recipes are clear and easy to read with an engaging font.

1. A first time user will be able to visit the site on any device.

2. A first time user will register their account.

3. After registering their account the can then add a recipe, edit a recipe and search for recipes using ingredients. This will provided the user with a chance to collate all their family recipes so they are never lost again.

1. Will be able to login to their account.

2. They can also search for new recipes, add new recipes and edit old recipes.

1. Learn new recipes.

2. Continue to add to their recipe book.

3. Double check recipes when making dinner on your mobile.

• Three main colors where chosen. White background, black font like a notebook and teal buttons.

• Red button for deletion warning.

• Font used is Pacifico and cursive for logo and Oswald for the main body. Pacifico font is to conjure the image of a notebook or handwritten recipes.

• Images used were from Unsplash, BBC Food URLs and the main hero image is from Shutterstock.

• Responsive on all devices. To be able to add recipes to a database that are then shared online. Allowing Icons that link to further social media updates.

• The user must log in or register to see the full recipes.

• Passwords are used with WerkZeug to protect the user.

• You can only add, edit and delete your own recipes and not other users recipes.

• The passsword must contain between 5-20 characters.

• Recipes must also contain specific patterns.

• Image Url must contain http:// or https://.

"Sample of Schema for database."

• Wireframe for the whole project. View

• HTML
• CSS
• Jquery
• Python

1. Materializecss

   Materialize CSS

2. Heroku

   Used to deploy app.

3. MongoDB

   Database usedto store recipes and site info.

4. Google Fonts

   Pacifico font used.

5. Fontawesome Fontawesome was used for to get icons for utensils and aa cocktail on the feast page.

6. Gitpod Used gitpod to work on my repositories.

7. Github GitHub is hosting my repositories.

8. JQuery:

   • Used for materialize

9. Balsamiq

   • Balsamiq was used to design and organise my WireFrames.

10. TinyPNG

    • Tinypng for fomatting images, so they loaded faster.

11. Unsplash

    • Upsplash was used to access some stock images to add to the site and in particular the hero image and background image.

12. Shutterstock

    • Shutterstock was used for the heroimage.

13. BBC FOOD

    • Recipes.

14. Werkzeug

    Used for security and passwords.

15. RandomKeyGen

1. Python3
2. Github account
3. Mongo db account
4. Flask
5. heroku account

To make a local clone on Github, follow the following steps.

1. Log in to GitHub and go to the repository.
2. Click on the green button with the text “Code”.
3. Click on “Open with GitHub Desktop” and follow the prompts in the GitHub Desktop Application for instructions.
4. For further options and documentation please click here.

1. Install all of the requirements. In the terminal window of your IDE type

   pip3 install -r requirements.txt

2. Create a databae in Mongo db.

   • Sign up or login.
   • Create a cluster and a database.
   • Create cluster for family_recipes and in it create a further three collections: user, categories, and recipes. Add string values for each.

3. Create the variables. * Create a env.py file by typing touch env.py * Create a gitignore file and add the env.py to the gitignore to ensure that any passwords are not visible in the github repository. * Add environment variables in the env.py

        os.environ.setdefault("IP", "Added by developer")
        os.environ.setdefault("PORT", "Added by developer")
        os.environ.setdefault("SECRET_KEY", "Added by developer")
        os.environ.setdefault("MONGO_URI", "Added by developer")
        os.environ.setdefault("MONGO_DBNAME", "Added by developer")
   

#### Heroku Deployment


This project was deployed using Heroku. Heroku is a PAAS (platform as a service) that enables developer to build, run and operate applications entirely in the cloud. Heroku integrates with GitHub to make it easy to deploy code living on GitHub to apps running on Heroku.

1. In the terminal you must first need to create two files.
 **pip3 freeze -- local > requirements.txt**
  Followed by 
 **echo web: python app.py > Procfile**
  These are needed for Heroku. 
2. Sign in or create a Heroku account. 
    * Click 'New' on the dashboard and select 'Create new app'.
    * Provide a unique app name including dashes, select your region, and   click  **'Create App'**.

3. Go to **delpoy** tab on the dashboard.
   * For the **deployment method** click **Github**
   * Provide your repository name and click **Search**, once it finds your repository, click **Connect**.
   * Click on **Settings** and then the **Reveal Config Vars** to provide your **environment variables** from your **env.py** file to **Heroku**:
   
    ENTER IP, PORT, SECRET_KEY, MONGO_URI, MONGO_DBNAME.

4. Return to your git terminal and Push **requirements.txt** and **Profile**.
    $ git add requirements.txt
    $ git commit -m "Add requirements.txt file."
    $ git add Procfile 
    $ git commit -m "Add procfile."
    $ git push
5.  Return to **Heroku** and click the **deploy** tab. 
    Then click on **Enable Automatic Deployment** followed by **Deploy Branch (main)**
    This will take less than a minute. Once your receive the success note. Click **view** to see your live site. 

"Family Recipes on multiple displays."

1. As a user I am able to use the site on any devise. I am greeted with a colorful landing page, that encourages me to register by clicking the button.

"Family Recipes Home page."

• I click on the register button that requests a user name and password to be set up by the user.

"Family Recipes register page."

• After registering the user lands on the profile page with two buttons at the bottom of the page.

"Family Recipes profile page."

• The user is now in the profile page. There are two buttons that will allow the user to go to recipes or to add their own. This user will first add their own recipe.

"Family Recipes Add Recipe page."

• The user will input details for the recipe in the form. Name, description, ingredients and method. The user can also add an image url or leave it blank so the default image can be used. They will also check the box if the recipe is gluten free. This user is adding vegetable soup and using the default image. The recipe is gluten free. The user must click on a new line for eeach ingredient and new method. The aree prompted to do this in thee input. After submitting the user is directed to all the recipes where their new recipe has been added to the end. The user can then check on the card image to view the new recipe they have uploaded. All details are displaying but the user has forgotten to add an ingredient.

"Family Recipes recipe on scrolling page."

• The user now wants to look at the full recipe and see ingredients listed and whether or not it is gluten free.

"Family Recipes full recipe page."

• The recipe is now displaying in full. Images, name, method, ingredients and gluten free. The user can delete the recipe or edit the recipe using the buttons provided. The user chooses to edit so they can edit a meassurement.

"Family Recipes edit recipe template page."

• The user will find all the fields are filled and ready to be edited. The user changes a measuremeent in ingredients and clicks edit.

"Family Recipes edit recipe template page."

• A message at the top of the page tells the user that they have been successful. The user can now return to the recipes page and search.

"Family Recipes profile page."

• The input indicates you can search using name or ingredients. The user inputs flour into the search bar.

"Family Recipes profile page."

• The user is given a list of recipes that contain flour to scroll through.

"Family Recipes profile page."

"Family Recipes profile page."

• The user can now log out and return at a later day.

W3C CSS Validator Services was used to validate CSS.

"CSS Validation."

• This was successful.

"Pep8 Python testing."

• This was successful but there was white space on blank like that would not change.

"Home Page HTML success." This had errors but they related to none html code on the landing page.

"Lighthouse score for the websites user efficency."

1. The trickiest part is connecting mongodb and to gitpod. The main issue is knowing where to add the name and password to your MONGO_URL. This seemed to have a delayed response for me as it did not initial work but worked the following morning. I use a VPN in China and can cause some glitches. First test didn't work because I had missed a closing " in my html. Once rectified it all worked and stored info in the databases.

• After adding a flex component to css this cause my images to distort. I removed the flex to specific areas instead.

• The form pushed left on small devices. I removed the width of 400px, which helped and then targeted the media query on larger devices.

• Added clearer instructions on the form inputs, so they were not confusing.

• I also changed the pattern instructions in the html as it had blocked very simple inputs like two words.

• I had a link to the recipes which allowed the user to bypass login and register. I removed this from the site.

• Code Institute Tutorials for providing a jumping off block.
• Slack for being a great source of help with either googling or when other students have provided suggestions to help improve your work.
• Code Institute Tutorials.

• My Mentor, Precious Ijege.

• Tutors at Code Institute are great guiding hand. They do not give you the answer but ask the right questions to lead you down the correct path. It also helps build confidence.

• Anne Greaves and Code Institute for a comprehensive guide to writing README.md. The template was taken from the Code Institute Guide to writing README and how to write Markdown.

• Juan Stelling - breaktasty for a thorough README. I used elements of his and Anne Greaves README.

• Alex Harvey, a guide to writing a table of contents in gitpod.

• Feedback from first submission.

Tim Nelson Task Manager

• This was used as the template for creating and connectimg my own python, mongodb database.

• Peer Code for ideas and examples of how to execute my website.

• Lazy Vegan for how to deal with images in the database by Jenny Malone.

• Juan Stelling and breaktasty the ingredients section how to split the ingrediemts into lines.

• BBC Food for all food pic URLS and recipes.

• Shutterstock for land page hero image by Iryn.

• Parallax template from materialize for home page.