The Top Shelf is a website for all your cocktail needs. Featuring cocktail recipes for 9 categories of alcohol from Gin to Whiskey and even some Mocktails. Users can register an account to allow them to add a new recipe to the website or edit any existing recipe that they had previously added. The project uses MongoDB as the database to store all the information and recipes for the website.
The project can be viewed here
The database schema that I sued for the project can be found Here
This website is for anyone who may need a cocktail recipe for an event they are hosting or if they just want to experiment with any alcohol they have at home.
The Top Shelf website allows the user to easily navigate by selecting an alcohol that they wish to be the base of their recipe. They are then presented with a list of cocktails that are can be produced from the selected Alcohol. Once the user selects a cocktail they are presented with a list of the ingredients required to make the cocktail, followed by the instructions on how to make it.
If a user comes across a new cocktail recipe that they wish to add to the website, they can easily do so. They need to navigate to the login page where they should register as a new user. Once registered, they need to login with their username and password. After they have logged in they should navigate to the 'Add a Cocktail' page where they can provide all the required information to add their favourite new cocktail to the website.
A logged in user who is returning to the website can view a list of all the cocktails that they have uploaded to the website in the past. From there they can edit an existing recipe if they have found a nicer recipe for the cocktail. They can also delete the recipe if they don't wish it to be on display.
A user who is looking for a non-alcoholic cocktail would navigate to the Mocktails section of the website from the home page, here they will find a list of the non-alcoholic cocktails.
- View Cocktails by Category - From the homepage with one click a user can get a list of cocktails from their chosen category
- Register/Login - Users can easily register as a new user or login as an existing user from the login page.
- Logged in Users can fill in the form on the 'Add a cocktail' page to add a new cocktail tot eh website.
- Logged In users can edit their existing recipes or delete them if they don't wish to show them again
- Allow the user to upload images for their cocktails from their local devices instead of them having to provide a URL
-
- The project uses Flask and Python 3 to render the HTML webpages. Flask is a micro web framework written in the Python programming language. Flask has many resources that aid with the development of web apps. Some of the resources I used were:
- render_template
- redirect
- request
- url_for
- session
- The project uses Flask and Python 3 to render the HTML webpages. Flask is a micro web framework written in the Python programming language. Flask has many resources that aid with the development of web apps. Some of the resources I used were:
-
- The project uses the Jinga2 templating engine to add dynamic content to the various webpages throughout the project. Jinga2 allows the use of loops and conditional statements.
-
- The project uses Materialize CSS for general page styling and layout.
-
- The project uses jQuery to make sure some of the Materialize CSS components (dropdown menus in forms, image sliders & modals) work correctly. jQuery was also used to allow extra ingredients and instructions be added to the 'Add a cocktail' form.
-
- The project uses Material Icons for any icons that are used in the website. The use of icons makes the website easier to read and understand for the user.
-
- The project uses Google Fonts for the Playfair font that is used throughout the website.
-
- The project uses MongoDB to store all the recipes and user information. CRUD (create, read, update & delete) tasks are performed on the database when user’s login, register, add a new cocktail, delete a new cocktail etc.
-
Bycrypt -This project uses Bycrypt to store and encrypted hashed version of a user’s password in the database. By hashing a user password, the password is stored more securely.
I ran all the HTML file's through a HTML validator on HTML Validator. Some pages initially showed up with errors as I had forgot to use the ALT attribute on quite a few images. I went back and rectified this. On the single cocktail page, I also had an open span tag that was never closed, so I removed the tag.
I used CSS Validator to validate my CSS file style.css, this proved to be all correct.
I also used Color.review to select the Cyan colour from the Materialize CSS colour palette as this colour worked good with both black and white text.
I have tested the site functionality across Google Chrome, Safari & Firefox on both desktop and mobile viewports. I tested the website across a number of devices also - Windows Desktop, MacBook, Apple iOS on iPhone 7 and iPad Pro and on a Huawei P20. I also used the Google Chrome developer tools to simulate a number of other devices to ensure the website displayed and worked correctly. The website required a few minor changes to ensure it worked correctly and looked the same across each browser and on the devices, I used for testing.
I have simulated a number of scenarios on the login and register process. I decided the make the username case insensitive to make the process more user friendly. I tried to register as a new user without suppling a password which failed as expected. I also tried to login with incorrect username and password combinations which also failed. Another simulation I preformed was where I tried to register a new user with a username that already existed, this also failed.
On the Add Cocktail page the user must fill in each element of the form before they can submit the new recipe to the database. I tried on numerous occasions to submit the form with a separate input missing from the form on each occasion. The form did not submit and a message is displayed to the user that they need to fill in all elements of the form.
The user can add extra ingredients or step inputs by using the buttons provided. I tested the adding and remove buttons and they worked as I wished.
When a user wishes to edit a cocktail, the form is pre-populated with all the existing information on the selected cocktail. I tested editing one piece of data on a cocktail and also adding and removing new ingredients and instruction steps. The cocktail record was updated int he database as expected with each test.
I also checked to ensure that the Edit and Delete buttons only show on a cocktail that has been added by the logged in user so that they have control of the cocktails they added.
I regularly committed changes to Github through the source control feature on Visual Studio Code. I used a short commit message to reflect each new change that was made in each commit. At last count I had over 60 commits on this project.
After I had completed each minor step on the website such as getting the Google Map to appear, getting the country buttons aligned correctly I committed the changes to the Github repository along with a short message. This made it easy to fall back on old commits when needed.
I used Heroku to deploy the project. The project can be viewed here.
After each commit to Github I would use the command 'git push heroku master' in the terminal to push the project to Heroku so that the latest version of the site could be viewed.
I had to create a Procfile and a requirements.txt file in the root of my project to deploy it successfully to Heroku. The Procfile tells Heroku what commands it needs to run. The reuqimrenets.txt file tells Heroku what Python libraries it needs to install for the project to run correctly.
Heroku also required some Environmental Variables to be added for the IP, PORT and the MONGO_URI which is the link to the MongoDB database.
I created 4 test users to help with testing the website functionality and populating the database with the usernames - david, susan, claire and tom. The password for each account is password. Each user has a number of cocktails added by them. The username david has the most cocktails added to the database.
I took all cocktail recipes and images from the BBC Good Food website. I used a number of lectures from the Code Institute course to help me with the project as well as Stack Overflow and videos from YouTube on Flask Web Development.