Throughout this project I will be using the technologies that I have learnt so far from Code Institue. This project will consist of HTML5, CSS3, JQuery, JavaScript, Python, Flask and NoSQL(MongoDB).

The site designed was a recipe cookery web based application. Database was stored and retrieved from the backend(MongoDB). I have decided to follow the project requirement provided in brief.

The UX for this project is easy and understandable. It is mainly a web based application that also function well on mobie. Navigations are quite easy and smooth for users. The application is intuitive to use and has information on it presented well. There is a filter that allows user to narrow/navigate thier search through the application. The web application allows user to create,read(view),edit(update) and delete smoothly.

The data schema used displays perfectly throughout the form thus allowing user to implement the CRUD rule perfectly. The application allows for addition of a new image or automatically adds a default image. The colour scheme was very simple and makes the site quite clear and readable enough for users. This application is very easy for a user to manipulate and understand.

• Navbar - Materialize was used for quick production of modern CSS and use of their predefinded classes.

• Images - Flask werkzeug was used to allow user attach image files. Images used are acquired via google.

• Card - Materialize predefinded classes was used for great UX view.

• Button/Links - Was used to allow/trigger users intentions/actions on application.

• Material Icon - Icons was used to improve the UX for each logo when viewed by a user/visitor.

• Forms/Filter - Materialize and Flask WTForms was helpful with predefined classes usable in Jinja templates.

• Wireframing- I just did some mock ups on paper with pen of how the site generally should look and feel.

• User Account - Try to add ability for a user to Sign Up/Sign In

The website is built using HTML5, CSS3, JavaScript and JQuery for interactivity, Python, Materialize frameworks, Flask frameworks

The site is fully functional without any local files needed to be downloaded all frameworks and scripts used are loaded via an approved CDN. Before deployment the site was tested on several browsers and devices. This site is supported on all browsers. Check below for tested devices and browsers.

• Materialize 0.100.2 - The web framework used
• W3 Schools - Help & tips
• Stackoverflow - Help & tips
• Flask -Help & tips
• Material Icon - Icons
• Favicons - Icons
• Colors - Colours
• Materialize JS - Materialize JS

• Materialize 0.100.2
• Material Icon
• JQuery 3.2.1
• Flask

I used fonts from @googleapis CSS 'Overlock, Londrina+Solid' to create difference in headers and written styles.

• JQuery & JavaScript - Was used to allow interactivity, file attachment and buttons to function smoothly. Jquery

• NoSQL - MongoDB was used to create database and pulled via the route. MongoDB

• Python - Was used to route and call backend database schema from MongoDB.[Python](Lecture Notes)

• Flask - Produces very useful packages like Jinja,WTForms,PyMongo that allows application to be more functional.Flask

• Heroku - Was used to deploy application to run on any every technological devices. Heroku

• Materialze JS - For easy dropdown during user select option and mobile screen view Materialize

• Favicons - Used to improve UX when viewing the top of the webpage. Favicon-generator

• Materialize Classes - To trigger more styles and reduce CSS over-styling Materialize

• Material Icon - To improve view of UX when surfing the application Material Icon

• Tested on Chrome (Tested in DevOps on all mobile and tablet devices possible for testing.)
• Tested on IE
• Tested on Android
• Tested on Samsung S6 - S9
• Tested on Iphone
• Tested on Firefox (Tested in DevOps on all mobile and tablet devices possible for testing.)
• Tested on Opera (Tested in DevOps on all mobile and tablet devices possible for testing.)
• Tested on Safari (Tested in DevOps on all mobile and tablet devices possible for testing.)

Created a new repositories on Github where the project will be deployed unto at each commit. At first, use a git remote command to link project with new repo. Then use the git push -u origin master command to push codes and every change into new repo

Using the CLI in terminal to call git init to start git initialization on the project. This allows a file/files to be added to the Github repo by calling a git add command. Then any added file/files is being commited with a git commit -m "commit message" command. Afterwards, the file is been pushed with git push where Github username + password is required. Once successful, code will be deployed into your repo and git status command should indicate branch tree clean.

Created a new app on Heroku where the app is hosted live. At first, to allow Heroku locate application we login into the CLI using ** heroku login -i** command. You will be requested to imput username and password for Heroku account. After which you can request Heroku Apps via CLI.

Knowing the apps you need to pass deployment into then we can use heroku git:remote -a to allow Git automatically update deployment in Heroku. Once this has been remotely passed . To host the app unto heroku pass the IP and PORT config to match the route main config.

To allow git to push to heroku the command git push heroku master must be called for a final push. For a succefull and healthy push it is best adviced to have the requirement.txt and Procfile files installed or updated. Most especially for requirement.txt file which gave me a lot of challenges, it requires to be updated along with any installed packages so it can depoly successfully, i.e Flask packages.

All my mark up is HTML valid All my styling is CSS valid All my syntax is JavaScript syntactically valid All my routing is Python valid

I use GitHub for version control. Which backup my code incase I encounter a bug or an error that needs urgent fix. I can easily traceback my code on GitHub.

Dehinde - Shogbanmu - Project 3

The images used was retrieved from Google The recipe used was retreived from Google The logos was generated via icon8 The data was retrived from my MongoDB database

I received a great inspiration for this project via my mentor, he was a great help. Ali Ashik