- UX
- Project Goals
- User Stories
- User Goals
- Strategy
- Scope
- Structure
- Surface
- Design Choices
- Fonts
- Colours
- Styling
- Images
- Features
- Current Features
- Future features
- Design Choices
- Skeleton
- Wireframes
- Website layout
- Flowchart
- Wireframes
- Information Architecture
- Technologies Used
- Languages
- Frameworks
- Tools
- Testing
- Bugs
- Deployment
- Deploying to Heroku
- Locally run the project
- Closing Notes
- Credits
- Disclaimer
- As a user, I would expect the website site to be secure.
- As a user, I would like be able to create my own recipes.
- As a user, I would like be able to view all my recipes easily.
- As a user, I would like be able to Edit recipes.
- As a user, I would like be able to Deleted recipes I no longer want.
- As a user, I would like be able to be able to filter recipes into categories e.g breakfast, lunch and dinner to make it easier to view.
- As a user, I would expect the website to be responsive on different devices.
- As a user, I would expect to able to delete or change my username/password/account if I please.
- Include different categories when searching for a recipe e.g breakfast.
- Website to protect the users information.
- Website to be easy to use and visually appealing.
- Website to easily allow the user to create, edit, read and delete recipes.
The value of this website, is that it allows users to store all their recipes and view them in one place online. User's will no longer have to look up recipes online which can be time-consuming.
The website implements the CRUD functionality. The users who wish to avail of the site will be able to create their own Personal Cookbook, allowing them to create/upload recepies, read through their existing recipes recipes stored on the site, update their recipes and to delete recipes they no longer wish.
Primary Audience - People who want to store their favourite recipes in one place online.
The website is easy to use and stores the user's information in MongoDB. Due to time rectricions I was unable to create a search & category button which would have allowed the customer to look up a recipe or filter their recipes by different categories e.g breakfast, lunch etc.
-
Navbar:
If the user is not logged in the navbar contains a Register & Login link.
If the user is logged in the navbar contains a Recipes, Add Recipes, Logout links. Python will determine is the user is logged in to the site or not by checking if session.username and passes this data to Jinja to display the correct navbar for the user. -
Register Page:
Contains a form where the user enters a Username, Password and Confirm Password field. The Passwords must match and are hashed for security purposes. -
Login Page:
Contains a form for the user to enter their Username & Password allowing them to log into their account, providing their details are corrent.
If the details match the ones in the database, the user is redirected to the home pages and informed with a flash message that they have successfully logged in. -
Recipes Page:
Allows the user to view all their recipes in a card format in a 3 column row. The card will displays the recipe image, meal type, cooking time and two buttons, edit & delete. -
Recipe Page:
Renders when the user clicks on the recipe card. This page will display informaiton about the selected recipe. -
Add Recipes Page:
The user is able to add their recipe through a form which is validated. When the user has added their recipe to the database they are redirected to the Recipe page. -
Edit Recipes Page:
The user is able to update information about a recipe. The form layout is the same as the add recipe page.
The page also contains two buttons, edit and cancel. -
Delete Recipes: Once the user clicks the delete button, which is displayed on the recipes page in the card, the recipe will be deleted from the database and the user will be redirected to the recipes page
-
Logout:
Clicking the logout button will end the user's session and redirect them back to the home page. -
Footer:
Contains links to the developers relevent social media links Github & Linkedin which opens in a new tab.
Typography: Open Sans for the body and Lora for H1 headings. These fonts where choosen from Google Fonts. I initally chose Lora first for the heading and Google Fonts recommended Open Sans as it's complimentary font.
Colours: I decided to use the Bootswatch: Journal template for my site which provided me with a colour template.
Click here to view my Color Palette.
Main Color Palette:
- Fire Opal: #EB6864
- Silver Chalice: #aaaaaa
- Cultured: #F8F9FA
- Heat Wave: #FD7E14
- Green Pantone: #22B24C
Shadows: Radial-gradient(rgba(249, 238, 238, 0.91), rgba(152, 142, 142, 0.04)) - Used for the login/register/add/edit background image.
Icons: I used Font Awesome icons to enhance user experience. The icons are displayed on the all the forms beside the labels..
Images: The images chosen for the website were taking from Unsplash under a 'cooking' search.
- Bootswatch Journal Template.
- Start Bootstrwap for login and register pages.
- MongoDB Atlas - Database
- Flask-WTF - Creating the Add/edit forms.
- Pagination- So only a few recipes will show on on the page and the remainder on the next page etc. At the moment all Recipes are displayed on the same page.
- Change Password/Username- To allow the user to change their details if they wish.
- Recover Password- If the user have forgotton their password will be able to re-set it.
- Filter Recipes- To make it easier to find a certain recipe.
- Search Option- Search a recipe by name.
My Wireframes:
Desktop
Tablet
Mobile
Flowchart
Color Palette
I created my wireframes and Flowchart using MockFlow for various devices.
The edit recipe page will be the same as the add recipe page hence I did not create an official wireframe for this page.
The delete recipie will display a pop up to confirm with the user if they actually want to delete the recipe.
Using NoSql features in MongoDB I was able to map out the following colelctions.
- ObjectID
- String
- Boolean
- Array
- Object
- Binary
Users Collection:
_id: <ObjectId>
name:<string>
password: Binary(string)
Recipe Collection:
_id: <ObjectId>
recipe_name: <string>
description: <string>
prep_time: <string>
cooking_time: <string>
ingredients: <string>
steps: <string>
images: <string>
- GitHub
- GitPod
- Git
- PyMongo
- Flask-Bcrypt
- Flask-WTF
- MongoDB Atlas
- W3C Markup Validation
- WSC CSS Validaion
- MockFlow
- Code Beautify
- PEP8 Validaion
- Python Formatter
Due to the scope of the website, there will need to be a lot of testing required during this project.
-
Plan- I will need to ensure all the links work properly so when the user clicks on one they are brought to the correct page.
-
Implementation- Check that the nav links go to the correct page and the social media links open in a new tab to the correct website.
-
Testing- Use session variables and jinja if/else statements for the navigation so when the user logs in they are displayed with a different navbar.
Use target="_blank" to open the social media links in a new tab. -
Result- Social media links open in a new tab to the correct url. When the user logs into the site the navbar changes to display 'Recipes, Add Recipes, Logout."
-
Plan-I will need to implement a way that a user will be able to create an account and that their information is stored in a database.
This invloves checking that the users passwords match when they create a password and confirm the password.
I will need to research the best way to create this feature that's also easy for the user to create an account and properly hash the password when it's stored into the database. -
Implementation- Import session and bcrypt was required to handle the request. The code checks that the passwords entered match to avoid any typos and then checks if the username entered already exists in the database.
-
Testing - I created a few accounts to check what values are passed and stored in the database and that the passwords match and used bcrypt for password hashing.
To achieve this I followed pretty printed Youtube viedo to create the Registration form. -
Result- This tests passed and the user's username and passwords are stored in the MongoBD database. A flash message will appear if the username already exists and if the user's password do no match a alert appears to advise the user the password do not match.
-
Plan- I will need to create a form for the user to login to their account. I will need to make sure the form is validated correctly.
-
Implementation- To check the information from the form matches the information that is stored in the users collections in the database and if it does not match, a flash message is triggered to let the user know that their password/username is incorrect.
-
Testing- I inputted the wrong informaton to make sure the flash error displays and then created the correct login information and a flash messages displayes to tell the user they have logged in successfully.
-
Result- The test passed and I was able to sign in the account.
-
Plan- There needs to be a signout feature for the user if they wish to logout of their account.
-
Implementation- Create a route and method using session.pop.
-
Testing- Click on the logout button in the navigation and the user should be signed out and returned the to home page.
-
Result- The test passed as the session was cleared out and the user was no longer signed in.
-
Plan- I will need to ensure validation is inputted on the forms, to make sure the recipe cannot be created unless all required fieds are complete. I will also need to ensure the recipe is added to the Mongo Database.
-
Implementation- I will use flask-wtf forms to create the Add recipe form which will also include validation and then create a new route to insert the recipe to the database.
-
Testing- If a field is not complete the user will not be able to submit their recipe and the field will be highlighted. The user is redirected to the 'Recipes' page when the form is complete. The recipe is inerted into the database successfully.
-
Result- Working properly. Recipe stored into the MongoDB under the 'recipes' collection.
-
Plan- I will need to ensure that when the user selects one of their recipes that the correct recipe info is pulled fromt the database.
-
Implementation- I will need to create a new route that fetches the recipe from the MongoDB.
-
Testing- I created a few recipes and using select_recipe which was able to pull the correct info from the database when clicked on a specific recipe.
-
Result- The selected recipe is displaying the proper info.
-
Plan- I will need to ensure the user is able to view all recipes created when they click on the My Recipes nav link and to ensure the edit and delete buttons work too.
-
Implementation- I will need to test that the search bar works, the fitler by category works, that the full recipe displays when the user clicks on a recipe and that the edit and delete buttons work and that the recipe info is pulled from the database and displayed to the website.
-
Testing- I creaded a for/loop in the Recipes html that fetched the recipe card and in the Recipes route added the mongo.db.find to fetch the user's recipes from the database and display then to the site.
-
Result- The user's recipes are displaying on the page correctly.
-
Plan- I will need to ensure that when the edit button is clicked the user will be able to edit their recipe. I will also need to ensure that the informaiton is properly updated and stored in the database.
-
Implementation- This testing will be similar to the create recipe as in to make sure all validation is inputted.
-
Testing- I edited my sample recipes to test that the information is update properly.
-
Result- Works properly and new information is displayed for the user and updated in the database.
-
Plan- I will need to create a delete button so the user is able to delete their recipe.
-
Implementation- Test theses features work and check the database to see if the recipe is removed.
-
Testing- I created the method to delete the recipe from the website and from the database.
-
Result- The selected Recipe is deleted when the delete button is clicked on and also removed from the MongoDB.
Mobile:
Desktop:
I used Chrome DevTools and Responsinator to test the styling, layout and responsiveness.
I also manually tested the app with debugger: debug=True throughout all the development process.
User Testing was carried out throught the process, having friends and family test the website to see if it was responsive on their devices & gathering back feedback for style or bugs.
-
Bug: I wanted to create two cards side-by side on the Single Recipe Page with the second card displaying the Ingredients and Steps in list format.
Fix: Unfortunately due to time restrictions I was unable to solve this bug so I amended the page to display just one card with the recipe details and styled the page with max-width & auto margin to center the recipe on the page. -
Bug: I wanted to display my recipe's side by side using the Bootsrap grid system. I was having trouble achieving as my cards were only displaying ubove each other and could not understand why.
Fix: Took about a week, but discovered if I removed the container & row divs from the recipe cards html the recipes would display properly.
- Open your prefered IDE (I used Gitpod)
- Run MongoDB Atlas on oyur machine (your database)
- Click here to read how to set up your Mongo Atlas.
- In your terminal install Pip, Python3 and Git
Directions:
- Clone this repository into your IDE of your choice by pasting this command into the terminal
git clone https://github.com/SophieH93/myCookbook
Alternatively, you can save a copy of this repository by clicking the green button "Clone or download" , then "Download Zip" button, and after extract the Zip file to your folder.
-
In your terminal change direcrory (cd) to the correct file location or open a terminal session in the unzip folder.
-
Enter the following commannd
python -m .venv venv
- Initilaize the environment by using the following command.
.venv\bin\activate
- Install all requiremetns by putting this command into your terminal:
pip3 install -r requirements.txt
- Set up environment variables:
- Create .env file in the root directory.
- On the top of the file add import os to set the environment variables in the operating system.
- Set the connection to your MongoDB database**(MONGO_URI)** and a SECRET_KEY with the input:
os.environ["SECRET_KEY"] = "YourSecretKey" os.environ["MONGO_URI"] = "YourMongoURI - Run application using flask run or in terminal type
python3 app.py
-
Create a requirements.txt file by adding the following to your terminal.
pip3 freeze > requirements.txt -
Create a Procfile, in order to tell Heroku how to run the project. Procfile must start with a capital 'P':
echo web: python app.py > Procfile -
Push these to your Git repository.
-
Create a new app on Heroku, assign a unique name and set your region (I used Europe)
-
To start the web process, put the following command into the terminal to scale dynos:
heroku ps:scale web=1 -
From the Heroku dashboard, click Deploy -> Deployment method -> GitHub
-
Connect to your Github repository by adding your repo name and clicking the search button.
-
In the heroku dashboard for the application, click on Settings -> Reveal Config Vars and set the following config vars:
- IP: 0.0.0.0
- PORT: 5000
- MONGO_URI: link to your MongoDB database
- SECRET_KEY: your secret key
Note- your MONGO_URI and SECRET_KEY must match the ones you entered in .env.py file
-
Deploy -> Manual Deploy select the master branch and click deploy branch button.
-
Click Open App to view the app.
I was silly enough to commit the env.py file exposing my details for my database. I have deleted that database and created a new secure database.
Pretty Printed Youtube for creating registration/login.
Corey Schafer Youtbe for creating the FlaskWtForm for creating a recipe and how to add insert to the database.
Unsplash Used for Jumbotron and Login page background images
This websit is for educational purposes only.