MILESTONE 3 - CODE INSTITUTE
A web application created in Python and Flask. View website on OverviewHeroku A recipe database where viewers can search and view recipes. Users can also add, edit or delete their own recipes.
This website was created with the intention to store and share recipes with other users, in a simple uncluttered layout, to make it easy to navigate. The user can choose a specific recipe from the list where more details about the recipe will be displayed, such as: category (appetizers, entrees and desserts), ingredients, cooking method, servings, preparation time and difficulty level. This page also allows the user to delete or edit the recipe. Within the navbar the user has access to all recipes. There's also a link that brings to a form to add a new recipe. 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
As it is any user can update and delete recipes, which could lead to the recipe information being amended/deleted maliciously. In order to amend this I would like to have implemented a user authentication system that would mean only the original author of the recipe has the power to edit or remove it. User authentication
To handle that the number of recipe results doesn't become too long, as the database grows. Pagination
Technologies used
- Bootstrap Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- Python
- 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.
An interpreted, high-level, general-purpose programming language.
All the CRUD actions were tested and are working as it should. The responsiveness was tested on every page. Every link was tested and works properly. All forms handle empty input fields. Testing
Deployment and source control was carried out via GitHub and Heroku. The following steps were taken to deploy the website: 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
- 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
- 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.
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
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
CSSJigsaw was used for validation of css code and did not generate significant errors.
HTMLHTML 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.
jQueryCode Beautify and JShint target="_blank"> were used for validation of jQuery code. No significant erros were generated.
PythonPEP8 was used to validate Python code and did not generate any errors
HTML BeautifierMinify 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