McTastic Recipes is a Milestone 3 project, it is part of the Fullstack Software Development Course of Code Institute.
Project overview
UX
Technologies Used
Testing
Deployment
Credits
McTastic Recipes is a recipe website. It is designed to be useful for people with different levels of abilities in the kitchen, from complete novice to experienced cook.
It is also designed to be easy to navigate for users of all ages. Users may add not just recipes but also ingredients so that when they add recipes in the future the may easily view the calorie values of their favourite recipes.
- User Story A: As a casual user I would to easily browse recipes.
- User Story B: As a user I would like to create a profile and delete it if I no longer want it.
- User Story C: As a registered user I would like to add, edit, update or delete my own recipes.
- User Story D: As a registered user I would like to view what recipes other users have created.
- User Story E: I would like to be able to view the recipes clearly regardless of the type of device I use.
- User Story F: I would like to be able to easily share recipes.
- User Story G: I would to be able to convert units from metric to imperial and vice versa.
- User Story H: As a registered user I would like to add, edit, update or delete my own ingredients.
- Admin Story A: As the admin I would like to be able to delete any user along with all recipes created by that user.
| Opportunities | Importance | Viability / Feasibility |
|---|---|---|
| Simple Clean UI | 5 | 5 |
| Clearly indicate purpose | 5 | 5 |
| Clear Simple Instructions | 5 | 5 |
| Simple creation of recipes/ingredients | 5 | 5 |
| Simple edit of recipes/ingredients | 5 | 5 |
| Search/filter/sort Feature | 5 | 5 |
| Share Feature | 3 | 5 |
| Unit Conversion | 3 | 5 |
-
Business Goals: The purpose of McTastic Recipes is to provide a platform for users to be able to casually view recipes or register to add and edit their own recipes. Users may store their own recipes so that they essentially have their own online personal cookbook while also being able to view other peoples recipes.
-
Audience: The audience of the site is broad and it cannot be assumed that even the registered users of the site will be technically savvy, it is therefore necessary to make the site easily navigable not just for casual users but also the registered users.
-
Content: The content is determined by the users and presented in a uniform and clear manner.
- To learn and practice frontend and backend programming together for the first time. To combine the use of HTML, CSS, Materialize and JavaScript with Python, MongoDB, Flask and Jinja.
-
What is needed is a site which integrates input from users in a way which is clean, simple and easily navigable. Users must be able to upload photographs as well as provide information such as ingredients, instructions prep time etc...
-
The data on each recipe must be presented in a visually compelling way to encourage interaction with the site with the ultimate goal of casual users deciding to register and add their own recipes.
-
Recipes may be filtered into categories of cooking baking and snacks, as well as being sorted by alphabetical order or order of creation.
-
User profiles allow users to store their recipes and ingredients in a convenient location.
-
In the future a blog or video instructions for recipes may be integrated.
- The site uses a consistent structure, a navbar is at the top of the page which allow a user to navigate the site and login if needed. A burger menu is used for small devices.
- The index page has a search bar, filter and sort feature. If a user performs a search they will be able to sort the search results.
- The content is consistant with text kept to a minimum. Majority of imagery and text is determined by users.
- A footer at the bottom provides copyright information and links to social media pages and a key guide of icon meanings to aid users on mobile devices who do not have the benefit of tooltips.
- The number of clicks needed to reach any page is kept to a minimum. Sections such as user profiles will not be visible to users who are not logged in.
- Buttons/modals/links are consistant in design.
I used Balsamiq and figma to create the wireframes. The layout has altered since I created the wireframes as I decided to replace the contact page with a newsletter sign up in the footer. The parallax felt too distracting and so that has been omitted. Originally there were to be seperate pages for Cooking/Baking/snacks but instead I implemented a feature to filter recipes by category. I used affinity designer to design the logo, I went through many iterations of the design until I was happy with two final logos, one for the navigation bar on the site and the other for the browser tab icon.
- The number is fonts is kept at a minimum as well as using a limited and consistant color scheme.
A standard layout is fully responsive on mobile devices and larger screens.
Colors are kept to a minimum in order to keep focus on the imagery of the recipes, chosen colours are various shades of grey. Color scheme can be found on my Coolors profile: Coolors
2 Google Fonts were used across the site:
- Pattaya : Logo & Headings, used for it's flowing relaxed style.
- Montserrat : Body, used for it's excellent readability.
All images, and recipes are the authors own unless provided by other users. Logos are also produced by the author using Affinity Design.
back to top
-
The navigation bar features a logo and name in the top left corner, both are links to the home page. Navigation links are in the top right. An animation slides the logo, name and navigation links into view on loading but only on the home page in order that it not be too distracting while navigationg the site.
-
For visitors to the site who are not logged in, list items links are available for them to use.
- Login
- Register
- Units
-
For users who are logged in, the list items are as follows:
- Logout
- Add Recipes
- Profile
- Users
- Units
-
Python determines if the user is logged in or not by checking
if 'user' in sessionand passes this data to Jinja to display the correct navbar for the user. -
On the smaller resolutions (tablet, mobile) the navbar is collapsed into a burger icon. A slide out menu opens when the burger icon is clicked.
The footer features: - Newsletter signup: Users may submit an email to request a newsletter. - Key Information - Copyright Information - Links to social media platforms.
(index, search, single_recipe)
- The index page has a search bar, filter and sort feature. The search feature searches for keywords in recipe titles and ingredients. If a user performs a search they will be able to sort the search results.
- The sort feature allows users to sort the results by A-Z, Z-A, latest created and oldest created.
- The filter allows users to display recipes under the categories of cooking, baking, snacks or all.
(index, view_profile)
- Cards are displayed for each recipe. On small devices the cards may be expnded to reveal more information (one card per row on small devices, two cards per row on medium devices).
- On large devices users can hover over cards to reveal more information (3 cards per row).
(units, add_recipe)
- Cards are displayed for each ingredient. On small devices the cards may be expnded to reveal more information (one card per row on small devices, two cards per row on large devices). If logged in a user may add ingredients, if ingredient name does not already exist it will be entered. If a user created the ingredient they may edit or delete it. Admin user may see the creator of any ingredient and may delete any ingredient.
(index, view_profile, users)
- Where there are more than six results navigation links to pages are displayed below the number of results (6 results per page).
(view_profile, single_recipe)
The share button is displayed on the bottom right corner at all times on profile and recipe pages.
- Search/Sort/Filter (The sort and filter functions not available as there is only one recipe)
- Share
- The recipe image and information rows are revealed using animations upon loading. The recipe title is displayed on top with a link to the creator profile below.
- On larger devices the content is displayed in two columns, on the left an image which may be clicked to enlarge if a valid image is provided, if not a blank image with the recipe title is displayed.
- Under the image are icons to summarize key information about the recipe, tooltips give further context on large devices. Alternatively a key guide to the icons is provided in the footer.
- On the right are the ingredients and instructions which may be toggled. Checkboxes allow the user to mark off ingredients and steps as they progress.
- If viewed by the creater a recipe may be edited or deleted. If viewed by the admin a recipe may be deleted.
- This section contains a form where users may login and be redirected to their profile. Below the form is a link to register.
- Clicking 'Logout' ends a user session and redirects them to the 'Login' page.
- This section contains a form where users may register and be redirected to their profile. Below the form is a link to login.
- Customized 404 and 500 pages contain short information about the error and a button "Back Home" placed below a custom logo. As well as that, they display the navbar which allows users to go back easily to any page if they got lost.
- Recipe Cards
- Pagination
- Share
- Below the header is a card displaying the username and number of recipes. Any user can navigate to any other user's profile by clicking the corresponding 'view' button on the 'Users' page.
- If a logged in user wants to quickly navigate to their own page they can click the 'Profile' link in the navigation menu or side nav on smaller devices.
- A logged in user may delete their own profile along with all associated recipes by clicking the 'delete' button in their profile. 'Admin' user may delete any user.
- Ingredient Cards
- This section contains a form where users may provide details for their recipes. Asterisks are used where a field is required. Dropdowns are used for multiple choice fields and switches are used for binary choices. When the user inputs a valid image url a preview image will take the place of a placeholder image.
- Ingredient Cards
- This section contains a form where users may edit details for their recipes. Asterixes are used where a field is required. Dropdowns are used for multiple choice fields and switches are used for binary choices. When the user inputs a valid image url a preview image will take the place of a placeholder image.
- Pagination
- Share
- Cards display Usernames with a link to their profile.
- Ingredient Cards
- Share
- Users can convert units from imperial to metric and vice-versa.
-
Image Hosting
Currently, images are stored by pointing to an external url and pulling the image from there. I plan to eventually add the option to allow the user to upload an image to the server instead as this will make it easier for the user. -
Deleted Recipes When a recipe/user is deleted it is/they are gone forever. Instead, I'd like to have them stored in a deleted items list for review by an admin.
-
Favourites
I'd like to implement a feature to give users an opportunity to "like" other recipes, saving them a "Favourites" collection, which would be displayed on a their own profile. Each recipe card will include a small "heart" icon, clicking which will enable user to add the selected recipe to "my favourits".
back to top
- HTML - Used throughout the site
- CSS (Cascading Style Sheets) - Used throughout the site
- JavaScript - Used for animtions and functions such as unit conversion.
- Materialize - Used to aid responsive design and for componants such as modals and functions such as mediabox
- Gitpod - Code Editor used to create the site.
- GitHub - Used to host repos for the site.
- Imgur - Used to host images for the site.
- Screen Recorder - Used to make GIFs for README.
- Chrome/Firefox/Bing DevTools - Regularly used to test the site (Primarily Chrome).
- W3C Markup Validation Service - Used to test code for errors.
- Affinity Designer - Illustration software used to create logos and icons.
- Figma - Collaborative interface design tool used for creating wireframes as well logos and SVGs.
- Balsamiq - Used to create wireframes.
- Tinypng - Used to compress images.
- Croppola - Used to crop images.
- Randomkeygen - Used to generate random keys.
- Kaffeine - Used to keep Heroku app from falling asleep.
- Uptime Robot - Used to keep Heroku app from falling.
-
Materialize - is a framework for building responsive, mobile-first websites. I used materialize to create grid layouts, navbar, cards, forms, buttons and modals as well as features such as collapsibles, materialbox, tooltips and tabs.
-
JQuery - is a Javascirpt library. I primarily used JQuery to add and remove classes on hover states as well as run various Materialize functions.
-
Flask - is a lightweight WSGI web application framework. I primarily used it to construct and render pages.
-
Jinja - is a templating language for Python. I primarily used it to display data from the backend in HTML.
-
PyMongo - is the recommended way to work with MongoDB from Python, used to make communication between Python and MongoDB.
-
dnspython - is a DNS toolkit for Python.
-
Git - used for version control
-
Branches were used to experimaent with pagination.
back to top
- HTML5 Semantics used throughout (header, nav, main etc...)
- Titles used throughout (McTastic Recipes, McTastic Profiles etc...)
- Language is set to english (
<html lang="en">)
- Aria labels used throughout eg
<button id="submit" aria-label="submit" type="submit"> - Alt Text: Alt text dynamically applied to images eg
alt="{{recipe.recipe_name}} image"
- All pages have been checked for contrast issues using Lighthouse and contrast adjusted as necessary throughout.
- All clickable elements are focusable with classes such as
.focus-outline,.focus-backgroundetc... added instyle.cssin order to make the site smoothly navigable without the use of a mouse.
All testing and validation is contained within a separate .md file.
View TESTING.md
back to top
- This repository may be cloned directly into an editor by pasting the following command into the terminal:
git clone https://github.com/Sean-Mc-Mahon/McTasticRecipes
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 the terminal window change directory (CD) to the correct file location (directory that you have just created).
- Set up environment variables:
- Create .env file in the root directory.
- On the top of the file add
import osto set the environment variables in the operating system. - Set the connection to your MongoDB database(MONGO_URI) and a SECRET_KEY with the following syntax:
os.environ["SECRET_KEY"] = "YourSecretKey"
os.environ["MONGO_URI"] = "YourMongoURI"
.
- Install all requirements from the requirements.txt file putting this command into your terminal:
pip3 install -r requirements.txt
Note: GitPod does not requiresudo, so if you use another IDE, you will need to includesudoin the beginning of the command:sudo pip3 install -r requirements.txt. - Create a new Database called "recipe_manager" in MongoDB Atlas.
You can sign up for free account, if you do not have one. - In "recipe_manager" database create eight following collections:
_id: <ObjectId>
category_name: <String>
_id: <ObjectId>
group_name: <String>
_id: <ObjectId>
ingredient_name: <String>
ingredient_cal: <String>
group_name: <String>
unit_name: <String>
created_by: <String>
_id: <ObjectId>
prep: <String>
_id: <ObjectId>
category_name: <String>
recipe_name: <String>
recipe_ingredients: <String>
recipe_instructions: <String>
recipe_image: <String>
recipe_serves: <String>
recipe_time: <String>
recipe_cals: <String>
recipe_description: <Array>
recipe_is_vegan: <Array>
recipe_is_vegetarian: <ObjectId>
created_by: <String>
_id: <ObjectId>
parameter_name: <String>
_id: <ObjectId>
unit_name: <String>
_id: <ObjectId>
username: <String>
password: <String>
- You will now be able to run the application using the following command
python3 run.py.
To deploy the project to Heroku the following steps need to be completed:
-
Create a requirement.txt file, which contains a list of the dependencies, using the following command in the terminal:
pip3 freeze > requirements.txt -
Create a Procfile, in order to tell Heroku how to run the project, using the following command in the terminal:
echo web: python run.py > Procfile -
git add,git commitandgit pushthese files to GitHub repository -
Create a new app in Heroku, assigning a name (must be unique) and set a region (for my project I set Europe)
-
From the Heroku dashboard link the new Heroku app to your GitHub repository:
- "Deploy" -> "Deployment method" -> "GitHub"
- then "Enable automatic deployment"
-
To start the web process, put the following command into the terminal:
heroku ps:scale web=1to scale dynos -
In the Settings tab of the new Heroku app, click on "Reveal Config Vars" and set the following config vars:
- IP : 0.0.0.0
- PORT : 8080
- MONGO_URI :
<link to your MongoDB database> - SECRET_KEY :
<your secret key> - DEBUG: FALSE
Note: your MONGO_URI and SECRET_KEY must match the ones you entered in .env.py file
-
The app will be deployed and ready to run. Click "Open App" to view the app.
Note: if you have not linked GitHub and Heroku following step 5, alternatively as the last step of deployment, you can put the following command into your terminal:
heroku login, after a successful log in git push heroku master - to push the app to Heroku, and finally click "Open App" in Heroku dashboard to view the app.
back to top
-
Google Fonts for font styles; https://fonts.google.com/
-
Youtube; Various resources for Materialize taken from The Net Ninja
-
Youtube; Code for temperature conversion modified from Whatsdev
-
Codepen; Code for perfect squares taken from Tyler_Potts
-
Github; Code for pagination modified from irinatu17
-
Github; Code for url validation and placehoder image modified from Paulloy
-
Github; Format of README modified from Mr-Smyth and irinatu17
-
Icons sourced from Iconmonstr
-
Button icons sourced from Fontawesome
back to top
-
My mentor Adegbenga Adeye for his support and input.
-
My peers on slack for their generosity in sharing their knowledge and experience.
This project is for educational use only