The Bar Blade

This is a cocktail recipe site, built for bartenders, by bartenders. It's a site where users can sign in, find cocktails, add their own cocktails, and edit or delete old cocktail recipes. It is designed to be responsive on a wide range of devices, whilst also being easy to navigate through.

User Experience (UX)

Initial Discussion

I wanted to create a website linked to a database, which allows users to login, add their own cocktails, or just search and find previously added cocktails. As an ex-bartender myself, this was something I always wanted but couldn't find online.

User Stories

First Time Visitor Goals

As a first time visitor to this site, a user should be able to :

Easily navigate the site.
Intuitively and easily understand what to do.
Register for an account.
Search for a specific cocktail.
Browse through all cocktails.
Get visual feedback when an action on the site is completed.

Returning Visitor Goals

In addition to the First Time Visitor Goals, a Returning Visitor should be able to :

Log in.
Add new cocktails.
Edit and delete the user's cocktails.
See the cocktails the user has added.
Be confident that the user's password is be stored securely.
Navigate intuitively, with no need to use the browser's back button.

Admin Goals

In addition to the First Time and Returning Visitor Goals, as an administrator of this site, an admin user should be able to:

Be confident that a user can't to brute force their way into the restricted pages.
Edit or delete any cocktail recipe.
Add a new category.
Edit or delete any category.
Give or remove admin rights.

Project Goals

This project has the goal of demonstrating my understanding of maintaining a database attached to a website, with full CRUD (Create, Read, Update and Delete) functionality.

Design

Color Scheme

I decided on a very simple theme of purple and black for my color scheme.
I didn't want to distract from the content of the site, hence choosing two main colors.
These colors are very contrasting, which provides a striking visual style on the site.
I have used 3 different shades of purple to provide some contrast on the site.
All text is white, which allows the text to be easily visible on all backgrounds.
I have used other colors on buttons only:
- I have used red only for the delete buttons, to convey the button is a destructive thing.
- I have used green only for the cancel button on the delete modals, to signify a return to safety for the user.
- I have used blue only for the edit buttons, to show that it's a creative thing.

Typography

I have used a barcode-style font from Google Fonts, called Libre Barcode 128 Text, to form the logo. This has the fallback font of sans-serif.

I have used a cursive font from Google Fonts, called Dancing Script, to link with the theme of an elegant cocktail bar. This has the fallback font of cursive.

The basic font-family of Arial, Helvetica, sans-serif has been used for the rest of the text, so as to not distract the user from the content of the site. This also comes with the bonus that it's standard with HTML, so it should render on any browser and any device.

Imagery

The images used in this project are all pictures of cocktails, to match the recipes.
Icons are used where suitable to allow users to easily understand at a glance what is intended.
Unfortunately there isn't much control about what images users upload. If any inappropriate images are added, the any admin user has the ability to edit the image.

Wireframes

Features

Create, Edit and Delete a cocktail recipe.

Create and Delete a profile.

Create, Edit and Delete a category for admin users only.

Edit admin rights and Delete a user for admin users only.

Search for a specific cocktail.

Confirm to delete modal.

Auto-updating copyright year.

A link to Drink Aware in the footer, for anyone struggling with alcohol use.

Future Features

Email verification before a user can add a cocktail.
Enter user's password to delete user account.
Create an 'Add to Favourites' so users can store their favourite cocktail recipes.
Admin to approve cocktail recipe before it goes live on the site.

Audio

No audio is used in this project.

Navigation bar

The navigation bar changes depending on user status and screen size:

Nav Link	Logged Out	Logged In (User)	Logged In (Admin)
Logo (Homepage)	✅	✅	✅
Home	✅	✅	✅
Profile	❌	✅	✅
Add Cocktail	❌	✅	✅
Manage Categories	❌	❌	✅
Manage Users	❌	❌	✅
Log Out	❌	✅	✅
Log In	✅	❌	❌
Register	✅	❌	❌

Logged in

Logged out

An admin

On small screen sizes

Database Design

MongoDB was used to store data for this site in a database. The data has been set out in three collections, which are described below:

Users
_id	ObjectId
username	string
password	string
is_admin	boolean

Recipes
_id	ObjectId
category_id	ObjectId	categories._id
recipe_name	string
recipe_list	array
method	string
recipe_img	string
recipe_alt	string
user_id	ObjectId	users._id

