ITADAKIMASU

The purpose of this project is to create a website where people can share and explore Japanese recipes.

Japanese food, known as the healthiest food in the World, is really popular especially with Millenials and nowadays people like to experiement new food cultures from the world.

This website can be used not only by beginners who wants to be inspired and discover this food culture but also by people who have experience in cooking Japanese food and want to share their recipes.

• ITADAKIMASU in Japanese means 'I humbly receive' or can be interpreted by "Let's enjoy our food". This word shows gratefulness of the meal.
• The Red Dot is being used not only as a FAVICON but also rapresents the Japanese flag, so I decided to use it to have a connection with Japan.

• For this Project I used Montserrat and Roboto from Google Fonts.

• Wireframes: Wireframes

• ADD RECIPE = Users can create a new recipe in the database by adding a new one, they have to be logged in to access to "ADD RECIPE" function.

• SHOW RECIPE = Recipes are displayed in the main page and can be shown by clicking "SHOW", users will be redirected to view_recipe page that will show all the informations about the recipe.

• EDIT RECIPE = If users are logged in, they can manage to edit their own recipes, by editing the informations in the form and submitting it. A flash message saying "Recipe Edited!" will appear.

• DELETE RECIPE = If users are logged in, they can delete their own recipes. A flash message saying "Recipe Deleted!" will appear.

• HTML
• CSS
• JAVASCRIPT
• PYTHON

• MATERIALIZECSS For responsiveness and styling the website
• JQUERY Javascript Library
• FLASK Python Web Framework
• WERKZEUG Used with Flask for password hashing and autentification
• MONGODB Database used for Itadakimasu Recipes
• HEROKU App for project deployment
• GITHUB Used to store the project from Git
• GOOGLE-FONTS To import Montserrat and Roboto
• FONT-AWESOME To import icons for UX purposes
• FAVICON To create website icon
• GIT Version control and adding, committing and pushing to GitHub from GitPod

• HTML W3CValidator HTML = SUCCESS

• CSS W3CValidator CSS = ERROR

• Javascript JShint = SUCCESS

• Python Pep8 = SUCCESS

Please find manual testing in Testing.md

Using automatic deployment from GITPOD to HEROKU:

• Create Procfile using commands: $ pip3 freeze --local > requirements.txt

$ echo web: python app.py > Procfile

• Create a new app in Heroku platform, enter a new app name and then create app by choosing also the region name.
• Select GITHUB as deployment method and connect GITHUB account to Heroku.
• Go to Settings and find Config Vars, then in Reveal Config Var enter the env.py variables:

1. IP
2. PORT
3. SECRET_KEY
4. MONGO_URI
5. MONGO_DBNAME

• Push requirements.txt and Procfile to repository.
• On Deploy App section in Heroku click on "Enable Automatic Deploys" and then "Deploy Branch", once done a message will show: "Your app was successfully deployed"
• View deployed project by clicking on "View" to launch the app.

• Log in to GitHub account and find the repository.
• Clone the repository by clicking and copying the link from "Clone with HTTPS".
• Find and choose which location needs to be used for local clone.
• In Git Bash paste the URL copied in to GitHub repository and press enter to create the local clone:

  git clone [email protected]:mion93/itadakimasu.git

• Create a new .env file for environment variables.

• MATERIALIZE FRAMEWORK: Navbar, buttons, parallax, sliders, cards, forms, responsiveness)

• Stack Overflow: Used for fixing responsiveness bugs.

• Unspleash: Used for no copyright images

• Amazon: Used for images and URL of the books

• Articles: Culture Trip BBC FOOD

• Balsamiq: Used for Wireframes

• My Code Institute Mentor Gerard Mcbride for support and help.
• Slack Community for the support.
• Code Institute Tutors for help.