Tipsy Mac Staggers

Introduction

The Tipsy Mac Staggers website was created and built by Stephen Mc Govern. The aim of the website is to act as a drinks database where users can search for a new drink/cocktail that they wish to try. The site will provide all of the ingredients, quantities and instructions to make each drink.

Only registered users will also be able to upload their own cocktail/drinks recipes that they have made so other users can sample another users twist on an established classic drink.

---

Table of contents

1. User Experience (UX)

• 1.1 Target audience
• 1.2 Visitor goals
• 1.3 User stories
• 1.4 Design choices
• 1.5 Wire frames

2. Features

• 2.1 Age verifier
• 2.2 The navbar
• 2.3 Search drinks feature
• 2.4 Add drink
• 2.5 Edit drink
• 2.6 Delete drink
• 2.7 Shop
• 2.8 LogIn
• 2.9 Log out
• 2.10 The Footer

3. Technologies/Languages Used

• 3.1 Gitpod
• 3.2 HTML5
• 3.3 CSS
• 3.4 JavaScript
• 3.5 JQuery
• 3.6 Python
• 3.7 Flask
• 3.8 Mongo DB
• 3.9 Materialize
• 3.10 Google fonts
• 3.11 Font Awesome
• 3.12 W3schools
• 3.13 Balsamiq
• 3.14 Age Verifier
• 3.15 Favicon Generator
• 3.16 Security/LogIn

4. Testing

• 4.1 See testing.md document

5. Deployment

• 5.1 Deployment & cloning

6. Credits

• 6.1 Media
• 6.2 Code
• 6.3 Acknowledgements

7. Contact Me

• 7.1 LinkedIn
• 7.2 Email
• 7.3 Skype

8. Future Features To Develop

• 8.1 Search Bar
• 8.2 Like feature on each drink
• 8.3 Dedicated profile pages
• 8.4 Share drink feature

9. Disclaimer

• 9.1 Disclaimer on project

---

1. User Experience (UX)

1.1 - Target Audience

• This website is aimed at anyone who is looking for instructions on how to make a cocktail/drink that they may not be familiar with or are unsure about what ingredients, quantities and steps to follow to make that drink. The site is built around user engagement and all users are encouraged to register which will allow them to add their own favorite drinks to the site. The more registered users generating content the better the site will become.

---

1.2 - Visitor goals

As a user of the site my goals are:

• To be able to search through a database of drinks that users have uploaded so i can try and make a classic drink i am already familiar with, or explore and find a drink that i have never tried before.
• Once i have found a drink i want to know what ingredients i need, and the step by step instructions to make that drink.
• If i become a regular user of the site i would like the ability to add my own drinks to the site for people to try.
• I also want the ability to to edit/delete any of the drinks that i have added to the site at any time should i wish to do so.

---

1.3 - User Stories

As a visitor to Tipsy mac Staggers i want/expect/need:

1. A simple user friendly site where i can find information of different types of cocktails/drinks that i am looking to try.
2. I want the layout of the site to be simple and intuitive. I want it to make sense so I am not confused or put off using it.
3. The information should be presented in a uniform way and be laid out in a way that is easy for me to navigate and to understand.
4. I also want the ability to search for and to view only drinks/ingredients that i am interested in so i am able to filter out content that is not relevant to my search.
5. I may be viewing the site from a mobile phone or tablet. I expect the site to have been designed responsively so that it works on my mobile device.
6. On mobile devices the site should work similarly to the way it does on desktop so i am able to navigate it and not be faced with a completely different layout/functionality.
7. I want the ability to add my own drinks to the website so i can share some of my own favorite recipes with other people. I also expect to be able to edit and delete my own content at any time should i wish to do so.
8. I also expect to be able to connect to the sites social media channels with a simple click so i can keep up to date with anything that the site admins may post there.
9. Finally as a user I expect feedback from the website when I interact with it. If i add a drink, edit a drink, delete a drink or log in and log out i want to see confirmation that this action has been completed successfully.

---

1.4 - Design Choices

• As the website is a site used for cocktail/drink recipes I wanted it to be bright and colorful, yet simple and easy to use. On this project i have intentionally kept the site as simple as possible with basic functionality. One of the main reasons i have done this is because users using the site may be doing so under the influence of alcohol. Alcohol effects memory and concentration and therefor i didn't want a complicated site with lots of features, just a simple site with CRUD functionality.

FONTS

• For the website i decided to use the google font style of Nixie One. This font is a mixture of neon tubes signage and a typewriter and it is a font that sits well with the colour scheme i went with.

• The link to the Nixie One font on Google Font can be found by clicking: Here

