This interactive site is based around individuals who would like a place to keep their recipes all in one place as well as share it with the rest of the world. Being able to create new recipes, edit and delete recipes on demand from the computers to their mobile phones. They would have the chance to write down the ingredients needed and the steps required to make the specific dish. If any issues arise, they would have the chance to reach out to the site administrator by sending them an email.
This site would be utilizing Python which was taught from the Code Institute as well as using MongoDB. I will be using various technologies as well such as HTML5, CSS3, JQuery and Materialize. This project will be responsive and accessible to different size browsers and devices.
The intended audience for this project is all individuals, from students who are about to leave home for the first time to go to universities and want to write down Mums cooking, all way to individuals who like to experiment in the kitchen but need a place to remember what they have done.
To have a place to store customised recipes and for them to be accessed anywhere from any device. The user would be able to register to begin the journey of adding a recipe to their account. From there, they would be able to log in and create their recipe. They would be able to add the ingredients and steps taken to make their dish once saved. The user would have the option to edit, delete and even share their recipes because by default all recipes would be set to private.
The user would be able to edit their recipes and if they are logged into their account. Users who do not have an account but can see shared recipes, will not be able to edit or amend recipes. If the user is trying to look for something, there would be search functionality for them to be able to search by ingredient or by the name of the dish. Once all is achieved, the user can log out. If the user is trying to look for something, there would be search functionality for them to be able to search by ingredient or by the name of the dish. Once all is achieved, the user can log out.
My objectives are going to be achieved by taking images from free image stock websites that would have images of recipes, meals and kitchen crockery that I want to advertise. The recipes and ingredients would be taken from other websites to use as the data being pulled from the database. The users would be able to contact the site admin if they have any queries or questions as it would incorporate a contact form that would be linked to a live email address. The site would have a registration form and a login/logout functionality to allow users to have their profiles. It would also have validation included with error messages if the username or password is wrong.
The site would have a CRUD software architectural style (Create, Read, Update and Delete) for basic operations of persistent storage with the recipes being added by the users. Validation would also be in this part of the site as only the recipe owner would be able to edit and share the specific recipe.
The navigation bar and footer would be built within the base file and the content for the rest of the site would be built within their specific .html files. Within the footer, there would be social media links that would connect the user to the sites alternative social platforms.
The intended type of users for which this site would be focused towards are individuals who would like to store their homemade recipes online
- As a user, I want to be able to register to the website so I can have my own profile.
- As a user, I want an error message to appear if I typed my username/password incorrectly so I can attempt again with the correct username/password.
- As a registered user, I want to be able to edit my username and/or password so I can update my profile.
- As a registered user, I want to be able to create and save a recipe so I view it whenever I want.
- As a user, I want to be able to edit my recipes so I can amend them if I made a mistake.
- As a registered user, I want to be able to share my recipe so I can allow other non registered users to see my meal
- As a registered user, I want to be able to delete a saved recipe so I can remove it from the list of saved recipes.
- As a user, I want to be able to tell the difference between which recipes have been created by me vs recipes created by other users so I can know which ones I have shared.
- As a user, I want to be to send an email to the site admin so I can contact them if I have any issues.
- As a user, I want to be able to log out from the website so I can go on other websites.
- As a user, I want to see an error page if I enter the wrong extension page within the URL so I know I am in the wrong location.
-
- The colour scheme I will be working with is mainly white but with a touch of off-white/yellow colour to portray cooking and the light of food. The text colour will be black to keep the text easy to read (Will be using WebAIM to check the contrast of the colour scheme).
-
- I have chosen to use Merriweather and Heebo font as the main fonts throughout the website with Sans Serif as the emergency font in the case for any reason the font is not being imported into the site correctly. Both Merriweather and Heebo are attractive fonts to use as it easy to clear and easy to read, they are also has a touch formality without being formal.
-
- The images that were used are based on the content of what it is portraying. Displaying ingredients, finished meals and kitchen crockery without diverting them for the task they need to complete.
-
- Home Page Wireframe (Web Browser) - View PDF
- Home Page Wireframe (Tablet) - View PDF
- Home Page Wireframe (Mobile) - View PDF
I altered my design because representing the recipes looked better in cards than have accordian drop downs.
- Login Page Wireframe (Web Browser) - View PDF
- Login Page Wireframe (Tablet) - View PDF
- Login Page Wireframe (Mobile) - View PDF
- Registration Page Wireframe (Web Browser) - View PDF
- Registration Page Wireframe (Tablet) - View PDF
- Registration Page Wireframe (Mobile) - View PDF
- Contact Us Page Wireframe (Web Browser) - View PDF
- Contact Us Page Wireframe (Tablet) - View PDF
- Contact Us Page Wireframe (Mobile) - View PDF
- My Recipe Page Wireframe (Web Browser) - View PDF
- My Recipe Page Wireframe (Tablet) - View PDF
- My Recipe Page Wireframe (Mobile) - View PDF
I altered my design because representing the recipes looked better in cards than have accordian drop downs.
- Add New Recipe Page Wireframe (Web Browser) - View PDF
- Add New Recipe Page Wireframe (Tablet) - View PDF
- Add New Recipe Page Wireframe (Mobile) - View PDF
- Edit Recipe Page Wireframe (Web Browser) - View PDF
- Edit Recipe Page Wireframe (Tablet) - View PDF
- Edit Recipe Page Wireframe (Mobile) - View PDF
- View Recipe Page Wireframe (Web Browser) - View PDF
- View Recipe Page Wireframe (Tablet) - View PDF
- View Recipe Page Wireframe (Mobile) - View PDF
- Profile Page Wireframe (Web Browser) - View PDF
- Profile Page Wireframe (Tablet) - View PDF
- Profile Page Wireframe (Mobile) - View PDF
- Change Username Page Wireframe (Web Browser) - View PDF
- Change Username Page Wireframe (Tablet) - View PDF
- Change Username Page Wireframe (Mobile) - View PDF
- Change Password Page Wireframe (Web Browser) - View PDF
- Change Password Page Wireframe (Tablet) - View PDF
- Change Password Page Wireframe (Mobile) - View PDF
- Manage Meal Page Wireframe (Web Browser) - View PDF
- Manage Meal Page Wireframe (Tablet) - View PDF
- Manage Meal Page Wireframe (Mobile) - View PDF
- Add Meal Page Wireframe (Web Browser) - View PDF
- Add Meal Page Wireframe (Tablet) - View PDF
- Add Meal Page Wireframe (Mobile) - View PDF
- Edit Meal Page Wireframe (Web Browser) - View PDF
- Edit Meal Page Wireframe (Tablet) - View PDF
- Edit Meal Page Wireframe (Mobile) - View PDF
- Error 404 Page Wireframe (Web Browser) - View PDF
- Error 404 Page Wireframe (Tablet) - View PDF
- Error 404 Page Wireframe (Mobile) - View PDF
- Error 500 Page Wireframe (Web Browser) - View PDF
- Error 500 Page Wireframe (Tablet) - View PDF
- Error 500 Page Wireframe (Mobile) - View PDF
- Master Wireframe - View
The database was designed using an online tool called DB Diagram. The tables where mapped depending on the field requirements.
Database Design - Mapping
The features that will be utilised in this project will be as follows:
- Responsive on devices sized 1024px, 768px, 425px, 375px and 320px.
- Allows the user to know the navigated hyperlinks, by having a hoover over feature within the hyperlinks.
- Navigation bar and footer pulled from the base file throughout all pages.
- Different navigation bar option depend on the type of user accesses the site.
- Shared recipes to be displayed at the bottom of the page.
- Only the registered owner of a recipe would be able to edit/delete a shared recipe.
- Use to be added to the database when the user is registered.
- If passwords don't match within the registration page, an error message would appear.
- If the username or password don't match on the login page, an error message would and the user would not be able to log in.
- Once logged in, be directed to the the user recipe page.
- Once username or password has been changed, to be logged out and to log back in.
- When the password doesn't match on the change password page, the user would be unable to change the password.
- Search functionality to be able to search by the name of the recipe and/or by an ingredient.
- Reset button which resets the search and displays all recipes the user has created.
- If the recipe is labelled as Vegiterian, a V image would appear by the recipe name.
- User has the option to delete or edit the a recipe when selected.
- Page will display up to 6 recipes before a new page is created (Pagination)
- To recall the information related to that specific recipe.
- Only admin user would be able to have the option to create, edit and delete a meal type.
- A popup modal which would appear in the middle of the page.
- A confirmation alert box appears in the top of the screen when the message has successfully sent.
- If the page does not exist, a 404 error page would appear.
- The error 500 page will load when there is an internal server error.
- A confirm delete modal when the user deletes a recipe.
- For the admin user to be able to edit and delete recipes created by all users.
- When a user registers, an email verification to be sent to the user.
- To give the option for the user to click on forgotten password and an email to be sent them to be able to reset it for them.
- Specific filters on the 'My Recipe Page' so they can view just their favourite recipes, or if they want to have a drop-down to select their cuisine they want to see etc.
- A profile page where the user can view and edit any and all personal information.
- HTML5
- HTML5 was used to structure and present content on my website.
- CSS3
- CSS3 was used to provide my website with style.
- JavaScript
- JavaScript was used to make the site interactive.
- Python
- Python was used as the backend language to access and parse data.
- DB Diagram
- Online tool to design the database.
- Mongodb:
- Database which stores the data to be recalled onto the website.
- Materialize 1.0.0:
- Responsive front-end framework to assist with the responsiveness and styling of the website.
- JQuery Core 3.6.0:
- JQuery library was implemented to use features within Materialize
- EmailJS
- Using emailJS service to send emails from the contact modal
- Google Fonts:
- Google fonts were used to import the font into the style.css file which is used on all pages throughout the project.
- Font Awesome 5.13.3:
- Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.
- Hover 5.15.3
- Hover effects used for the animation on hovering over links and buttons.
- Grammerly:
- Online tool which assists with the English grammar.
- GitHub:
- GitHub is used to store the code of the project after being pushed from GitPod.
- GitPod:
- A cloud development environment that allows us to create the website.
- Visual Studio Code
- Code editing software was used to replace GitPod as the free license expired due to over 50 hours useage.
- GitHub Desktop:
- A tool that allows you to interact with GitHub from the desktop
- Google Chrome:
- Default browser used to visually display the build process as well as utilising Chrome Dev Tools to assist where needed.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
- RandomKeygen:
- A tool to randomly generate a password.
- Heroku:
- A platform as a service (PaaS) that enables me to deploy my website in the cloud.
- Github Code Institute Template:
- A template provided by the Code Institute which has the preinstalled tools that will get us started.
Testing was taken place during my build of the site. I was utilising Visual Studio Code 'Live Preview' to visually see what my website looks like with every change that is made. I was also utilising Chrome Dev Tools to assist with changes when code was not working as planned. Within Chrome Dev Tools, I was also utilising the responsive views to see the development for the responsive sizes. To test the JS that I was using, I would be using Chrome Dev Tools and choosing Console to make sure everything was running smoothly.
In this section, I would be testing the User Stories taken from the User Experience Section (UX), testing the functionality and usability, testing the responsive views as well as browser testing
HTML - W3C Markup Validator
- Validating all the HTML files, the only standard HTML error I received that I did not add the "alt" attribute to the img element.
- On all HTML files, errors for the syntax is still there. Problem is that it doesn't read the Jinja2 library.
- To resolve a majority of the errors, i stripped the base file and added the other files in between the code which effectly resolved more of the common errors.
CSS - W3C CSS Validator - Results
- To ensure my code is W3C Compliant for the CSS
- Document was all pass once I fixed 2 classes either they were blank and had no styles associated with them and I put the wrong properties in the wrong class.
- Helps to detect errors and potential problems in your JavaScript code.
- Everthing was passwed apart from one warning sign which is as expected as JSHint is using an old version of ES
Python - PEP8 Online - Results
- Only needing to fix the line too long error, the python file passed without any further issues.
User Stories Testing from User Experience (UX) Section - View Results
When carrying out the User Stories Testing, I placed my self as the user being provided instructions on how to achieve the goals that were identified. The intended type of users which this website is targeted for are individuals who looking for and/or looking to store recipes. I displayed screenshots with the results of each finding to provide evidence of the stories being achieved successfully.
Functionality and Usability Testing - View Results
Testing all my functions and features within the site and ensuring that it is usable across different browsers and devices. I laid the results out in a table with each section defining the feature/function, a description of what I am testing as well as if it passes or fails.
All tests which have been mentioned in the link above has been tested on the following browsers: Chrome, Edge and Firefox. All features and functions worked as expected, including the addition of UX designs (excpet for the known issues mentioned below). The site was also tested on different size devices which consisted of a laptop 13 inch, a tablet as well as a mobile phone.
- The space between the carousel and the header is to big when changing the device size.
- The alignement of the cards vs the hearder not perfectly in middle, where as even the buttons within the cards are not perfect aligned in the middle.
The project was deployed to Heroku and connected to GitHub pages using the following method:
- To direct Heroku which application and dependencies are required to run the app being developed,
create a requirements file.
- In the terminal, enter "pip3 freeze --local > requirements.txt"
- Install the Procfile file as that what Heroku looks for to know which files run the app and how to.
- In the terminal, enter echo web: python app.py>Procfile
- Note: In the Procfile, there could be a blank line automatically created, go into the file, remove the blank line and save it again.
- In Heroku Dashboard, click on 'New', then click on 'Create new app'.
- Providing it with a unique name and changing the region to 'Europe' (or whatever region you are in). Then click on 'Create app'.
- In 'Deployment method' click on 'GitHub', Ensuring your GitHub username is visible, either search for your repository or type in exactly how your repository is spelt in GitHub. When it finds your Repository, it will be visible and you would click on 'Connect'
- Scroll to the top of the page and click on 'Settings'.
- Scroll down till you are in 'Config Vars' section and since we hide the environment variables. It would need to be added into Heroku manually. You would need to add the following: IP, PORT, SECRET_KEY, MONGO_URI and MONGO_DBNAME, ensuring you putting the same values as you did in the env.py file
- Going back to the terminal within GitPod. Commit and push the files that were created.
- Once successfully pushed into GitHub, go back to Heroku and click on 'Enable Automatic Deployment' and then 'Deploy Branch'.
- Once completed, a 'View' button would appear meaning the app has been deployed and successfully connected to Github.
- As Heroku is now connected to Github, for the remaining for project, upload your files into GitHub and it would automatically sync with Heroku.
I had to get the SSH key from the repository which allowed me to clone the repository to my local hard drive. The method which I used to clone the project was via the terminal as well as Github Desktop. I was able to connect my Github repository and clone my files through this method.
- Open your IDE and open up the Terminal
- Inside your terminal type
git clone git@github.com:adnanmuhtadi/milestone-project-3.git- This would clone what is in github to your computer and so now modification to the files can happen on your local machine
- Inside your terminal type
git status- To see what changes have been made
- Type
git -a- To add all the files that you have worked on to the stage
- Type
git commit -m "add notes here"- To add a message to files you are about to push to the servers
- Type
git push- To upload to the remote repository
- Open the repository that needs to be cloned.
- On the top-right side of the page, above the files, you will see a button 'Code' with an arrow point down.
- Once clicked, a drop-down would appear which would give me the option 'Open with GitHub Desktop' (as I had already pre-installed GitHub Desktop previously).
- Once clicked, it would automatically open the application and request where for it to be saved.
- Create a new file in the dictory called 'env.py'
- In the terminal type in
git touch env.py
- In the terminal type in
- Inside the env.py file you will need to add the following:
# Python env code to set all defaults
import os
os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "yourkeyhere")
os.environ.setdefault("MONGO_URI", "yourmongouriaddress")
os.environ.setdefault("MONGO_DBNAME", "yourdatabasename")
- Need to install the project requirements from the requirements.txt file.
- In the terminal type in
pip3 install -r requirements.txt
- In the terminal type in
- log into MongoDB to create your database and the tables
- Mapping of database available Here
- Within the app.py file, scroll to the bottom of the page and change the code from
# This tells the application where and how to run.
if __name__ == "__main__":
app.run(host=os.environ.get("IP"),
port=int(os.environ.get("PORT")),
debug=False)
To
# This tells the application where and how to run.
if __name__ == "__main__":
app.run(host=os.environ.get("IP"),
port=int(os.environ.get("PORT")),
debug=True)
- In the terminal, type in
python3 app.pyto run the application.
The content which i have used for most of my recipes are from the gym that i got to Any Time Fitness Connect
Utilising the code that was used taught from the Code Instute Lessons consisted of (HTML5, CCS3, JavaScript and Python), i also utilised other sources which assisted me in the developing the specific areas.
- Hoover Effects
- Effects when hovering over buttons
- Back button functionality
- Contact Modal
- Using emailJS service to send emails from the contact form
- Code Acadamy - Mini Project (Task Manager)
- Snippets of the code were taken from the mini-project (Task Manager) provided by Code Institue throughout the site.
- Error Handling
- Code within the app.py file to see the function.
- @Set
- Link attached, used @set to update the one field and value in the update username and password
The main source for the images i have used is from Unsplash as they provide free useable images:
Carousel:
-
- Used from Materialize to set colour scheme across the site.
-
- Used to identify if a recipe is vegetarian or not.
-
- The header image for the readme file which shows the homepage of the site in different screen sizes.
I want to thank my mentor Aaron Sinnott who guided me in the right direction and for his support. This project has allowed me to experience the powers of Python, MongoDB and much more. It has enabled the developer/me to code in a much easier and kicker way without duplicating efforts.
I also want to thank the Code Institure tutorials especially the Task Manager project for helping me to build and achieve this project. The project was developed around a personal problem of mine and that was a method in storing recipes that my mum would give me. This also became a problem for my sister which enhanced the concept of the site. We needed a way to store and edit, share and delete recipes.