View the live site here

• User stories
• Design
• Mockup
• Technologies Used
• Testing
• Deployment
• Credits

As a first time user i want to:

• Understand the use of the site and what it is about.
• Register an account
• View recipies other people posted
• Open recipe cards to reveal the full recipe and steps
• Be able to search recipes by ingredient and recipe name.

• Log back into my pre registered account
• Add my own recipies using an intuitive form.
• Once recipes have been added be able to make updates to my pre exisiting recipes
• Delete my own recipies.

The two fonts used were from google fonts the main one being 'Prata' with serif being used as a backup and the second one being 'Montserrat' with sans serif being used as a back up.

• HTML5
  • HTML5 was used to structure the site.
• CSS3
  • CSS3 was used for responsive design and html styling.
• Javascript
  • Javascript was used to append form lines and initialize materialize fucntions
• Python
  • Python was used to connect to the site to the Mongo.db site and to render templates throughout the site.
• Jinja
  • Template code was written using Jinja.

1. Materialize css 0.100.2:
   • Materialize was used throughout the project for quick construction of forms, dropdowns, responsivity and layout.
2. Flask:
   • Used to render templates throughout the app.py.
3. Google Fonts:
   • Google fonts was used with materialize to import them.
4. jQuery:
   • jQuery Used among other things in script file to initialze materialize scripts.
5. dbdiagram
   • To design the database schema.
6. Git
   • Git was used for version control by utilizing the terminal.
7. GitHub:
   • GitHub is used to store the projects code and assets and to fork the project.
8. Adobe XD:
   • Adobe XD was used to create the mockups.
9. Werkzeug
   • To encrypt the users passwords.
10. MongoDB:
    • MongoDB was used to create the Database of users and recipes.
11. Heroku:
    • Heroku was used to deploy the app.
12. Jpeg Optimizer
    • Jpeg Optimizer was used to compress the hero image to usable size.
13. dbdiagram
    • To design the database schema.

All testing can be found here.

To find the link, go to the "code" dropdown menu in this repository. Click the clipboard icon next to the url. In your terminal type:

$mkdir <jour project directory>
$git init <jour project directory> (to set up a new repository)
$git clone https://github.com/JorisPaarde/my-vegan-recipes.git

In Windows:

follow these steps.

Install all requirements through the requirements.txt file:

pip install -r requirements.txt

When u are logged in:

• Go to clusters and click create database.

• Enter your database name.

• Enter users.

• Next to your new database name, click the plus sign to add the collections recipes and categories.

• Insert the categories documents as shown in the database design

Documents for users and recipes can then be added trough the site or directly in mongo db as shown in the database design.

Your database is now ready for use.

$touch env.py

Make sure u add this env.py file to your gitignore file! Add the folowing code to your env.py file:

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "<YOUR-SECRET-KEY-HERE>")
os.environ.setdefault("MONGO_URI", "mongodb+srv://root:<MONODBPASSWORD>@cluster0.ajvr3.mongodb.net/<DATABASENAME>?retryWrites=true&w=majority")
os.environ.setdefault("MONGO_DBNAME", "<DATABASENAME>")

Replace YOUR-SECRET-KEY-HERE, MONGODBPASSWORD, DATABASENAME according to your personal situation.

Go to database access, click edit and show password:

Your local clone is now ready for use.

• Create your account on Heroku here: https://signup.heroku.com/login

• Create a new app on heroku:

• Go to: https://dashboard.heroku.com/apps select new, create new app from the dropdown menu on the right. Enter your app-name and region and click create app. Under delpoyment method, select github.

• Select your repository and connect.

• Go to settings, config vars and enter the variables also located in your env.py file.

• Go to deploy and at the bottom of the page manually deploy your main github branch

Your app is now deployed and ready to run. At the top of the page click open app to run it.

• https://www.gordonramsay.com/gr/recipes/

• https://unsplash.com/

• https://github.com/TravelTimN/flask-task-manager-project/blob/demo/app.py
• https://github.com/rebeccatraceyt/bake-it-til-you-make-it/blob/master/static/js/recipe.js