- User stories:
- A user who wants to use all functionalities of the application needs to register himself by clicking "Sign Up" button and fill the required fields.
- A user who comes back to the website needs to log in by providing the username and password used during the registration process.
- A user can add a new recipe by clicking on the "Add recipe" button, where he can find a form to provide all necessary information.
- A user can browse through all the recipes by clicking on the "All recipes" button.
- A user who wants to see recipes from a particular cuisine can click on its name to see the list of them.
- A user can add and edit existing cuisines by clicking on "Manage Cuisines" button.
- A user who wants to see all the statistics about the library can click the "Statistics" button.
- A user who wants send a message can click "Send a message to us" and fill the form.
The project was built for high performance and simplicity. The user interface was put together to allow navigation through the website in an easy and quick way. A picture carousel provides a good first impression and attracts a user visually. Logo in the left top corner is visible all the time to improve the visual identification. Login and registration feature help user protect their privacy. Search field lets a user find a wanted recipe quickly and without hassle. Adding a new recipe and cuisine is intuitive and straightforward for better user experience. The subpage with statistics and charts is clear and simple, and the required information is easy to extract. Contact form lets keep in touch with the administrators of the website and leave valuable feedback. The recipe cards are styled to ease access to all important information. On top of the card is the name of the dish with the cuisine of origin. Next, to the name, we can find a picture of the ready course. Below the picture is the preparation and cooking time, number of serves and date when the recipe was added to the library. On the card, we can also find the list of necessary ingredients and step-by-step instruction. Every recipe card has an "Edit" and "Delete" button.
Technologies Used:
- HTML
- JavaScript and JQuery
- SASS
- Bootstrap
- Python and Flask
-
Using the main site.
a) The main page displays all basic sections and buttons. Images, texts and styles are visible and loading properly.
b) All link to the subpages were tested and working correctly - leading to the subpages.
c)The front page was tested on a variety of devices and resolutions to make sure that the content is adjusting to the different screen sizes.
d) The search functionality working properly and find all the recipes containing wanted keywords. -
Registering / Login
a) A new user can create a new account by adding username and password to the database.
b) Passwords are encrypted before sending to the database.
c) A user can log in to the website using data information provided during the registration process. -
Browsing through the recipes.
a) All recipes are displayed correctly either in "All recipes" or in particular cuisine.
b) All information provided by the user is visible on the recipe card, including the picture.
c) Recipes are grouped by three on a single page using pagination.
d) Edit function allows adding new information and modifies the existing one.
e) Delete functionality removes the recipe from the page and the database. -
Statistics
a) The total number of recipes is displayed properly and change after adding or removing a recipe.
b) All the charts are working correctly, displaying necessary information and updating after changes in the database.
- Send message.
a) The link to the message form is working correctly.
b) All required fields have to be filled before sending the message.
c) A new message is received instantly on the provided email address.
Jasmine and Jquery-jasmine were used for testing index.html.
When you run the index.html file, visit:
http://URL.com/jasmine-testing/spec/spec-runner.html
where can be http://localhost:8081/jasmine-testing/spec/spec-runner.html
All the tests conducted by Jasmine check:
- All the buttons on the main page lead to the subpages.
- The navbar contains the necessary class.
- The collapsing menu is activated by click hamburger button.
- The body of the main page contains three sections: about, cuisines and contact Some tests were done for the backend using the unittest library in Python 3, and the results can be found in the test.py file.
The site was deployed on Heroku.com and can found under this address: https://cooking-recipes-project.herokuapp.com/. The copy of the final version and previous development version can be found on GitHub: https://github.com/szantilas87/cooking-recipes-project. A list of all necessary dependencies is in the requirements.txt file.
To run the project, some environment variables are needed:
IP
PORT
MAIL_USERNAME - email address you want to use
MAIL_PASSWORD - password for the email address
MONGO_URI - set up MongoDB database on https://www.mongodb.com/ or your local environment
SECRET_KEY - any string
-A lot of ideas and some pieces of code were created thanks to YouTube channels: Pretty Printed - https://www.youtube.com/channel/UC-QDfvrRIDB6F0bIO4I4HkQ Corey Schafer - https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g
-All the pictures used on the website were taken from https://unsplash.com/.
-Recipes and pictures of ready dishes are from https://www.bbc.com/food/recipes.