Categories
_id	ObjectId
category_name	string

The Recipes collection references both the Categories collection and the Users collection, using the ObjectId from the relevant fields to ensure that they automatically update if changes are made.

Technologies Used

Languages Used

Workspace

GitPod:

GitPod was used as a virtual IDE workspace to build this site.

Version Control

Git:

Git was used for version control by utilizing the Gitpod terminal to add and commit to Git and push to GitHub.

GitHub:

GitHub is used to store the code for this project after being pushed from Git.

Wireframing

Balsamiq:

Balsamiq was used to create the wireframes during the design process.

Responsive Design

Am I Responsive Design:

Am I Responsive Design was used to check the responsive design of the site, and to create the final site image.

Responsinator:

Responsinator was used to help improve the responsive design on a variety of devices.

Documentation

Shields.io:

Shields.io was used to create the GitHub badges for the top of this README.md file.

Site Design

Font Awesome:

Font Awesome was used on all pages to add the icons.

Google Fonts:

Google Fonts was used to select all the fonts on the site.

Favicon.io:

favicon.io used to create a site favicon.

Imgur:

Imgur was used to host images to add to each cocktail recipe.

Database Design

MongoDB:

MongoDB was used to store the contents of the database, and allow full CRUD functionality.

Flask-PyMongo:

Flask-PyMongo was used to connect my Python / Flask app to MongoDB.

Frameworks, Libraries and Others

Heroku:

Heroku was used to deploy the live site initially.

Render:

Render was used to deploy the live site after submission.

Google DevTools:

Google DevTools was used to help find what code correlated to which feature.

Lighthouse:

Lighthouse was used to ensure that the code was as performant as possible, confirming to best practices, and SEO and Accessibility guidelines.

Flask:

Flask was used to help create the templating for this site.

Materialize:

Materialize was used to create a beautiful, responsive website.

jQuery:

jQuery was used to make the DOM traversal easier within the JavaScript.

Jinja:

Jinja was used to auto-populate the site with the contents of the database.

RandomKeygen:

RandomKeygen was used to generate a strong SECRET_KEY.

Flask-paginate:

Flask-paginate was used to add pagination to the homepage.

pip:

pip was used to install the required dependancies for this site.

dnspython:

dnspython was used to provide access to DNS.

Deployment

Requirements for Deployment

Python
MongoDB account and database
GitHub account
Heroku account / Render account

Initial Deployment

MONGO_DBNAME - This is the name of the database you need to connect to in MongoDB.

MONGO_URI - This can be found on the MongoDB website by following these steps: * In the clusters tab of your database, click connect on the associated cluster. * Click 'Connect', then 'Connect your application'. * Copy the string, then substitute the password (from Database access NOT your MongoDB password) and change "myFirstDatabase" to your MONGO_DBNAME.

SECRET_KEY - This is a custom string set up to keep sessions secure. I recommend using a 'Fork Knox' level password generated by RandomKeygen.

To deploy to Heroku:

This site was deployed to Heroku by following these steps:

Heroku needs to be told what the requirements are for this project, so go into your GitPod terminal, and create files to explain the requirements by using the following commands:
- pip3 freeze --local > requirements.txt
- echo web: python run.py > Procfile - Ensure there is no blank line after the contents of this file
Push these changes to your repository.
Ensure you have a .gitignore file in your repository, and if not, create one.
Add env.py and __pycache__/ into your .gitignore file, and save the file. This is to avoid any sensitive information being added into your repository.
Create an env.py file, and add the following information to it, updating the '## x ##' values with your own values:

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", " ## YOUR SECRET_KEY ## ")
os.environ.setdefault("MONGO_URI", " ## YOUR MONGO_URI ## ")
os.environ.setdefault("MONGO_DB", " ## YOUR MONGO_DBNAME ## ")

Login or sign up to Heroku.
Select 'Create New App' in the top right of your dashboard.
Choose a unique app name, and select the region closest to you, before clicking 'Create App'.
Go to the 'Deploy' tab, find 'Deployment Method' and select 'GitHub'.
Search to find your GitHub repository, and click 'Connect'. Don't enable automatic deployment yet, as this can cause errors.
Go to the 'Settings' tab, find 'Config Vars', and click 'Reveal Config Vars'.
Enter key value pairs that match those in your env.py file, displayed like this :