ICONS

• I also decided to incorporate some icons throughout the website. I did this because icons give a more visually pleasing experience for the user and also create a more intuitive user experience. For the social media icons i used (Instagram, YouTube, Facebook, Twitter) All the social media icons are located in the footer of the page.

• Some of the icons on the site were taken from the Font Awesome website. The link to the Font Awesome website can be found by clicking: Here

• The other icons i used were direct from Materialize. They can be viewed by clicking Here

COLOURS

• I used the website Coolors when deciding on which colours to use. This free website uses a generator to run through different colours and palettes that will match and compliment each other. The website can be found by clicking this link: Click Here

• For the base colours i decided to go with the following colour palette:

• Across the pages i haven't gone for lots of different colours and there is a lot of white space on the main drinks page. Again, this is a design choice i purposefully went with as it keeps with the minimalist feel i wanted to achieve with the site. On desktop the site might appear to contain a lot of dead white space but when you are using the site on a mobile device i feel the plain white keeps the page from looking to cluttered (Screenshots below)

MOBILE HOMEPAGE WITH SEARCH IMAGE

MOBILE DRINKS INFORMATION IMAGE

IMAGES

I did explore the option of allowing users to add an image to the site when they add a drink but in the end i decided against this. The layout i decided to go with is a simple and easy to follow one for the user and I intentionally wanted to keep the site this way. There are 3 possibilities that can arise from user added imagery on each drink:

1. A user may end up not adding an image to when they add a drink to the site. This could create a situation where some drinks have images and some drinks do not. I believe this would make the site look cheap and amateurish and is not a look/feel i wish to have.
2. I could write some defensive programming and auto generate a stock image if a user doesn't enter an image. However if you have a lot of users not adding images you will end up with a lot of stock images across the site and again i feel this would make the site look amateurish, especially if the stock image looks nothing like the actual drink.
3. A user may end up uploading a copyrighted image. Again this may lead to problems especially if the correct credit isn't given to the owner of that image. You have to assume the majority of users are not familiar with copyright law and many may just pull an image they find off the internet and upload it instead of taking their own picture.

CONCLUSION

Imagery is something i may explore at a later date but if i do then i will rearrange the site layout in a different way and maybe give each drink its own page as opposed to the current layout.

---

1.5 - Wire Frames

HomePage Desktop Unregistered
HomePage Desktop Registered
HomePage iPad
HomePage iPhone
HomePage Desktop Drinks Section Unregistered
HomePage Desktop Drinks Section Registered

Shop Page Desktop Unregistered
Shop Page Desktop Registered
Shop Page iPad
Shop Page iPhone

Register Page Desktop
Register Page iPad
Register Page iPhone

Login Page Desktop
Login Page iPad
Login Page iPhone

Welcome Back Page Page Desktop
Welcome Back Page iPad
Welcome Back Page iPhone

Add Drink Desktop
Add Drink iPad
Add Drink iPhone
(Note: On all devices the edit drink page will be the exact same display and layout as the add drink page except the content for each field will be pre populated. To save on duplication and repetitiveness i have not added this wireframe as it would be the exact same as the add drink wireframe just with some dummy text.)

---

2. Features

2.1 - Age Verifier

When a user lands on the website for the first time they will see the Age Verify page/function.

As the website contains content on alcoholic drinks to be responsible i have added an age verifier to the site. This feature doesn't ask users to enter their date of birth because the legal age of drinking can vary from country to country. Instead we ask the user to click yes or no to confirm if they are the legal age for drinking in their country.

The age verifier can be set to remember the user session ranging from 1 day to 30 days. For this project i set the verifier to remember the user for 1 day.

---

2.2 - The Navbar

For the Navbar i decided to use a Materialize mobile collapse navbar. I chose this option because i wanted the Navbar to be responsive on all screen sizes and the Materialize mobile collapse navbar offers this function in a quick and easy way.

The Navbar on each page is standardized, the page name "Tipsy Mac Stagger's" is located on the left hand side of the navbar. On the right hand side there are <a> tags that link to different pages. A registered and logged in user will see different buttons/options than an unregistered user. For an unregistered user the buttons/options they will see are:

1. Home
2. Shop
3. Register
4. Log In

(Image Below)

For an registered user the buttons/options they will see are:

1. Home
2. Add Drink
3. Shop
4. Log Out

(Image Below)

On smaller screen sizes the navbar buttons will collapse into a hamburger menu on the right hand side and the name "Tipsy's" will move to the middle of the navbar.

When the user clicks on the hamburger the menu will open from the right hand side to reveal the page options.

---

2.3 - Search Drinks

At the top of the home page i have created a search bar for users to search for drinks. If a user wishes the can browse all the drinks listed on the website one by one, or to save time they can use the search feature.

I have set this functionality up so users can search by: Drink name, drink type (Whiskey, Vodka, Rum) and by drink ingredient.

Initially when i first built the site i was going to have only the search bar showing on the homepage (See image below).

However i wanted users to be able to browse all of the drinks on the website on a single page as part of the idea behind the site is to be able to find search, find drinks/cocktails users may have never have been exposed to or be familiar with. Part of the fun of using a site like this is discovering and trying new things. I believe having only the search bar on the page would have acted as a barrier to this. I also wanted to have a page that displayed all the drinks on the website so they could browse everything on one page (See image below).

CONCLUSION

After building both of these pages and testing them i felt it was not a pleasant user experience. The reason for this is because it was listing all the drinks and the search functionality on 2 different pages. This was just duplication and i didn't feel it gave a positive user experience.

For this reason i decided to scrap the all drinks page and the search only page and combine the 2 pages into one. Now on the home page of the site users can browse all of the drinks on one single page and they also have the search functionality on this page as well.

---

2.4 - Add Drink

Users of the site who register will have the ability to add drinks to the website. The add drink button will only be visible to registered users, none registered users will not have the ability to submit drinks.

The data the site collects from each user uploading a drink is:

1. Drink name
2. Drink type (Ex: Whiskey, Vodka, Rum)
3. Ingredients necessary
4. Step by step instructions
5. Preparation time (In minutes)
6. Serves (Number of people)

---

2.5 - Edit Drink

Any user who has uploaded a drink to the site will have the ability to edit this drink at any time they wish, however they must be logged in for this edit button to be displayed (Screenshot below)

Once the user clicks on the edit drink button they will be brought to the edit drink page where all of the drinks information will appear. All this information is pre-populated with the information the user originally entered when they created the drink (Screenshot below)

---

2.6 - Delete Drink

Any user who has uploaded a drink to the site will also have the ability to delete this drink at any time, however they must be logged in for this delete button to be displayed (Screenshot below)

Once the user clicks the delete button a popup will appear and the user must confirm they do wish to delete this drink by clicking the ok button (Screenshot below)

After the user clicks the ok to delete button the drink will be deleted and the drinks database will reload. The user will also be given a confirmation that the drink has now been deleted (Screenshot below)

---

2.7 - Shop Page

I have added a shop page to the website. The majority of cocktails will require you to use specific items to make the drink correctly. Users of the site who are new to making their own cocktails may not know what these items are or where to purchase them so i have created a "Shop Now" button with a link to Amazon where users can browse full cocktail making sets that can be delivered to their door.

At the time of writing this README file (July 2021) the Amazon link is functioning normally and as intended. As the Amazon site is constantly updated this link may need adjusting, but as of the time of writing this README the link is working as normal.

The link behind the shop now button is here: https://www.amazon.co.uk/s?k=cocktail+maker+set&crid=3PU5P06BCME2Q&sprefix=cocktail%2Caps%2C187&ref=nb_sb_ss_ts-doa-p_9_8

---

2.8 - Log In

Registered users who are returning to the site will need to log in if they wish to edit any of their submitted content or to add a new drink. The login page is simple and only requires the username and password.

I have also added a redirect under the login button. This displays the message to users that if they are new to the site they need to register for an account. The link displayed here will bring them to the user register page.

When the user logs in successfully they will be brought to a welcome back landing page.

From here they can navigate around the site as normal. They can access the drinks page by clicking the home button in the navbar, or by clicking the Search Drinks button below the welcome back image.

---

2.9 - Log Out

The logout button is on display to all logged in users. Once a user clicks on logout they will be logged out of the site and get a confirmation message that their session has ended.

---

2.10 - The Footer

I have chosen a very basic footer for the website. The footer contains just the social media links and some information about the site in the sub footer. The footer is identical on each page to maintain consistency no matter what page the user finds themselves on.

---

3. Technologies/Languages Used

• 3.1 - Gitpod - Is the IDE recommended for Code Institute students and the one i chose to develop this project in.
• 3.2 - HTML5 - This is the markup language i used for this project.
  
• 3.3 - CSS - I used CSS to help alter and adjust the presentation of the website to create a pleasant user experience.
  
• 3.4 - JavaScript - JavaScript often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.
  
• 3.5 - JQuery - jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
• 3.6 - Python - Python is an interpreted high-level general-purpose programming language. Python's design philosophy emphasizes code readability with its notable use of significant indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects.
• 3.7 - Flask - Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.
• 3.8 - Mongo DB - For this project i used Mongo DB for the database.

