This project is my third milestone project (Data Centric Development) in Full Stack Software Development course run by Code Institute
Want to store your favourite recipes all in one place? This website allows you to share your favourite recipes! You can also see recipes that other user's have submitted. Create, read, update & delete recipes once you register on site. You can also browse recipes on the database by category - Breakfast, Lunch, Dinner & Beverages!
This website is made for people who love to cook & want an easy solution to storing their favourite recipes all in one place. Registered users can submit their favourite recipes, update recipes & delete recipes they created that they no longer use! The website is a dark themed website which utilizes the Materialize library to create responsive web design & cards for displaying recipes.
"As a user, I would like to _____________________________"
âś… denotes items that have been successfully implemented
- âś… view the site from any device (mobile, tablet, desktop).
- âś… view all recipes as a Guest.
- âś… manage recipes as a User
- âś… sort/order recipes by recipe name, breakfast type, lunch type, dinner type, beverage type.
- âś… search recipes by recipe name, recipe type.
- âś… limit the number of recipes to display by category type, or see all recipes.
- âś… create my own profile.
- âś… create my own recipes.
- âś… add my own recipes.
- âś… edit my own recipes.
- âś… delete my own recipes.
- âś… be able to log out.
- The design of this website focuses on a dark themed background and displays the recipes on site in responsive MaterializeCSS cards.
- The visual contrast to the dark theme background is highlighted by the vivid & bright colours in the current recipe images, making it visually striking to users visiting the site.
- I wanted the website to have a simplistic high contrast colour scheme.
- I wanted the website to be intuitive and easy to navigate.
- I wanted to achieve a clean, uncluttered aesthetic.
- I wanted the website to be accessible & responsive on all modern devices (desktop, mobile, tablet).
- MaterializeCSS
- My preferred CSS framework for this project because of its visually striking elements, simple-to-understand documentation & simplicity of use.
- jQuery 3.6.0
- In an effort to keep the JavaScript minimal, I have decided to use jQuery as foundation to my scripts framework.
- Flask
- Flask is a free micro web framework that I've used to render the back-end Python with the front-end MaterializeCSS Framework and AnimateCSS Library.
-
When creating this website I favoured simplicity, dark thematic backround and relied on the vivid & colourful recipe images for aesthetic visual contrast, which presents itself as striking to the user.
-
The color scheme used for this website is simply Black/White with images taken from Unsplash & BBC Good Food
-
#fff -
#000
- Font Awesome 5.15.3
- Font Awesome was my preferred source for icon use across the site rather than Materialize Icons. Font Awesome Icons are simplistic & easily customizable and displayed through classes rather than text which fits the aesthetic Snacc is targetting
- Google Fonts were used across the site:
- Montserrat : default font.
- AnimateCSS : Animations used for landing page heading.
- MaterializeCSS : Typography / Colors Documentation from MaterializeCSS was used across the site.
back to top
Register Account
- Anybody can register for free and create their own unique account. There is built-in authentication and authorization to check certain criteria is met before an account is validated. All passwords are hashed for security purposes!
Log In to Account
- If you are an existing user I have built an authorization feature that checks if the hashed passowrd & username match whats in the database.
Log Out of Account
- Existing users can choose to log out if they are finished using the website.
View all recipes
- Both registered users & guests can view the existing recipes available on the site.
Search all recipes
- Both registered users & guests can search existing recipes available on site via text input.
Filter recipes
- Both registered users & guests can filter existing recipes available on site by recipe type, e.g breakfast, lunch, dinner.
Manage recipes
- Registered users can access the manage recipes page which allows for updating current recipes in database or deleting recipes (provided the user has created the recipe they wish to delete).
Add recipes
- [CRUD] Registered users can create / add new recipes to the website. Certain defensive programming functions have been implemented such as having the required attribute on multiple input fields whilst adding a recipe. No submission goes through unless input requirements are met.
View recipes -[CRUD] Both guest & registered users can view recipes on site. By clicking the expandable 'Click for more' element under a recipe, the user can view all associated data with that recipe ranging from recipe name, prep / cook time, ingredients to how to steps
Edit/Update recipes -[CRUD] Registered users can update recipes on the current database. Flash message lets user know if a recipe has been successfully updated.
Delete recipes -[CRUD] Only registered users can utilize the delete feature on the website. Defensive programming function has been implemented so that users can only delete recipes on the website that they have created using their profile. A flash message also appears on clicking the delete button to confirm whether or not the user wants to delete the recipe.
Admin -There is an admin profile which allows full access to CRUD functions on the website. -Admin can edit/delete any recipe from the database
Admin may delete/update any recipe on the database
Registered users will only see the delete button for recipes they have submitted.
More features regarding users control over their profiles. -Enable to delete their account on site. -Enable user to change passwords if they wish. -Enable users to filter recipes to those only they have submitted.
Allergens, Nutritional information -Further information added to each recipe
Extra sort methods -Add more filter criteria so users can filter by cuisine/nutrition/allergens.
Extra pagination for all recipes page -In the event the recipe has a high volume of recipes being submitted to the database.
None of the above features are currently implemented in project. They are speculative ideas for possible further personal development of the project.
back to top
-
- Primary version control for pushing/pulling code to & from my online repository.
-
- The project uses JQuery to simplify DOM manipulation.
-
- Used as remote storage of my code online.
-
- Used as my primary IDE for coding
-
- Used as the base for markup text.
-
- Used as the base for cascading styles.
-
- Used as the primary JavaScript functionality.
-
- Used as primary overall design framework.
-
- Used to enhance frontend styling using prebuilt icons.
-
- Used for animated CSS customization.
-Flask
-
- Used as web framework.
-
- Used for templating with Flask.
-
- Used for password hashing, authentication, and authorization.
-Heroku
- Heroku
- Used for app hosting.
-Python
-
Python 3.6.7 - Used as the back-end programming language.
-
MongoDB Atlas - Used to store my database in the 'cloud'.
-
PyMongo 3.8.0 - Used as the Python API for MongoDB.
-
Python dotenv - Used to get/set values in
.envfile.
-
Chrome DevTools - Allowed me to use browser as an editor for experimental style changes.
-
Am I Responsive - Check responsiveness of website.
- cdnjs
- w3schools
- Stack Overflow
- Thorin Flask Mini Project - Code Institute Data Centric Development Module
back to top
Creating an Account
I've created several of my own personal accounts through the development process in order to confirm authentication and validation worked as expected, along with the master admin account.
I have tested by also registering using a username that already exists in the database to ensure further authentication & validation.
Friends using the website have let me know they did not have any issues with registering a unique account
Add | Edit | Delete a Recipe
I have been adding, updating & deleting recipes using the website throughout the development of this project. There are no issues regarding any of these features. Users are required to fill out input fields when creating/updating recipes as a defensive programming practice to encourage quality submissions. Flash messages let the user know if a recipe has been created, updated or deleted successfully.
Pagination
The pagination method on this website is used primarily to filter recipes by recipe category (breakfast, lunch, dinner) I had a few issues implementing this feature but they were all simple issues regarding the syntax of urls called in the app.py file.
Navigation
I have included certain criteria in my code that hides certain navigation links to guest users. Guest users are unable to directly access the manage recipes tab which allows for ease of updating recipes on the database. I have tested this by creating multiple accounts & visiting the website as a guess off multiple different devices to ensure hidden nav links are working as intended.
Log in
I have tested the log in feature several times over the course of creating this project, including multiple times right before project submission. There are no issues regarding logging in with existing credentials in the database, nor were there any issues reported by friends/family who have registered and used the site. If the username or password is entered incorrectly, a flash message will show up saying 'Incorrect username or password' which is a defensive programming feature that discourages malicious users brute forcing a login by guessing usernames + passwords.
Log Out
I have tested the log out feature several times over the course of creating this project. I found that there are no issues regarding the logging out function nor have a received any reports of issues from friends/family who have used the site.
Responsiveness
I have tested responsiveness of this website for small/medium & large devices throughout development using online resource Am I Responsive? The website seems to be fully responsive according to the website and across multiple devices tested ranging from small smartphones, ipads & large desktops.
HTML
- W3C HTML Validator - Unfortunately this validator is redundant regarding this project. The reason being that this HTML validator doesn't understand Jinja templating syntax. There are a lot of errors present in my IDE also regarding doctype not being declared as Jinja is using a single html document to template the majority of the website using "{% extends "base.html" %}{% block content %}{% endblock %}. -Aside from the errors displaying, the code in this project is perfectly validated through localhost & the live application on Heroku.
CSS
- W3C CSS Validator - I have 33 parsing errors when I run the code through this validator, however every single parsing error is due to the validator not
recognizing elements imported using AnimateCSS & MaterializeCSS. Aside from this, the CSS code is validating fine.
JavaScript
-
JShint -There is only one function in this file. -It takes no arguments. -This function contains 6 statements. -Cyclomatic complexity number for this function is 1.
One undefined variable 13 $ 14 $ 15 $ 16 $ 17 $ 18 $ 19 $
Python
- PEP8 Online
- App.py files are completely PEP8 compliant!
- env.py has one non pep8 compliant line, the URL for MONGODB_URI
To ensure a broad range of users can successfully use the site, I tested it across the 5 major browsers in both desktop and mobile configuration throughout the development of the project.
- Chrome
- Edge
- Firefox
- Safari
- Opera
Using Google Chrome DevTools profiles:
-
Moto G4
-
Galaxy S5
-
Pixel 2/ 2XL
-
iPhone 5/SE
-
iPhone 6/7/8
-
iPhone 6/7/8 Plus
-
iPhone X
-
iPad / Pro
-
Surface Duo
-
Galaxy Fold
-
I have also manually tested this website across various devices I own.
- desktop (2000px)
- Laptop (1600px)
- Large Phone (500px)
-
The website seems to be responsive on physical devices I tested with as well as the device sizes on Chrome Dev Tools.
back to top
Please note - in order to run this project locally on your own system, you will need the following installed:
- Python3 to run the application.
- PIP to install all app requirements.
- Any IDE such as Microsoft Visual Studio Code or GitPod.
- GIT for cloning and version control.
- MongoDB to develop your own database either locally or remotely on MongoDB Atlas.
Next, there's a series of steps to take in order to proceed with local deployment:
- Clone this GitHub repository by either clicking the green Clone or download button and downloading the project as a zip-file (remember to unzip it first), or by entering the following into the Git CLI terminal:
git clone https://github.com/Shadyxstep/Online-Cookbook--MS3.
- Navigate to the correct file location after unpacking the files.
cd <path to folder>
- Create a
.envfile with your credentials. An example can be found here. Be sure to include your MONGO_URI and SECRET_KEY values. - Create a
.flaskenvfile and add the following entries:FLASK_APP=run.pyFLASK_ENV=development
- Install all requirements from the requirements.txt file using this command:
sudo -H pip3 -r requirements.txt
- Sign up for a free account on MongoDB and create a new Database called cook_book. The Collections in that database should be as follows:
recipes
-_id: -category_name: -recipe_name: -img_url: -prep_time: -cook_time: -ingredients: -method_1: -method_1: -method_1: -method_1: -method_1: -description: -created_by:
users
-_id: -username: -password:
categories
-_id: -category_name:
This site is currently deployed on Heroku using the master branch on GitHub. To implement this project on Heroku, the following steps were taken:
- Create a requirements.txt file so Heroku can install the required dependencies to run the app.
sudo pip3 freeze --local > requirements.txt- My file can be found here.
- Create a Procfile to tell Heroku what type of application is being deployed, and how to run it.
echo web: python run.py > Procfile- My file can be found here.
- Sign up for a free Heroku account, create your project app, and click the Deploy tab, at which point you can Connect GitHub as the Deployment Method, and select Enable Automatic Deployment.
- In the Heroku Settings tab, click on the Reveal Config Vars button to configure environmental variables as follows:
- IP :
0.0.0.0 - PORT :
8080 - MONGO_URI :
<link to your Mongo DB> - SECRET_KEY :
<your own secret key> - MY_ADDRESS :
<your own email address> - SEND_TO :
<recipient email address> - PASSWORD :
<you own email password>
- IP :
- Your app should be successfully deployed to Heroku at this point.
back to top
- The recipe data used for this site were obtained from
BBCGoodFood Plenty of high quality meal recipes.
- The photos used in this site were obtained from
-Unsplash Free high quality stock images
- Stack Overflow
- Slack - Specifically 'Data-centric-dev' in the Code Institute Channel.
- Python Docs
- AnimateCSS
- Flask Docs
- I received inspiration for this project from
-Tim Nelson - Found his tutorials in data centric development module of the course to be very informative and easy to understand. - Tried to follow his formatting style for his README files in his numerous projects.
back to top
-
HTML validation errors addressed
- "Validate HTML by url to ensure that there are no errors in your markup (https://validator.w3.org/nu/)., errors can be seen in pages - https://validator.w3.org/nu/?doc=https%3A%2F%2Fonline-cookbook-ms3.herokuapp.com%2Fget_recipes"
- These have been rectified by removing empty elements & adding alt tags to all img attributes on the page.
- Correction Commit: 890a688
- Retested all 17* HTML files & rectified any html parsing errors.
- The only errors still showing up in the validator are regarding the HTML validator not recognizing jinja templating.
-
Debug turned on in production version.
- Correction Commit: 5cd713c.
- Debug is now turned to False.
-
Added a table of contents to readme to make it easier to navigate.
-
App.py file retested to ensure pep8 compliance. No issues found.
-
static/css/style.css retested through CSS Validator, No issues found.
All images and content on this website is for educational purposes only.