Code Institute Milestone Project 3: Python and Data Centric Development
MAMAMAKI is a site for Japanese home cooking recipes and when you are logged in, you can add, edit and delete your own recipes. The focus with this site is to combine knowledge about Japanese home cooking with what was learned this far about HTML, CSS, JavaScript and Python. The site’s goal is to share recipes.
By clicking this link a live demo version will be visible.
Features
Technologies
Testing and Bugs
Deployment
Credits
This is meant to be a B2C site which targets visitors who are interested in Japanese home cooking.
- To be able to see different recipes and search for them using keywords.
- To create an account and log in on that account.
- To create, read, update and delete my own recipes.
- To share the love for Japanese home cooking and promote it.
- Share nice Japanese home cooking recipes.
The design goal is to make a clear, accessible, structured site so that visitors can easily see the recipes, navigate on the site and add, edit and delete their own recipes.
The site shows a homepage with a small introduction. Second is the about page which tells a bit about the creator of the site and why the site was created. Furthermore, the site contains a recipes page on which you can you choose to go to a specific recipe. It also contains a register page, a log in page, a personal recipe page and a add recipe page. The personal recipe page, add recipe page and the log out option will only be visible when you are logged in.
| Sidenav | Logged in User | Logged out User |
|---|---|---|
| Home | ✅ | ✅ |
| About | ✅ | ✅ |
| Recipes | ✅ | ✅ |
| Register | ❌ | ✅ |
| Log in | ❌ | ✅ |
| Personal recipe page | ✅ | ❌ |
| Add recipe | ✅ | ❌ |
| Log out | ✅ | ❌ |
Also on the homepage there is a difference in what you will see when you are logged in or logged out.
| Homepage | Logged in User | Logged out User |
|---|---|---|
| Register button | ❌ | ✅ |
| Log in button | ❌ | ✅ |
A difference has also been made in user rights:
| Recipe options | Standard User Account | Admin User Account |
|---|---|---|
| Add own recipe | ✅ | ✅ |
| Edit own recipe | ✅ | ✅ |
| Delete own recipe | ✅ | ✅ |
| Edit recipes of other users | ❌ | ✅ |
| Delete recipes of other users | ❌ | ✅ |
The site will be structured as clear as possible, it should be easy to see what you can do on the page, on all screen sizes it should be clear what you can do on each part of the site.
The skeleton section is a bit more extensive, for that reason please view this separate file.
Google Fonts was used to embed the Chicle and Ubuntu font in the code. Chicle was chosen because this reminds of Japanese calligraphy. Ubuntu was chosen because for the main text I felt this has a better readability which gives better UX.
For the icons Font Awesome was used.
The site contains the following features:
- See an overview of multiple recipes.
- Select a specific recipe and see the details of that recipe.
- Have clear and easy to use page navigation.
- Register an account.
- Log in to that account and log out of it.
- Add, edit and delete your own recipes.
The following items can be added:
- Comment on other people’s recipes.
- Being able to share a recipe on social media.
- Being able to print out a recipe directly from the site with one click on a button.
- Put the ingredients on a shopping list which one can print out.
- Share videos of the cooking techniques.
- HTML
- CSS
- Python
- JavaScript
- Materialize 1.0.0
- jQuery
- PyMongo
- Flask
- Jinja
- Werkzeug
- Adobe Photoshop: to resize the images.
- tinypng: was used to downsize the images.
- Cloudinary: was used to store the images and get an URL-link for them which are used in my recipes.
- Adobe Illustrator: to create the logo.
- VSCode: to write the code in.
- EmailJS: for receiving the content of the contact form
- MongoDB Atlas: as a database for this project
- Heroku: as a host for the deployed site
- GitHub: for the repository
The tests have been done on multiple devices and browsers. In the end everything works as intended. Because this topic contained more content than expected, a separate page was created. For more details about testing and bugs please view this file.
The deployment section is a bit more extensive for that reason please view this separate file.
All content has been written by me, but the original recipes come out of two books and two websites which are:
- Tori to piman no itame ni - Japans Koken - Harumi Kurihara
- Tamago - SUSHITOTAAL.NL
- Miso soup - THE SUSHI TIMES
- All the other recipes - Culinair genieten - Japans
The recipes added by users admin and daphnehf are all cooked and photographed by me.
I have sometimes edited these recipes to my own liking while cooking, the edited versions are on the site.
Recipes posted by other users are not pre-tested!
- Code Institute LMS Backend Development Task Manager Miniproject by Tim Nelson this was used as the basis of the code and then modified to make it my own site.
- CSS Gradient to create the gradient background with CSS.
- Stack Overflow to prevent the gradient background from repeating and without having to use a fixed height value with px.
- Sanwebe.com as help to let jQuery add and remove extra fields for the ingredients list and the instruction list.
- Stack Overflow to help me figure out how to loop over the ingredients list and the instruction list and get them displayed.
- W3schools to help me make a collapsible with HTML and JavaScript.
- W3schools to help me make a scroll back to the top button.
- Autoprefixer CSS to optimize the use of vendor extensions in the CSS code.
- Materialize as a reference work on the framework.
- Python Programming as how to use the Login_Required decorator.
-
MCICON for the sushi icon in the logo.
-
Adobe Stock the wave image is a licensed image downloaded with a paid Adobe Stock account, the image was used for the background of the register and log in page.
-
Photos of the food, for recipes added by users "admin" and "daphnehf", all these photos are my own.
-
Color-hex was used to get the images of the colors that were used.
-
favicon.io was used to get an existing favicon for the site.
-
Rawpixel Japanese torii gate sticker with white border by Tvzsu was used as a background for the error pages.
- creately to create the data diagrams.
- RandomKeygen to get a value for the secret key.
- cdnjs to get the fontawesome cdn from.
- jQuery to get the jQuery cdn from.
- Am I Responsive? to check the responsiveness and make the mockups.
- WebAIM used for checking contrasts on the site.
- My mentor from Code Institute, thank you Narender for your time and guidance.
- My husband, thank you Django for taking more care of our son so I can work on my education, thank you for trying my cooking skills with these recipes and thank you for your patience.
- Fellow student, Abi Harrison, for sharing her info about good head elements.
- Fellow student, Sean McMahon, in who's Readme file I saw the idea to make a collapsible table of contents.
- Fellow student, Kotaro Tanaka, in who's Readme file I saw the idea to make it possible to go back of the top of a page.
- Fellow student, Benjamin Kavanagh, for looking into my code and remind me to use also the url_for also my images to prevent them from giving a 404.
{{ url_for('static', filename='images/logo.png') }}
- Fellow students / slack members, Andrew Dempsey, Mike Avgeros and Peter Baker for extensively testing my project.
- Special thanks to my colleagues, friends and family for their support, tips and for testing my project.