MongoDB is a fully managed cloud based database. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. For this project all of the content is hosted on Mongo DB.

This particular project has has 3 collections in the database. All of the fields are strings and the database structure can be viewed in the screen shot below:

All of the fields in the collections have been named so they are self explanatory from their description. However for 100% clarification i have also listed them below in a bit more detail:

USERS

id = Unique user id created by Mongo DB upon registration for every user
your_name = The users full name they entered upon registration
username = The username the user creates upon registration
email = The email address the user has entered when registering
password = The password the user creates when registering
d.o.b = The users date of birth they entered when registering

DRINKS

id = Unique id assigned to each drink by Mongo DB upon the drinks creation by the user
drink_category = The main element of the drink, ex: Whiskey, Vodka, Rum
drink_name = The name the user has given to the drink when they created it
drink_ingredients = The ingredients that are used to make the drink
drink_instructions = The instructions a user needs to follow to make the drink
preperation_time = Set by the person who added the drink to let other users know how long it will take them to make the drink
serves = Set by the person who added the drink to let users know how many people the drink will serve
created_by = Lets users know who added the drink to the website. This is the exact same data as username in the users collection

CATEGORIES

id = Unique id assigned to each type of drink (Whiskey, Vodka, Rum) upon its creation. You may have 5 drinks that have the main ingredient of whiskey, however all 5 will have the same id as the main ingredient is still the same, whiskey for example.
drink_category = The main element of the drink, ex: Whiskey, Vodka, Rum. This is the same data that is also in the DRINKS collection above.

• 3.9 - Materialize - Materialize is a CSS Framework similar to Bootsrap for developing responsive websites. Materialize 1.0 is the version i used for the development of this project. I chose to use Materialize for this project because i had never used it before and wanted to see how it stacked up compared to Bootstrap.
• 3.10 - Google fonts - Launched in 2010 Google Fonts is a library of 1,023 free licensed font families. For this project i went with the google font of Nixie One.
• 3.11 - Font Awesome - Font awesome is world's most popular and easiest to use icon set. Users have access to thousands of different icons that will cover nearly every icon you are looking for and incorporating them into your website is very easy.
• 3.12 - W3schools - One of the first ports of call for any developer. It has a vast amount of content and code tutorials that will help explain how code works. A great free resource for every developer.
• 3.13 - Balsamiq - Balsamiq Wireframes is a small graphical tool to sketch out user interfaces for websites and web / desktop / mobile applications. I used Balsamiq to formulate my initial ideas for the site so i could visualize how the site would look and also be able to gage the scope of the project.
• 3.14 - Age Verify - The age verify tool is provided by Elfsight. The team over at Elfsight offer a wide range of widgets and tools for people to use on their websites and they are very easy to design and implement.
• 3.15 - Favicon - A free and simple website that allows you to create, build and customize your Favicons for your own site.
• 3.16 - I haven't listed anything here in relation to the security/logIn features that i have used. This is done intentionally as i don't want to list here the security features i used to secure peoples accounts on the site.

---

4. Testing

Testing information can be found in the testing.md file

---

5. Deployment

5.1 Deployment & Cloning

If you wish to make a local copy of this website you can do so by cloning it. The steps listed below outline how to clone your own version of this site.

1. First you must create a Database in Mongo DB. If you don't have a Mongo DB account you can open one by clicking Here
2. Once your signed up create a cluster and a database.
3. Create 3 collections in the database: users, drinks and categories.
4. The structure i used for my database on Mongo DB can be found below. You must set yours up the same way if you are looking to clone the site.

5. Now your DB is set up you can clone the repository from Github. The link to the repository which can be found on Github by clicking Here
6. You will need to follow the instructions on how to clone a Github repository, these instructions can be found by clicking Here
   

Note: In terminal when you type git clone and then paste the URL you it should look like this $ git clone https://github.com/smcgdub/MS3_Project_Tipsy_Mac_Staggers

7. Once you have downloaded all the files you will need to install the requirements for the project. You can do this by typing in your terminal pip3 install -r requirements.txt and pressing enter. All of the requirements from the txt file will now download.
8. Now you will also need to create your own env.py file and store the necessary environment variables in it. To do so securely you must:

i. Create a gitignore file in your root directory if its not already created
ii. Then create an env.py file
iii. Add the following variables to your env.py file:

