The Cocktail Guide

Link to final version []

Data Centric Development Project - Milestone Project 3

The aim of this project was to utilise the skills and frameworks leanred to create and online cocktail app that will allow users to veiw, Edit and create there own cocktails.

User Journey And Testing

The user joureny highlights all of the apps main feaures. Manual testing was done by following the user flow with mouse and keybord. In addition to this I also tested the app on all main browsers and devices to make sure the app is working corrctly and the user a great experience no matter what devise is being used to access the app. Browsers include: Firefox, Chrome, Internet explorer, yandex browser and Safari. Devices include: Iphone,Samsung phones an ipad and my laptop.

Technologies used

• I used HTML5 to create the base of my project.
• I used CSS3 in order to implement custom styling in my project.
• I used Python3 3 for the backend of my project along with the Flask Framework.
• I used jQuery to simplify my JavaScript.
• I used MongoDB for my database to store all my data.
• I used Materialize for it's frontend frameworks for the style and layout of my project.
• I used Jinja2 templating language to keep code clean.
• I used Cloudinary to store high resolution images
• I used Heroku to deploy my application.
• I used MoqUps to create the mockup version of my website, that can be found Here.
• I used bcrypt (a password-hashing function) to further protect private user information

Validator used to check my code:

• W3C HTML
• W3C CSS3

Issues found and fixed

• The alignment of the images on the cocktail recipe page was off due to images varying in sizes. I fixed this by reseaching a solution and finding it is a common fault that can be fixed by setting a fixed height.
• The index page content was not fixing onto the page and was carouselling along with the slides. This was fixed by digging deep into stackoverflow and finding a solution.
• The Headings for all main pages where getting lost in the background image so I initailly used the brightness filter in css to dim the background image but from looking through templates and UX design pages i thought adding a border in css for all headers would be a unique way to make the page pop aswell and for the userto have a better experience. This was confirmed by friends and family who tested the app.

Things to improve in the Future

• The user will be able to access there own personal homepage that shows them the cocktails they created
• Give the user the abilty to share recipes on other platforms like twitter

DEPLOYMENT

Heroku

After loging into heroku I created a new app, using the name spiceword-cookbook and set the region to Europe.

Select application

In the settings tab I clicked reveal config vars and entered the required environment variables, which in this case were:

IP 0.0.0.0

PORT 5000

MONGO_URI mongodb+srv://root:<password_removed>@myfirstcluster-fai9p.mongodb.net/cook_book?retryWrites=true&w=majority

SECRET secret key for flask session

From the heroku dashboard of your newly created application, click on "Deploy" > "Deployment method" and select GitHub.

Confirm the linking of the heroku app to the correct GitHub repository.

In the heroku dashboard, click "Deploy".

In the "Manual Deployment" section of this page, made sure the master branch is selected and then click "Deploy Branch".

The site is now successfully deployed.

Local Deployment

Within the file app.py change the line app.config['SECRET_KEY'] = os.getenv('SECRET') to app.config['SECRET_KEY'] = os.getenv('SECRET', '<your_key>) where <your_key> is a secret key of your choosing.

Also change app.config["MONGO_URI"] = os.getenv('MONGO_URI') to app.config["MONGO_URI"] = os.getenv('MONGO_URI', ) where is the string that points to your own MongoDB.

Your database should be named cook_book with collections set up as outlined in the database design section of this document. To help, you can also refer to these included JSON examples

From the terminal you can then run the app with python app.py and view in a browser at http://127.0.0.1:5000/

All my commits and the full code for my project can be found on my GitHub Repository found here

All work has been commited and deployed to Heroku found here

content

The content for the app was precured from unsplash a great platform for good quality images and a number of recipe websites and textbook guides

• (https://www.thespruceeats.com/quick-guide-to-distilled-spirits-760713)
• (https://uk.thebar.com/cocktail-recipes/classic-cocktails) -(https://www.socialandcocktail.co.uk/top-100-cocktails/)