Third Milestone Project: Data Centric Development - Code Institute
My Happy Cooking Webpage is an interactive webpage, which main purpose is to explore the world through a variety of recipes and to be able to allow the user to discover their passion about cooking. In addition it allows the user to manipulate the data and the recipes, by either crreating, reading, updating and deleting the recipes(CRUD).
My main purpose when creating the webpage was to ensure that it covers a wide range of recipes from all over the world that can be easily accessed and manipulated.
- As a user of the webpage I want to be able to view all the recipes that the owner of the webpage has provided by clicking a button in the home page.
- As a user I want to specify my search criteria and be able to get results for recipes that fit for vegans and vegeterians.
- As a user of the webpage I want to specify my search criteria and be able to get results for recipes from particular countries.
- As a user of the webpage I want to be able to search for specific recipes by category.(Appetisers, Starters, Main Courses, Desserts).
- As a user of the webpage I want to be able to insert my own recipes and save them to the webpage.
- As a user of the webpage I want to be able to edit the recipes that exist in the webpage by clicking a button and be able to save the updated recipes.
- As a user of the webpage I want to be able to delete the recipes that I do not like.
- As a user of the webpage I want to be able to see all the different categories of the recipes.
- As a user of the webpage I would also like to be able to create, read, update and delete the categories of the recipes.
- As a user of the webpage I want the webpage to have an easy access navigation bar that is clear for the purpose of each section.
- As a user I want to access the webpage from all differend types of divices (MObile Phones, Desktops,Laptops, Tablets, etc.)
- As a user of the webpage I want to be able to insert an image in when inserting or updating a recipe.
- Happy Cooking is a webpage that allows the user to have an easy access and by clicking the "Happy Cooking" logo to always redirect to the home page.
- In the home page there are the recipes together with 3 buttons(View, Edit, Delete) where the user can manipulate the recipes.
- In the home page there are also 3 input fields together with a search button to be able to make the user specify the search by suitability(For Vegans or Vegeterians), country(Italy, Greece, Mexico, Thailand) and catecory(Appetisers, Starters, Main Courses, Desserts).
- There is also a navigation bar, created with Materialise with 3 sections on the right top corner (Our Recipes, Add your Recipe, Categories):
- By clicking "Our Recipes" logo it will always redirect you to the home page where all the recipes are stored.
- By clicking "Add Your Recipe" logo it will redirect you to the page where you can add your recipe.
- By clicking "Categories" logo it will redirect you to the page where all the categories are stored and there you can add, edit and delete a category.
- The webpage is also using a slide-out side-navigation bar in order to make it more easy to access by mobile phone Materialise.
In the future i would like to add some links to social media and a registration form for new users.
- HTML Used for storing all my pages.
- CSS Used for the styling of my webpage.
- Javascript Used for initialising my buttons and some functions for my recipes.
- Materialise Used for styling of the webpage
- Material-Icons used for styling my input elements.
- Jquery Used for manipulating the dom and add the elements to my project.
- Flask 1.1.1 A library used for the construction of the webpage
- Python 3.6.8 This is the back-end programming language
- MongoDB Atlas To store all the data and collections of my webpage
- PyMongo 3.8.0 MongoDB's API to interact with the data.
- Jinja Used for displaying elements from back-end to front0end.
- Git Used for writting commands and inserting new documents in my webpage
- Github Used to store my webpage for the users to have access to that and for my tutors and mentor to help me with my Milestone Project
- Heroku Used for the deployment of my project.
- For the potencial users of my webpage that want to be able to see the recipes by clicking a button I have created a view button from Materialise and is triggered in my view_recipe.html with jinja.
Add Recipe Functionality:
| Functionality | Expected Outcome | Actual Outcome | Pass/Fail |
|---|---|---|---|
| Clicking on Add recipe button without filling all the forms | Displays Validation to tell the user to enter all the forms | As Expected | Pass |
| Clicking Add Recipe button after filling all the forms | Redirect to the home page and the recipe is added | As expected | Pass |
| Click on View Button to the recipe that you added | All the information of the recipe display fine | As expected | Pass |
Edit Recipe Functionality:
| Functionality | Expected Outcome | Actual Outcome | Pass/Fail |
|---|---|---|---|
| Clicking on Edit recipe button without filling all the forms | Displays Validation to tell the user to enter all the forms | As Expected | Pass |
| Clicking Edit Recipe button after changing some of the forms | Redirect to the home page and the recipe is edited | As expected | Pass |
| Click on View Button to the recipe that you added | All the information of the recipe display fine | As expected | Pass |
Delete Recipe Functionality:
| Functionality | Expected Outcome | Actual Outcome | Pass/Fail |
|---|---|---|---|
| Clicking on Delete recipe button | Removes the recipe and redirects to the home page | As Expected | Pass |
Categories CRUD Functionality:
| Functionality | Expected Outcome | Actual Outcome | Pass/Fail |
|---|---|---|---|
| Clicking on Add Category button without filling all the forms | Displays Validation to tell the user to enter all the forms | As Expected | Pass |
| Clicking Add Category button after filling all the forms | Redirect to the categories page and the category is added | As expected | Pass |
| Click on Edit Category button to a category and press the edit button without filling the forms | Displays Validation to tell the user to enter all the forms | As expected | Pass |
| Clicking Edit Recipe button after changing some of the forms | Redirect to the categories page and the category is edited | As expected | Pass |
| Clicking Delete Category button | Removes the category and redirects to the categories page | As expected | Pass |
Filter Functionality:
| Functionality | Expected Outcome | Actual Outcome | Pass/Fail |
|---|---|---|---|
| Clicking on filter button when choosing vegeterian in suitability | Displays all the recipes that fit for vegeterians | As Expected | Pass |
| Clicking on filter button when choosing vegan in suitability | Displays all the recipes that fit for vegans | As Expected | Pass |
| Clicking on filter button when choosing Mexico in country | Displays all the recipes that originated form Mexico | As Expected | Pass |
| Clicking on filter button when choosing Thai in country | Displays all the recipes that originated from Thailand | As Expected | Pass |
| Clicking on filter button when choosing Greece in country | Displays all the recipes that originated from Greece | As Expected | Pass |
| Clicking on filter button when choosing Italy in country | Displays all the recipes that originated from Italy | As Expected | Pass |
| Clicking on filter button when choosing a specific Category in category | Displays all the recipes that refer to this specific category | As Expected | Pass |
| Clicking on filter button when applying multiple filters | Displays all the recipes that fit to the category,country of origin and suitability that are selected | As Expected | Pass |
Styling of the Webpage:
| Functionality | Expected Outcome | Actual Outcome | Pass/Fail |
|---|---|---|---|
| Right click on the webpage and press inspect | The webpage displays fine in all types of devices | As Expected | Pass |
-
The Navigation Bar that the webpage is using is tested for all the types of devices and is working properly.
-
The site is tested in a variety of devices such as:Iphones(4 to 10),Samsung Galaxy,Ipads and Desktops.In addition it's tested to all the possible browsers:Chrome, Safari, Internet Explorer, FireFox and i assure that it is compatible and responsive.
The biggest problem I faced when creating this website was how to identify and implement the search functionality, which at the end it was a very interesting feature.
My webpage is hosted in Github and deployed directly from the master branch. The whole project can be viewed here:
In addition my project is deployed in Heroku and the live link can be viewed here:
The website consists of:
- A static folder with a css folder,which has a style.css file and a wireframes folder with 2 wireframe images.
- A templates folder with 9 html pages.
- An app.py file where all the backend is stored.
- A procfile for the deployment in Heroku.
- A requirements.txt file
- The README.md file of the webpage.
The content in the whole project is written by me.
All the wireframes of the webpage are created by me.
I recieved inspiration from sites such as: