The Book - Online Cookbook App Milestone Project 3

This project is the culmination of the material covered in the data-centric development module from the Code Institute. Given the brief of an online cookbook app, I decided to create a website where users could view recipes from around the world and act as a recipe database, also allowing for users to add their own creations to share with others.

UX

This site was designed to allow users to view, edit and add new recipes. The recipes are grouped by name. It is also possible to find recipes that exclude a specific allergen.

User Stories

As a user, I want to be able to add, edit and/or delete recipes that I have created and shared.
As a user with specific dietary requirements, I want to be able to search for recipes which exclude the things I am allergic to.
As an aspiring cook, I want to be able to search for recipes that require different levels of skill.
As a user, I want to be able to view different recipes to get ideas for meals to cook for a party/friends/family.

Wireframes

Schemas

Existing Features

I decided for this project to use a NoSql database as that seemed to be the best way to handle such a large store of information and it also meant that the user wasn't having to worry about measurments for ingredients, or that they were met with lots of dropdown menus which, from personal experience, reduces enjoyment on a website and feels cumbersome.

MongoDB Atlas was used to store the database.

User Login and Registration

A user can create an account and have their own unique username. This username will be used to log in and identify a recipe belonging to that user.
The Log In page is the first page all users visiting the website will see. It contains a jumbotron with some information and directions for the user.
Login and/or Registration gives the user the ability to add, edit and/or delete their own recipes.
If a username already exists or login information does not match the input from the user, a message will flash to alert the user to this.

Navbar

Contains the website name that, when clicked, links to the recipes page.
A user button that opens a dropdown for login/sign up when a user is not logged in, and logout when the user session is active.
Add recipe button that will only appear when the user has logged in.
Button that links to the recipes page.

Recipes

Page where the user can view all the recipes available. Recipes are ordered alphabetically.
Contains search forms that allow the user to search for recipes by difficulty, ingredient or exclusion of an allergen.
Pagination present so the user doesn't have to constantly scroll when looking for a recipe.

Single Recipe View

Displays a chosen recipe in more detail. Shows ingredients, cook time, instructions etc.
Back button to allow the user to revisit the previous page rather than clicking on the back arrow in the browser or having to click on the recipes button and travel through the pagination to get to where they were.
If the recipe was created by the user, i.e the recipe author matches the session username, buttons for editing and/or deleting the recipe will be visible.

Forms and modals

An add recipe form to allow the user to add their own recipes to the website to share with other users.
Fields where multiple lines are required have buttons to allow the user to add or remove lines for these items as they require, such as ingredients and instructions.
An edit recipe form that allows the user to edit recipes that match their username if they have changes they need to make to them.
Delete recipe modal that pops up when a user clicks the delete recipe button. Ensures that the user doesn't click the button by accident and has to confirm if they want the deletion to continue.
When a recipe is added, edited or deleted, a message will be shown at the top of the page to which they are redirected to inform the user that the process was successful.

Features to Implement in the Future

Profile page for the user that displays all of the recipes that they have created and/or liked.
A like system that shows the popularity of recipes.
A system that will allow the user to filter recipes by likes, recency, difficulty, category etc.
A comment section at the bottom of a recipe's page to allow users to say whether they made a dish and how it turned out.
A print button to allow users to have physical copies of recipes rather than having to write the recipe down or constantly look back to the website for confirmation.
A way for users to view a collection of recipes by a specific user.

Technologies Used

HTML 5

positioning and format of html elements.

CSS

Styling the HTML elements

JavaScript

Handling of add and remove buttons in add and edit forms

Python

Implement the logic, functionality and responses of the project.

Jquery

Handling of loader
Navbar on smaller screen sizes

FontAwesome

Used for icons used in project

Bootstrap

Used for formatting of HTML elements

Bootswatch

Used to get theme for project

Flask

Used to build the app and handle python logic in html

PyMongo

The PyMongo distribution contains tools for interacting with MongoDB database from Python

Deployment and Testing

Deployment

My project was created in a cloud9 workspace and deployed heroku and is hosted on github pages. The link to the working heroku page can be found here.The deployment process was as follows:

In the cloud9 command line I entered the following:

git init to start a new git repository
pip3 freeze --local > requirements.txtCreates a .txt file which tells Heroku what dependencies the project is using.
echo web: python run.py > ProcfileTells Heroku that this project is a web app and that "app.py" is going the run it.
git add . to add all changes made
git commit -m "initial commit" to create an initial commit in the github repository
git push and enter username and password to push the commit to github

In app.py in cloud9 I added the following to allow Heroku to find the variables:

app.secret_key = os.environ.get('SECRET_KEY')
app.config["MONGO_DBNAME"] = os.environ.get("MONGO_DBNAME")
app.config["MONGO_URI"] = os.environ.get("MONGO_URI")

In Heroku:

I created a new app and named it the-book-4
I then went to the settings tab and clicked on config vars and entered the following:

IP = 0.0.0.0
PORT = 5000
SECRET_KEY = |my_secret_key|
MONGO_DBNAME = |database name|
MONGO_URI = |mongodb+srv://|username|:|password|@projects-fyjqy.mongodb.net/|database name|?retryWrites=true|
I then connected heroku to my github repository so that every commit I made to github, heroku would automatically be updated.

Testing

I tested my CSS file using the Jigsaw validator and no errors were found.

I checked my HTML with W3C validator. Only Jinja related errors were returned due to the validation not programmed to read them.

I formatted my Python code with autopep8 and validated it with flake8. No errors were found.

sudo pip install --upgrade autopep8
autopep8 --in-place --aggressive --aggressive app.py
sudo pip install flake8
flake8 app.py

I tested the app at different screen resolutions and across different browsers. The app was fully responsive and there were no evident bugs.

Credits and Acknowledgements

First and foremost, thanks must be given to my mentor Moosa Hassan who provided invaluable feedback and advice throughout this project. He helped keep me on track and ensured I didn't lose my way in the process.

Thanks also to my fellow coders and students in the slack channel for this project - having people at hand for immediate feedback on an implementation or help with a bugfix or code that isn't working was a big help and stress reliever.

Thank you to the tutor support team at the code institute for their help with more technical issues when I wasn't able to get a solution from my other sources or through google. They were really understanding and took the time to explain to me any advice that they were giving me so that I knew what the code was doing.

The loading screen was the creation of Peter Tichy (ihatetomatoes) and can be found hereThe only changes made to the code were the colours displayed

The images and recipes used in this project were all obtained from one of three sources, BBC Good Food, Epicurious and Maangchi

Logic and code for the login and signup forms was gotten from WTForms

Code for the back button on the single recipe page found here

code-institute-submissions / the-book Goto Github PK

the-book's Introduction