The main purpose of this project is to create a full-stack website where the community can share and search dessert recipes in an easy to navigate and clean looking website, using HTML, CSS, JavaScript, Python, Flask and MongoDB. This website is my third milestone project for the diploma in software development from the code institute. A live view of this website can be found here: The Sweet Project.

• UX
  • User Stories
  • Wireframes
• Features
  • Existing Features
  • Features to be Implemented in the Future
• Technologies Used
  • Languages Used
  • Frameworks and Libraries Used
• Testing
  • Code Validators
  • Responsiveness of the website
  • Functionality of the website
  • Browser compatibility
  • Testing User Stories
  • Bugs
• Deployment
  • Requirements for Deployments
  • Initial Deployment
  • How to Fork the project
  • How to Clone the project
• Credits
  • Content
  • Acknowledgements

• As a regular user, I want a website responsive and good looking on all devices;
• As a regular user, I want a website easy to navigate;
• As a regular user, I want to see and get inspired by dessert recipes;
• As a regular user, I want to be able to search recipes;
• As a regular user, I want to see all the recipes in each category;
• As a registered user, I want to have all the functionalities of a regular user and some extra functionalities;
• As a registered user, I want to add new recipes;
• As a registered user, I want to be able to edit my recipes;
• As a registered user, I want to be able to delete my recipes;
• As a registered user, I want to quickly see all my recipes;
• As an Admin user, I want to have all the functionalities of a registered user and some extra functionalities;
• As an Admin member, I want to be able to edit any recipes;
• As an Admin member, I want to be able to delete any recipes;
• As an Admin member, I want to check what categories are available;
• As an Admin member, I want to be able to add a category;
• As an Admin member, I want to be able to delete a category;

It was used Balsamiq to create the following wireframes:

The users of this website can be divided into 3 categories: Unregistered user, Registered user and Admin. All pages of this website share the same footer, this footer allows the user to go to the social media pages of this brand.

The Unregistered users can see and search all the recipes and can filter the recipes by category. On the unregistered users' header there are 4 options:

• return home and see all the recipes;
• filter the recipes by categories and see all the recipes for each category;
• log in, if the unregistered user has an account and want to enter the account;
• register, if the unregistered user wants to create an account and become a registered user.

The registered users can see and search all the recipes and can filter the recipes by category. Registered users can add new recipes. Registered users can edit and delete the recipes added by them. On the registered users' header there are 5 options:

• return home and see all the recipes;
• filter the recipes by categories and see all the recipes for each category;
• go to the user's page, to see all the recipes added by the user;
• add new recipes;
• log out.

The Admin users can see and search all the recipes and can filter the recipes by category. Admin users can add new recipes. Admin users can edit and delete all the recipes. Admin users can add new categories and delete categories. The admin users' header is similar to the registered users' header but has an extra option to manage categories.

The Home page has a section with a search bar, where the user can search for a recipe. Below the search bar, there are up to 8 cards with recipes. The Home page is paginated and there is a limit of 8 cards per page. Each card has the option of opening the recipe page. If the user is an admin user, or if the recipe was added by the logged user, there are 2 additional options: edit or delete the recipe.

The My_recipes page shows cards with the recipes added by the user. Each card has three options:

• View recipe;
• Delete Recipe;
• Edit Recipe. The my_recipes page is paginated and there is a limit of 8 cards per page.

The Recipe page has:

• the recipe name;
• a recipe picture (if a picture wasn't added when the recipe was added a generic picture will be shown);
• A list with the recipe categories. The displayed categories have a link to all the recipes with the same category;
• A recipe description;
• The recipe ingredients;
• The recipe method;
• If the recipe was added by the user there will be 2 buttons on the bottom that allow the user to edit or delete the recipe.

The Add Recipe page has a form where the user can add:

• Recipe's name;
• Recipe's description;
• Recipe's Categories;
• Recipe's Ingredients;
• Recipe's Method;
• Recipe image's URL. At the bottom of the page, there is a button to add the recipe to the database.

The Edit Recipe page has the same form as in the edit recipe, but the form is pre-filled with the information to be edited. At the bottom of the page there are two buttons:

• one edit button that will save the changes, edit the recipe and return to the user's my_recipe page;
• one cancel button that will return the user to the home page without saving the changes.

The Register and the Log In page have a similar format, with a place to insert the username and a place to insert the password.

It was used defensive programming on the delete function (both delete recipe and delete category). A category or a recipe can't be deleted with just one click, the user needs to confirm that he wants to delete the item, to avoid unintentional actions from the user.

• Add a favourite recipes page to allow the users to favourite some recipes and see all the recipes on one page.
• Associate this page to a brand of kitchenware.

• HTML5
  • The programming language used to provide content and structure.
• CSS3
  • The programming language used to format the styling.
• JavaScript
  • The programming language used to make the web page interactive.
• Python (including Jinja)
  • The programming language used to build the backend functionality.

• Gitpod
  • IDE (Integrated Development Environment) used to develop this project.
• GitHub
  • The code hosting platform used to host the project.
• Heroku
  • Cloud platform used to deploy the website.
• MongoDB
  • Fully managed cloud database service used to store all the data for this project.
• Flask
  • Web framework used to provide libraries, tools and technologies for this project.
• Werkzeug
  • Comprehensive WSGI web application library used for password hashing, authentication and authorization.
• Balsamiq
  • The software used to create the project's wireframes.
• Materialize
  • In-built JavaScript package for interactive and responsive web-design.
• Google Fonts
  • Font families library used to provide the font "Baloo Tammudu 2" and "lobster".
• jQuery
  • JavaScript library used to simplify the JavaScript code.
• W3C Markup Validator
  • The markup validation service used to check for errors in the HTML code.
• Jigsaw
  • The CSS validation service used to check for errors in the CSS code.
• JSHint
  • The JavaScript validation service used to check for errors in the JavaScript code.
• Chrome DevTools
  • Chrome DevTools used to test the responsiveness of the site.
• Responsive Design Checker
  • Responsive Design Checker used to test the responsiveness of the site.

• HTML Validator:

  • The Home page, login and register were checked by address and no errors or warnings were found.
  • All the other pages were checked via direct input and the only errors and warnings detected were due to the use of jinja language.

• CSS Validator (via direct input path):

  • No errors found:

• JavaScript Validator:

  • No errors found:

• Python PEP8 Validator:

  • No errors found:

It was used Chrome DevTools and Responsive Design Checker to test the responsiveness of the site.

The website structure adapts well to all used screen sizes.

The responsiveness of all pages was tested:

• the website name on the top left corner returns you to the home page;
• the Categories dropdown menu shows all the available categories and, when clicked, shows all the recipes on the selected category;
• the Recipes button opens the home page where all the recipes are shown;
• the LogIn button opens the login page. On the login page, there is an option to go to the register page if the user is unregistered. If the user inserts a wrong username or a wrong password a flash message is shown saying "Incorrect Username and/or Password";
• the Register button opens the Register page. The register page has a log in option if the user is already registered;
• The "My Recipes" button directs the user to a page with all the recipes added by the user;
• The "Add Recipe" button returns a page where the user can add a new recipe;
• The Manage Categories button directs the admin user to a page where the user can add new categories and delete existing categories.

The appearance and responsiveness of the website was tested with good results in 4 different web browsers: Microsoft Edge, Mozilla Firefox, Google Chrome and Opera.

• As a regular user, I want a website responsive and good looking on all devices;
  • A regular user will find a website with a balanced design and a clear structure in whatever device he chooses to use.
• As a regular user, I want a website easy to navigate;
  • A regular user will find a website with a clear structure making it easy to navigate.
• As a regular user, I want to see and get inspired by dessert recipes;
  • A regular user will find a lot of different recipes and a lot of pictures to get inspired.
• As a regular user, I want to be able to search recipes;
  • There's a search bar on top of the home page where the user can search for recipes. It will search words on the ingredients, title and category.
• As a regular user, I want to see all the recipes in each category;
  • A user can select a category using the header's dropdown menu or, when it's in the recipe page, clicking on the shown category, and the user will be directed to a page with all the recipes for that category.
• As a registered user, I want to have all the functionalities of a regular user and some extra functionalities;
  • A registered user can do everything an unregistered user can.
• As a registered user, I want to add new recipes;
  • A registered user can add a new recipe using the link on the header.
• As a registered user, I want to be able to edit my recipes;
  • A registered user can edit all the recipes added by the user. The user can edit a recipe using the link located on the bottom of the recipe cards or using the button located on the bottom of the recipe page.
• As a registered user, I want to be able to delete my recipes;
  • A registered user can delete all the recipes added by the user. The user can do it using the link located on the bottom of the recipe cards or using the button located on the bottom of the recipe page.
• As a registered user, I want to quickly see all my recipes;
  • When a registered user clicks on "My Recipes" the user is redirected to a page with all the recipes added by the user.
• As an Admin user, I want to have all the functionalities of a registered user and some extra functionalities.
  • An Admin user can do everything a registered user can.
• As an Admin member, I want to be able to edit any recipe;
  • An Admin edit any recipes, not only the recipes added by the Admin user. The Admin can do it using the link located on the bottom of the recipe cards.
• As an Admin member, I want to be able to delete any recipes;
  • An Admin can delete any recipe, not only the recipes added by the Admin user. The Admin can do it using the link located at the bottom of the recipe cards.
• As an Admin member, I want to check what categories are available;
  • An Admin user can check which categories exist using the dropdown menu on the header or going to the "Manage categories" page using the link on the header;
• As an Admin member, I want to be able to add a category;
  • On the "Manage categories" page the Admin user can add a new category by using the button located on the bottom of the page.
• As an Admin member, I want to be able to delete a category;

• On the "Manage categories" page all the categories are displayed in cards. Those cards have a link that allows the Admin user to delete the category.

• It was possible for a logged in user to log in again by changing the url:
  • This bug was solved by adding an if statement in the "login.html" page insuring that only non logged in user can log in.
• It was possible for a logged in user to register again by changing the url:
  • This bug was solved by adding an if statement in the "register.html" page insuring that only non logged in user can register.
• It was possible for a non logged in user to add a recipe by changing the url:
  • This bug was solved by adding an if statement in the "add_recipe.html" page insuring that the user is logged in.
• It was possible for a non logged in user to edit a recipe by changing the url:
  • This bug was solved by adding an if statement in the "edit_recipe.html" page insuring that only the admin user and the recipe creator can edit the recipe.
• It was possible for a non logged in user to delete a recipe by changing the url:
  • This bug was solved by adding an if statement in the "app.py" file inside the delete_recipe function returning the page "404.html" if the user is not logged in.
• When the user tried to delete a recipe inside my_recipes.html page, the first recipe of the list was deleted, instead of the selected recipe.
  • This bug was due the utilization of a modal without the proper modal id. To solve it, it was used the recipe.id as a href, this way the deleted recipe is the selected one.

• Python
• MongoDB Account and database
• GitHub Account
• Heroku Account

To deploy the project in Heroku I perform the following steps:

• In my Gitpod terminal I use the command "pip3 freeze --local > requirements.txt" to create a file with the requirements.
• After the file is created I open it and deleted the last line that was a blank line;
• I checked that I have a .gitignore file in my repository and that file contains env.py and pycache/.
• I created an env.py file. This file contains all the following information( with the updated values for the SECRET_KEY, MONGO_URI and MONGO_DBNAME):

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", " MY SECRET_KEY")
os.environ.setdefault("MONGO_URI", " MY MONGO_URI ")
os.environ.setdefault("MONGO_DB", " MY MONGO_DBNAME ")

• I Logged in to Heroku.
• Selected 'Create New App' in the top right of the dashboard.
• Chose a unique app name, and select the region closest to me, before clicking 'Create App'.
• Went to the 'Deploy' tab, 'Deployment Method' and selected 'GitHub'.
• Search to find my GitHub repository, and click 'Connect'.
• Went to the 'Settings' tab, find 'Config Vars', and click 'Reveal Config Vars'.
• Enter key value pairs that match those in the env.py file, displayed like this :

• In the 'Deploy' tab, click 'Enable Automatic Deployment'.
• In 'Manual Deploy', choose the master branch.
• Click 'Deploy Branch' to deploy the app onto the Heroku servers.
• Once the app has finished building, click 'Open App' to open the site.

• Log in to GitHub;
• Go to https://github.com/RuiOliveira83/MP3
• Click on "Fork" - top right side;
• Create an env.py with your values and create a MongoDB database with the data keys and types as shown above;
• Install all the project requirements. The information on the project requirements can be found on requirements.txt and this can be done with the command pip3 install -r requirements.txt.

To run the code locally by cloning the project from GitHub:

• Log into your GitHub account;
• Find and choose the Repository for this project (RuiOliveira83/MP3);
• Inside the Code button copy the URL link inside the Clone section;
• Open repository or create a new repository;
• Open terminal;
• Type git clone followed by the copied URL and press Enter.
• Create an env.py file with your values, create a MongoDB database with the data keys and types as shown:

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", " YOUR SECRET_KEY")
os.environ.setdefault("MONGO_URI", " YOUR MONGO_URI ")
os.environ.setdefault("MONGO_DB", " YOUR MONGO_DBNAME ")

• Install all of the project requirements with the command pip3 install -r requirements.txt on your terminal.
• Run the app by typing python3 app.py on your terminal

• Home Page:

• Overall structure:

  • I've looked at several projects on the code institute slack channel and, even though I didn't use any specific one as direct inspiration, it was helpful to see other creators ideas to help form my concept.
  • I've looked at several recipes websites such as Jamie Oliver and All Recipes for inpiration and for recipes to populate my database.

• Read me file:

  • I used the code institute template and followed my previous project as a guideline.

• The code institute for the inspiration and knowledge to do this website.
• The code institute Slack channel, for having an extensive library of questions and answer with almost all my questions.
• The code institute tutors for all the help.
• My mentor Precious Ijege for guidance and support.