Your expert cocktail guide, featuring hand-selected cocktail recipes.
Find great new drinks to try plus helpful tips and advice.
Contents
Introduction
Project Milestone 4 for Code Institute Full-stack development program. Cocktail Nerd - is a full stack Django project that runs on Heroku.
The site allows staff users to edit posts, categories and comments from the frontend once logged in & registered users can login to comment,like & rate cocktail recipes.
Live Site
A live version of the site can be found HERE
User Experience - UX
User Stories
- As a website user, I can:
- Navigate around the site and easily view the desired content.
- View a list of cocktail recipes and choose accordingly.
- Search cocktail recipes to find specific recipes.
- Click on post to read the cocktail recipe details.
- Register for an account to like, rate or comment on a cocktail recipe.
- View the number of likes on a cocktail recipe.
- View comments on cocktail recipes so that I can read other users opinions.
- As an authenticated website user, I can:
- Like/unlike cocktail recipes and view my liked cocktail recipes on a single liked cocktails page.
- Comment on cocktail recipes and give my opinion about the posts.
- Delete or edit my previous comments.
- Manage my profile by updating my details and avatar.
- As a website staffuser, I can:
- Create and publish a new cocktail recipe.
- Create draft recipe posts that can be reviewed and finalised later.
- Create new cocktail recipes and cocktail categories.
- Edit cocktail recipes, cocktail categories and comments.
- Delete cocktail recipes, cocktail categories and comments.
- As a website superuser, I can:
- Create and publish a new cocktail recipe.
- Create draft recipe posts that can be reviewed and finalised later.
- Create a new user, cocktail recipes and cocktail categories.
- Edit cocktail recipes, cocktail categories and comments.
- Delete a user, cocktail recipes, cocktail categories and comments.
- Approve user's comments.
- Change the website permissions for a user.
Agile Methodology
The Agile Methodology was used to plan this project. This was implemented through Github and the Project Board which can be seen here - Cocktail Nerd User Stories
Through the use of the Kanban board in the projects view in Github, the project was divived into a few different sections:
- Addons
- Todo
- In Progress
- Done
Github issues were used to create User Stories and any other fixes or updates for the project. This was where the project user was assigned, labels were added to provide clarity, and the story was added to the appropriate sprint and the project. Each User Story, Fix or Update had a clear title.
Milestones were used to create sprints. There were 3 sprints each dated appropriately. User Stories were completed based on the current sprint in progress. Each sprint was completed on time.
3 enhancement features were not completed and left as Future Features for further development.
The Github issues were not just used to record User Stories but also used to record any bug fixes or updates to the codebase as well.
The Scope
- To provide users with a good clean experience when using the Cocktail Nerd website.
- To provide users with a visually pleasing website that is intuitive to use and easy to navigate.
- To provide a website with a clear purpose.
- To provide role-based permissions that allows user to interact with the website example: like, comment or rate a cocktail.
- To provide search functionality to find cocktails on the Cocktail Nerd site.
Design
Colours
- I decided to stick with the high contrast Bootstrap 5 colour palette to maintain a nice visual contrast when viewing the site
Typography
- Utilised the Bootstrap 5 native font stack that selects the best font-family for each OS and device.
Media
-
All cocktail recipes are from Liqour.com
-
All page header images are from Unsplash
-
The logo and favicon are designed by me in Sketch
Database Diagram
Wireframes
Initial Wireframes
Features
Homepage
- The Home Page is the landing page of the website and that's visible first when the site loads. It is designed to allow the user to quickly find their way around the site. The homepage displays the latest 6 featured cocktails.
Navigation Desktop
-
The site navigation is done through the navigation bar at the top of each page & this is consistant throughout the website.
-
The navigation bar at the top of each page is sticky to allow access to the navigation at any time.
-
Options on the navigation bar change depending on whether the user is logged in or not, or is an admin/staffuser or not.
-
Navigation menu when nobody is logged in only options are login or sign-up.
-
Navigation menu when regular authenticated user is logged in no access to Admin or Dashboard menu.
-
Navigation menu when staffuser user is logged in has access to the Admin menu but not the Dashboard menu.
-
Navigation menu when admin user is logged in has access to the Admin menu & the Dashboard menu.
Navigation Mobile
- Navigation menu when nobody is logged in only options are login or sign-up.
- Navigation menu when regular authenticated user is logged in no access to Admin or Dashboard menu.
- Navigation menu when staffuser user is logged in has access to the Admin menu but not the Dashboard menu.
- Navigation menu when admin user is logged in has access to the Admin menu & the Dashboard menu.
Cocktail Recipe Details
-
When an authenticated user is logged in they can like, comment and rate a cocktail on the post detail page. If rated the user will see a notification of the rate given.
-
If a comment is submitted this will have to be approved by an Admin user before it is displayed on the site
Cocktail Recipe Sidebar
- When in a cocktail details page the sidebar will display all Spirit category links and will display the latest 6 featured cocktails which can be added to by clicking the featured check box on the post edit screen
Liked Cocktails
- When an authenticated user likes a cocktail this will be added to their liked posts page which can be accessed by clicking on the heart icon on the navbar.
All Cocktails
- To see all cocktails on a paginated page click the cocktails menu or button on the homepage
All Spirit Categories
- To see all the spirit categories on a paginated page click the Spirits menu in the navbar
Filter Cocktails by Spirit Category
- To filter all cocktails by spirit on a paginated page click the by Spirit menu in the navbar and select the spirit category
- All cocktails by spirit category this one displays all the Whiskey Cocktails
Search Results
-
Enter a search word in the search box and click enter the search results will be displayed on the search results page
-
The search is performed on the Title & the Ingredients fields
Admin on the Frontend
-
Superusers or staffusers are able to magae the posts and actegories on the frontend by selecting the Post Mgt or Category Mgt link from the Admin dropdown menu.
-
This brings you to the Post Mgt & Categoy Mgt pages where posts can be edited or deleted.
Possible Future Features
-
Social login to allow the user to signup using Facebook or Google
-
Password reset on the users profile page
-
Allowing users to post their own cocktail recipes
Technologies
Throughout the planning, design, testing and deployment of the Cocktail Nerd Website , I have used a number of technologies listed below:
Languages Used
Django Packages Used
- Gunicorn
As the server for Heroku - Cloudinary
Was used to host the static files and media - Dj_database_url
To parse the database URL from the environment variables in Heroku - Psycopg2
As an adaptor for Python and PostgreSQL databases - Summernote
As a text editor - Allauth
For authentication, registration, account management - Crispy Forms
To style the forms - Whitenoise
For static CSS on Heroku - Django Star Ratings
For rating system on Cocktail Nerd - PyTest
For automated functional testing with Selenium - Selenium
For automated functional testing
Frameworks - Libraries - Programs Used
- Bootstrap
Was used to style the website, add responsiveness and interactivity - Jquery
All the scripts were written using jquery library - Git
Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub - GitHub
GitHub is used to store the project's code after being pushed from Git - Heroku
Heroku was used to deploy the live project - PostgreSQL
Database used through heroku. - VSCode
VSCode was used to create and edit the website - Lucidchart
Lucidchart was used to create the database diagram - PEP8
PEP8 was used to validate all the Python code - W3C - HTML
W3C- HTML was used to validate all the HTML code - W3C - CSS
W3C - CSS was used to validate the CSS code - Fontawesome
To add icons to the website - Google Chrome Dev Tools
To check App responsiveness and debugging - Balsamiq
To build the wireframes for the project - Adobe Photoshop
To convert the images to webp format - Sketch
To build the logo and icon for the project - Tables Generator
To build the tables in the readme.md file
Development & Testing
Automated Testing Results
- Automated Testing results here
Functional Automated Testing Results
- Functional Automated Testing results here
Manual Testing Results
- Manual Testing results here
Deployment
This project was created on GitHub and Edited in GitPod by carrying out the following:
- A new repository was created using 'Code-Instutute-Org/python-essentials-template'
- A meaningful name was given to my new repository and I selected 'Create Repository'
- I then opened the repository on GitHub and clicked the 'Gitpod' button to build the GitPod workspace which would allow me to build and edit the code used to make the Cocktail Nerd website.
- Version control was used throughout the project using the following commands in the terminal using Bash
- git add . OR git add "file name" - to stage the changes and get them ready for being committed to the local repo.
- git commit -m "Description of the update" - to save the change and commit the change to the local repo
- git push - to push all committed changes to the GitHub
- commit --amend - for changing the wording or spelling of the most recent commit
- git reset "commit hash"
- git push -f - This was used to force changes through to the GitHub repo if either "commit --amend" or "git reset" were used
## Heroku
The project was deployed via Heroku, and the live link can be found here: Cocktail Nerd
This project was developed utilising the Code Institute Template. Some of the deployment steps below are specifically required for the new CI template and may not be applicable to older versions, or different projects.
Before deploying to Heroku pip3 freeze > requirements.txt was used to add all dependencies for deployment and created the Procfile with web: gunicorn cocktailnerd.wsgi.
Created .slugignore with /documentation, README.md & TESTING.md as paths to ignore in Heroku as I don't want the documentation to upload to Heroku.
This project was deployed to Heroku using the Heroku CLI details below
* Login
To use the CLI you must log in to your Heroku account. To do this you will need to
enter the command heroku login -i in the terminal. It requires the email and
password you used to sign up. If you have enabled multi-factor authentication (a
recommended security practice) then instead of your password you need an API key.
To get the API key go to your account settings and scroll down to the section ‘API
Key’. Click reveal and copy that, then paste it into the password prompt.
- Log in to your GitHub account
- Navigate to the repository HERE
- Select the 'Fork' button in the top right corner of the page (under your account image)
- The repo has now been copied into your own repos and you can work on it in your chosen IDE
- If you have any suggestions to make regards to the code to make the site better, you can put in a pull request
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Ensure HTTPS is selected and click the clipboard on the right of the URL to copy it
- Open a new workspace in GitPod
- In the bash terminal type 'git clone [copy url here from step 4]'
- Press enter - the IDE will clone and download the repo
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Select 'Open with GitHub Desktop'
- If you haven't already installed GitHub desktop application - you will need to follow the relevant steps to do this
- The repo will then be copied locally onto your machine
- Log in to your GitHub account
- Navigate to the Repository HERE
- Select the 'Code' button above the file list on the right had side
- Select 'Download Zip'
- Once you have the Zip downloaded, open it with your prefered file decompression software
- You can then drag and drop the files from the folder into your chosen IDE or view/edit them on your local machine
- If you want to create a web-app from the repo please follow the instructions in "Project Deployment"
* Creating A Heroku App Now that you are logged in, the first thing is to create a new app. Heroku creates a URL based on your app name, so it must be unique not only on your account, but across the whole site. You may need to try a few different names. To create an app use the following command, where myapp is the name of your app.
* Here the app heroku-cli-example has been created with an output of the website URL. It also displays and sets the git remote repository which will be used to deploy. By default the region will be set to the US. If you would prefer a server based in the EU then you can specify the region with the flag EU * When you push code to Heroku it will look at the repository contents to decide how to build the project. One of the factors taken into consideration is the package file. With a Python project the standard file is a requirements.txt file, which will have the list of packages needed to run the project. If this file is present it will build the project using the Python buildpack. * It is also possible to specify the buildpack manually. More information about buildpacks can be found in the documentation. To check the buildpack for the project you can enter heroku buildpacks in the terminal. ## Deployment Steps On Heroku. * Run this command pip3 install pip3 install 'django<4' to install django. * Added these libraries:pip3 install dj_database_url psycopg2,pip3 install dj3-cloudinary-storage * Created requirements.txt file where I can save all the libraries I've installed:pip3 freeze --local > requirements.txt * To create my project typed this command:django-admin startproject cocktailnerd * To create my app:python3 manage.py startapp cocktailapp * To make this app work, Into the setting.py file inside INSTALLED_APPS added cocktailapp * To migrate changes typed this command:python3 manage.py migrate * To run the test if the project is working python3 manage.py runserver * When deploying for the first time on Heroku, you must first register with Heroku. * Create your project name and location. * To add Database into the app, Locate in the Resources Tab, Add-ons, search and add 'Heroku Postgres' * Copy DATABASE_URL value, by going into the Settings Tab, click reveal Config Vars, Copy Text * In your workspace Create new env.py file. * Import os library:import os * Set environment variables:os.environ["DATABASE_URL"] = "Heroku DATABASE_URL" * Add in secret key:os.environ["SECRET_KEY"] = "mysecretkey" * Add Secret Key to Config Vars in Heroku settings:SECRET_KEY, "mysecretkey" * Add env.py file to the settings.py file:import osimport dj_database_urlif os.path.isfile("env.py"):import env * Remove the insecure secret key and replace - links to the SECRET_KEY variable on Heroku:SECRET_KEY = os.environ.get('SECRET_KEY') * Comment out the old DATABASES variable in setting.py file and add this instead:DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))} * Save all files and Make Migrations:python3 manage.py migrate * Make account with Cloudinary To get static and media files. * From Cloudinary Dashboard, Copy your CLOUDINARY_URL: * Add Cloudinary URL to env.py file:os.environ["CLOUDINARY_URL"] = "cloudinary://************************" * Add Cloudinary URL to Heroku Config Vars:"cloudinary://************************" * Temporalliy add DISABLE_COLLECTSTATIC inside the heroku config Vars:DISABLE_COLLECTSTATIC, 1 * Add Cloudinary Libraries to settings.py installed apps:INSTALLED_APPS = ['cloudinary_storage', 'django.contrib.staticfiles', 'cloudinary'] * In the settings.py file under the STATIC_URL = 'static/' add: ```python STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ] STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') ``` * Place under the BASE_DIR line in settings.py:TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates') * Change the templates directory to TEMPLATES_DIR Place within the TEMPLATES array:TEMPLATES = [{'DIRS': [TEMPLATES_DIR],],},},] * Add Heroku Hostname to ALLOWED_HOSTS:ALLOWED_HOSTS = ["project4-cocktail-nerd.herokuapp.com", "localhost"] * Create 3 new folders on the root directory: media, static, templates * Create Procfile needed for Heroku on the root directory and inside the file add this:web: gunicorn dentist.wsgi * Before deploying on heroku make sure: DEBUG = False Remove DISABLE_COLLECTSTATIC from the config vars. * Created .slugignore with /documentation, README.md & TESTING.md as I don't want the documentation to upload to Heroku. * Click **Enable Automatic Deploys** for automatic deployment when you push updates to Github. * Select the correct branch for deployment from the drop-down menu and click **Deploy Branch** for manual deployment. ### Github Local Deployment There are many ways to deploy the project locally on your own device. Forking, Cloning, GitHub Desktop and Zip Exctraction, the steps in these processes are outlined below: ### Forking the GitHub repo If you want to make changes to the repo without affecting it, you can make a copy of it by 'Forking' it. This will make sure that the original repo remains unchanged.