Online cookbook to Find and Share recipes.
Table of Content:
-
Site owner's goal: Allow users to share recipes
-
Potential features to include:
-
Create a web application that allows users to store and easily access cooking recipes. Recipes would include fields such as ingredients, preparation steps, required tools, cuisine, etc.
-
Create the backend code and frontend form(s) to allow users to add new recipes to the site, edit them and delete them.
-
Create the backend and frontend functionality for users to locate recipes based on the recipe's fields. You may choose to create a full search functionality, or just a directory of recipes.
-
Provide results in a manner that is visually appealing and user friendly.
-
-
Advanced potential feature (nice-to-have):
- Create a dashboard to provide some statistics about all the recipes.
See the initial mockup here
Color choices:
Primary | Secondary |
---|---|
![]() |
![]() |
We will be using the free tier of MongoDB Atlas which is a cloud MongoDB service. You can find more information here
-
Create a free account on the mongodb website and [sign in].(https://cloud.mongodb.com/user#/atlas/login)
-
Create a free tier cluster, database and a mongodb user for your cluster. You can follow the instructions here how to do this.
-
In your database the following collections will be created by the application:
- user
- recipe
And the following collections need to be manually created:
- category ( as per ER diagram below )
- cuisine ( as per ER diagram below )
- countries ( import this json file )
The database will be constructed according to the following Entity Relationship diagram:
Click here to view the diagram in your browser.
This ER-Diagram is made using draw.io.
- HTML
- CSS
- Javascript
- Python3
- MongoDB
Modules/Frameworks:
- JQuery
- Materialize
- Flask
- Flask-Login
- Flask-WTF
- Python unitttest
The Flask app is tested using pythons unittest module in combination with the coverage module for seeing the code coverage of the unit tests.
Coverage:
Name | Stmts | Miss | Cover |
---|---|---|---|
app.py | 142 | 44 | 69% |
form.py | 9 | 0 | 100% |
tests.py | 75 | 0 | 100% |
user.py | 15 | 3 | 80% |
TOTAL | 241 | 47 | 80% |
Click here for > full coverage report.
You can run the tests manually with the following command:
python3 -m unittest
Using the coverage module( add the -m flag to see which lines are not being tested )
# To run the tests.
coverage run tests.py
# To get a report in plain view
coverage report -m *.py
# To generate a pretty HTML report
coverage html *.py
This application is deployed to heroku here https://wickz-recipe-share.herokuapp.com/.
When deploying to heroku use the following config vars
Variable | Value |
---|---|
DEBUG | True or Empty |
MONGO_URI | MONGO connection link |
DBNAME | MONGO DB name |
IP | 0.0.0.0 |
PORT | 5000 |
SECRECT_KEY | yoursecretkey |
Instructions for linux
1.Make sure you have python3 installed
2.Install virtualenv with pip
#On linux you first need to install pip
sudo apt install python3-pip
#Then u can install virtualenv using pip3
sudo pip3 install virtualenv
3.Clone this repository and put the contents in your virtualenv
4.Create a python virtualenv and activate it
#Replace online-cookbook with your directory name
virtualenv online-cookbook
#activate the virtualenv
source online-cookbook/bin/activate
#deactive the virualenv
deactivate
5.Install the packages in the virutalenv
pip3 install -r requirements.txt
6.Create the following .env file in the root of the directory and fill in the values.
# See https://github.com/theskumar/python-dotenv for instructions
# Connection link to MONGODB
MONGO_URI = ""
# DB to connect to
DBNAME= ""
# Flask secret key
SECRET_KEY = ""
# Set to empty for false i.e. DEBUG = ""
DEBUG = "True"
7.Run the app.py
python3 app.py
-
For unittesting examples and usage > https://www.patricksoftwareblog.com/unit-testing-a-flask-application/
-
Flask-Login example > https://github.com/boh717/FlaskLogin-and-pymongo
-
Countries collections > https://github.com/ozlerhakan/mongodb-json-files/blob/master/datasets/countries-small.json
- The icon used as logo in the navbar is from iconstore
- Current displayed 'test' recipes are from jamie oliver website and from allrecipes