• Import os
• os.environ.setdefault("IP", "enter value")
• os.environ.setdefault("PORT", "enter value")
• os.environ.setdefault("SECRET_KEY", "enter value")
• os.environ.setdefault("MONGO_URI", "enter value")
• os.environ.setdefault("MONGO_DBNAME", "enter value")

9. Add your env.py file to the gitignore file. (This is essential to ensure your confidential details will not be pushed into the public domain)
10. In your terminal type python3 app.py and press enter to run the programme.

Deployment to Heroku

Once you have completed all of the above steps its time to sync everything up to Heroku and deploy the site.

1. Create an account on Heroku if you do not have one. You can create an account by clicking Here
2. Click the new button and then click on "Create new app"

3. Enter an app name. On Heroku your app name must be unique, so you can not call it the same as mine. You must then select the region closest to you.

4. If you have already cloned the files to your Github account then the easiest way to sync to Heroku is via Github. Click on "Deploy" in the menu and then click on "Connect to Github"

5. Search for the repository name and once you've found it press the connect button.

6. Before you can click on "Enable Automatic Deploys" you must first enter the variables that are in your hidden env.py file. To do this click on "Settings" and then click on the "Reveal config vars" button

7. You will need to enter the following variables for your version of the project. The variables you will need are:

• IP Address
• PORT
• SECRET_KEY
• MONGO_URI
• MONGO_DATABASE

Add the variables (Example below):

8. Once all the hidden variables have been entered click on the deploy tab, scroll down to where you see the "Enable Automatic Deploys" button and click it (Main should be selected unless you want other branches to be deployed)

9. When the app is has been deployed by Heroku you will get a confirmation message confirming the deployment. Click the view button to view the deployed app.

---

6. Credits

6.1 Media

• Image of cocktail on the shop page
  Photo by Kaufmann Mercantile
  Image here

• Image of welcome back sign
  Photo by Nick Fewings
  Image Here

---

6.2 Code

• The HTML and CSS code i used Materialize version 1.0. The official Materialize site documentation is the best place to reference for everything you need. Materialize Documentation Here
• I used some JQuery to achieve the slideDown effect on each page load. The official JQuery website has lots of documentation. JQuery Documentation Here
• For the database i chose to use Mongo DB. The Mongo DB website has all of the official documentation that you can reference. Mongo DB Documents Here
• The code i used for the select validators on the add drink and edit drink dropdowns was found on Github. The code i used was posted by Tom Freudenberg. The Link to the code on Github can be found Here

---

6.3 Acknowledgements

• Thank you to all of the tutor team at Code Institute who were always on hand whenever i needed their support.
• A big thank you to my mentor Dick Vlaanderen who always gives me great feedback on my ideas and is able to point me in the right direction.
• A final big thank you to all of the other students, CI alumni and CI staff who were always willing to help out and advise on the official CI Slack channels.

---

7. Contact Me

If you need to reach me i can be contacted via the three methods below:

7.1 - LinkedIn
7.2 - Email
7.3 - Skype

---

8. Future Items To Develop

8.1 Search Bar

• When a user searches for a drink in the search bar, if that drink is in the database a list of those drinks will be populated. If the drink isn't in the database the user will be promoted to sign up and add that drink to the database. On both occasions the search bar will clear. On my final mentor call it was suggested that i leave the item that was searched for populated in the search bar so the user can see what they last searched for. This is a feature i may add at a later date. If i do add this i will need to code the website so that when the user clicks on the search bar to search for another drink, the searched item disappears when the user clicks on the search box. I don't want the user to have to click on the search bar, then delete what was searched for, then type in a new search item as this would be an unpleasant user experience.

8.2 Like feature on each drink

• I would also like to develop a rating feature each drink so registered and logged in users can up-vote each drink. This will allow users to see at a glance as they scroll through the drinks which drinks have the highest ratings. When this feature is added i would also like to add a search by rating feature so users can filter results not just on their search, but also on drink ratings.

8.3 Dedicated profile pages

• I will also be looking at add a profile page for every registered user. On the page i want a user to have the ability to:

1. Upload a profile picture of themselves
2. Write a short bio about themselves
3. be able to add what location (county/city) they are in
4. For people to see all of the drinks they have added ot the site on their profile page

8.4 Share drink feature

• The final feature i want to create is a share drink feature. The way i want this to work is if a user shares a drink, that particular drink will be posted to a social media site of their choice. I had tried installing a widget that has this feature and the share icons were displaying correctly, however when tested the widget was sharing the webpage and not the specific drink. I will have to look at a custom solution for this as the standard free widgets i found online do not seem to have the functionality i desire.

---

9. Disclaimer

9.1 - This website and all of its content was completed for my personal assessment and is strictly for educational purposes only.