Key	Value
IP	0.0.0.0
PORT	5000
MONGO_DBNAME	## YOUR DATABASE NAME ##
MONGO_URI	## YOUR MONGO_URI ##
SECRET_KEY	## YOUR SECRET_KEY ##

Go to the 'Deploy' tab, and click 'Enable Automatic Deployment'.
In 'Manual Deploy', choose which branch you'd like to deploy from (I chose 'master' branch, this is also known as 'main').
Click 'Deploy Branch' to deploy your app onto the Heroku servers.
Once the app has finished building, click 'Open App' to open your site.

To deploy to Render:

This site was deployed to Render by following these steps:

Render needs to be told what the requirements are for this project, so go into your GitPod terminal, and create files to explain the requirements by using the following commands:
- pip3 freeze --local > requirements.txt
- echo web: python run.py > Procfile - Ensure there is no blank line after the contents of this file
Push these changes to your repository.
Ensure you have a .gitignore file in your repository, and if not, create one.
Add env.py and __pycache__/ into your .gitignore file, and save the file. This is to avoid any sensitive information being added into your repository.
Create an env.py file, and add the following information to it, updating the '## x ##' values with your own values:

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", " ## YOUR SECRET_KEY ## ")
os.environ.setdefault("MONGO_URI", " ## YOUR MONGO_URI ## ")
os.environ.setdefault("MONGO_DB", " ## YOUR MONGO_DBNAME ## ")

Login or sign up to Render.
Select 'New' in the top right of your dashboard, and select 'Web Service'.
Search for your repo, and click 'Connect'.
Enter a unique name for your web service (ideally the project name).
Use the following settings:

Setting Name	Value
Root Directory	{blank}
Environment	Python 3
Region	Frankfurt (EU Central)
Branch	main

Set the 'Build Command' to pip install -r requirements.txt.
Set the 'Start Command' to python app.py.
Select the 'Free plan $0/month'.
Click 'Advanced', then 'Add Secret File'.
Copy and paste the content of your env.py file into the 'File Contents' section.
Set the 'Filename' to env.py, and click 'Save'.
Select whether you want the repo to auto-deploy or not.
Click 'Create web service'.
Wait for this to deploy.
Click the link at the top of the page displaying your new URL to take you to the deployed site.

How to Fork it

Login or Sign Up to GitHub.
On GitHub, go to Abibubble/ms3-the-bar-blade.
In the top right, click "Fork".
You will need to create an env.py file with your own values, and create a MongoDB database with the data keys and types as shown above.
You will also need to install all of the project requirements. This can be done using the command pip3 install -r requirements.txt.
Type python3 app.py in your GitPod terminal to run your local site of this project.

Making a Local Clone

Log in to GitHub and locate the Repository for this site.
Under the repository name, above the list of files, click "Code".
Here you can either Clone or Download the repository.
You should clone the repository using HTTPS, clicking on the icon to copy the link.
Open Git Bash.
Change the current working directory to the new location, where you want the cloned directory to be.
Type git clone, and then paste the URL that was copied in Step 4.
Press Enter, and your local clone will be created.
You will need to create an env.py file with your own values, and create a MongoDB database with the data keys and types as shown above.
You will also need to install all of the project requirements. This can be done using the command pip3 install -r requirements.txt.
Type python3 app.py in your GitPod terminal to run your local site of this project.

For a more detailed version of these steps, go to the Github Docs page on this topic.

Testing

W3C Validator

The W3C Markup Validator, W3C CSS Validator, JSHint were used to validate the project to ensure there were no syntax errors within the site.

W3C HTML Markup Validator
- Homepage
- Register
- Log In
- Unfortunately, as it's not possible to log in using the Validator, it was only possible to test the 3 pages available to a user who isn't logged in.
W3C CSS Validator
- Homepage
- Register
- Log In
- Unfortunately, as it's not possible to log in using the Validator, it was only possible to test the 3 pages available to a user who isn't logged in.
- There is only one error appearing, which is from the Materialize CSS file.
- There are several warnings, mostly from the Materialize CSS file, but also three related to my purple variables. As these variables are acceptable CSS syntax, I've considered them to be not an error.
JSHint
- JSHint
- There is one undefined variable, which is due to the jQuery $.
- There are three unused variables, which are used in onclick functions in my HTML.

PEP8 Online
- PEP8 Online