MILESTONE 3 - CODE INSTITUTE

Overview

UX

User Stories

• As a user I would like to search and view recipes by keywords or categories.
• I would like to add my own recipes into the database.
• I would like to able to edit and delete recipes.

Features

• Create new recipes - recipe name, category, level of difficulty, servings, preparation time, method, ingredients.
• Read recipes
• Update recipes
• Delete recipes

Features left to implement

User authentication

Pagination

Technologies used

• Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
• Python

An interpreted, high-level, general-purpose programming language.

• Flask
Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries.
• MongoDB
A general purpose, document-based, distributed database built for modern application developers and for the cloud era.
• Flask-Pymongo
Flask-PyMongo bridges Flask and PyMongo and provides some convenience helpers.
• Materialize
A modern responsive front-end framework based on Material Design.

Testing

Deployment

• Database was created in MongoDB Atlas
• Project workspace was created in GitPod. In this workspace: Flask was installed - pip3 install flask
• Setup app.py file and imported flask and os - from flask import Flask. import os
• Created an instance of flask - app = flask(__name__)
• Inside the app run() function set the host, ip and debug=true
• Create a new Heroku App - unique name and EU Server
• In GitPod login to Heroku through CLI to confirm existance of app. CLI: heroku login
• gitpod /workspace/M3-CI-DCD $ heroku login -i
• heroku: Enter your login credentials
• Email: [email protected]
• Password: **********
• CLI: heroku apps
• Create a git repository in GitPod. CLI: git init. CLI: git add . CLI: git commit -m "Initial Commit"
• Connect GitPod to Heroku. Use code found on Heroku. CLI - $heroku git remote -a
• Create requirements.txt file - CLI: pip3 freeze --local > requirements.txt
• Create Procfile - echo web:python app.py>Procfile
• Add and Commit to Git Repository
• Push to Heroku using code supplied by Heroku.
• CLI - heroku ps:scale web=1 Command to tell Heroku to run the app
• Log in to Heroku to add config variables including IP, Port, Mongo_DB and Mongo_URI
• Set Config Vars adding IP and PORT on Heroku app settings
• IP 0.0.0.0 - PORT 5000

Install the Heroku CLI

Download and install the Heroku CLI

If you haven't already, log in to your Heroku account and follow the prompts to create a new SSH public key

$ heroku login

Create a new git repository

Initialize a git repository in a new or existing directory

$ cd my-project/

$ git init

$ heroku git:remote -a data-centric-m3-ci

Deploy your application

Commit your code to the repository and deploy it to Heroku using Git

$ git add .

$ git commit -am "make it better"

$ git push heroku master

Existing Git repository

For existing repositories, simply add the heroku remote

$ heroku git:remote -a data-centric-m3-ci

Running the code locally

• Under the repository name on GitHub, click Clone or download
• In the Clone with HTTPs section, click the icon beside the URL to copy the clone URL for the repository
• Change the current working directory to the location where you want the cloned directory to be made
• Type git clone, and then paste the URL you copied for the repository
• Press Enter. Your local clone will be created
• Set up a virtual environment
• Install the packages in requirements.txt by typing pip3 install -r requirements.txt in the CLI
• Set the IP address to 127.0.0.1 and the PORT to 5000

MongoDB Structure

recipe_manager.recipe

{"_id":{"$oid":"5eb53ab9f5a3f431259becc4"},

"category_name":"",

"recipe_name":"",

"recipe_description":"",

"is_vegetarian":"",

"ingredientes":"",

"method":"",

"servings":"",

"difficulty":"",

"cook_time":""}"}




recipe_manager.categories

{"_id":{"$oid":"5eb5d6014faee9a32d0ebe3e"},

"category_name":""}"}




recipe_manager.difficulty

{"_id":{"$oid":"5eb5da874faee9a32d0ebe41"},
"difficulty_level":""}"}



recipe_manager.users

{"_id":{"$oid":"5eb5d7624fahe9a90d0ele7e"},

"username":"",

"password":""}"}

Validation

CSS

Jigsaw was used for validation of css code and did not generate significant errors.

HTML

HTML validator was used for validation of HTML code. Errors were thrown on the raw HTML code by the use of Jinja2 templating language which was not recognised by the validator.

jQuery

Code Beautify and JShint target="_blank"> were used for validation of jQuery code. No significant erros were generated.

Python

PEP8 was used to validate Python code and did not generate any errors

HTML Beautifier

Minify Code was used to beautify HTML code.

Credits

The recipes used to start the database were taken from Jamie Oliver's Website

Logo created in Canva

Favicon created in Favicon

Image from Unsplash

Acknowledgements

• The Code Institute Slack community, where I have found many answers to many questions and learned a huge amount by reading through the posts.
• W3SCHOOLS.
• Stack Overflow.

Disclaimer

For educational purposes only.