Cocktails
About the website
This is a website where users can explore different types of cocktails, in this website if users register then can create their own cocktail, upload it to share, and if they change their mind they can edit or even delete their posts.
Users can also interact with other users in the comment sections to be able to share their ideas f and just add more interactivity throughout the website.
Target Audience
This website is designed for people that love their Cocktails, in this website they can view different types of Cocktails that have been uploaded, see the ingredients, how to make it and reviews from other website users. People that sign up can also share their passion for their favourite Cocktails, they can themselves upload and share their go to drinks on nights out!
18 and over
User Stories
- As a admin/user I can view my liked posts on a different page so that I can see which are my favourites drinks
- As a admin/user I can manage my post so that if I made a mistake and can change it and update it
- As a user I can view a post so that I can see the content of the drinks, likes and comment section
- As a user I can comment on a post so that I can be involved in the conversation
- As a user I can like and unlike a post so that interact with the content
- As a user I can save a draft so that I can finish adding my drink to the site
- As a user I can view paginated list of posts so that I can have a list of all the items and view them easily
- As a user I can create an account so that I can add drinks, like and comment on other people posts
- As a user I can see how may likes/dislikes there are for a drink so that I can see which is more popular or which is the least
- As the admin I can approve of user comments so that only positive comments are uploaded into the site, this approval will just be for posts that do not belong to the user
- As a admin I can approve which drinks are added into the website so that there is interactivity between myself and users and so that I can make sure there are not any duplicates or just mixed drinks
- As a user I can add my own drink if it isn't there already so that people will be able to explore more cocktails
Planning
Structure
Home Page
- As a first time visitor the nav bar is going to let users navigate to the 'Explore' page, 'Register' and a 'Login' page if they already have an account
- On the hero image and its text, and lower on the home page there are going to be two buttons which will let users register
- Title is LARGE and stands out, users instantly get an idea what the website is about
- The content in this page explains to users breifly what this site is about, and tries to incentivise users to sign up
NavBar -
Title
Content
Explore Page
- When users click on the 'Explore' link on the nav bar it will redirect them to explore page which will contain a list of drinks they can view
- The posts will contain the name of the drink, the main spirit that is used, who and when it was made and the number of likes it contains
- The more likes the more popular the drinks, this can help users decided which drinks to view because of its popularity
- Which ever image was uploaded by admin/user will be on the post, if there is no image then a placeholder image will be substituted.
Register Page
- When a user wants to register the will be taken to this register page, it will ask them to create a username, password and email(but that is not needed)
- This is need for the authentication so that users will be able to like, comment, add posts, edit and delete posts
Login Page
- Similar to the register page, but on this page we only require the users username and password
- Users can also be redirected to the register page from the login page
Add Drinks Page
- The drink form will require a Title, Spirit, Ingredients, Instructions, an Image if possible and Publish open for the post to be uploaded
- If users fail to fill all required fields it will not let them post anything
- Publish button only works, drafts will cause the website to break as no URL or views was set for it
- After users succesfully post a drink it will redirect them to the explore page where they can view their drink!
Favourites Page
- This page will be new for users if have JUST signed up, in order to have content here users will need to explore and like posts in order for posts to be stored here
- As you can see on the hearts it will only save the post when users have liked the drink post
Logout Page
- After users have had their fun they can click on the 'Sign out' on the navbar and be redirected to the sign out page where it will ask them again and if they confirm, it will successfully sign them out.
Admin Page
- Login in page for admin
- Administration panel
- Post panel, where admin can see all posts on webpage
- Admin selects 'Add Post' and they then get redirected to the add post page where they need to fill in all the fields like in the user form to create a post
- View comments on admin panel
- Comments need to be approved by admin in order to be on the website
![Administration page where you can check on posts and comments](/media/admin_administration_page.jpg)
![Adding post form](/media/admin_add_post.jpg)
Responsiveness
Mobile Screen
Home
Explore
Register
Sign in
Logged in Nav
Add drink
Favourite
Sign out
Features
- When a user creates and account and is logged on the register buttons and nav bar are update
- Register buttons will dissapear and on the nav bar the will get options to add drinks, check out their favourite drinks and be able to sign out
Home Page Feature
- When users have created an account and are logged on the can start adding drinks onto the website
- On the post form users will need to fill all fields on order to be able to post
- After users have added the drinks it will update and appear on the explore page
Creating posts
- When users are logged on they will be able to edit ONLY posts that THEY have created
- When the click on a post to see the post detail and 'Edit' will appear at the bottom
- When they select the edit button the will be taken to the edit page where they can change their post and select update
- If a user selects the delete button they will be taken to the delete page where they will need to CONFIRM that they want to delete their post
Edit and delete
The Batanga drinks has been removed from the 'Explore' page
- Users that have created an account will be able to like and comment on all posts
- To like a post the user just needs to click on the heart and the heart will turn black, and this post will then be stored in the favourties section of the users page
- A comment form will also be there under the post so users can leave a comment, when uses post a comment a message will appear saying that they comment needs to be approved by the admin
Like and Comment
Desktop Wireframes Wireframes
Mobile Wireframes
Data Model
The User Model - Django default User Model. We will use user (PK), Email and Password.
The Drinks Model - This will be our main model and we are going to use this to create posts, get post id, autor id to be able to select, edit and delete the correct posts. The post model contains the title, spirit, slug, author, feature_image, updated_on, created_on, ingredients, instructions, status and likes
The Post Model - The post model is derived from the drinks model, when we create our forms we will be using the post model for this
The Comment Model - The comment model will contain the post, name, email, body, created_on, approved
The Categories Model - we were suppose to use this in order to retrieve the spirit id to return a certain group of drinks but ran out of time and was not able to implement this, will be a future idea
Favourites Model - Contains post.id, user, likes, imageRelationships
User and Post model is a one to many relationship
User and favourties model is a one to many relationship between eachother
post andcomments model is a one to many relationships
Like model had a many to many field
Colours
Typegraphy
- Fonts used for this website:
- Montserrat
- Aboreto is going to be used for title and smaller heading, Helvetica as secondary font
- Montserrat for details and other descriptions, Arial as secondary font
- Roboto Slab - Spirit Names - Rum, Vodka, Gin, Sans Serif as secondary font
Colors
So the type of style I was going for was a premium looking website, so I kept it sharp and simple, black and white.
I used red for some of the buttons when hovered over and on the social links
For the post detail eveything was white and overwhelming so I decided to wrap the instructions div in a rgb(247, 242, 242)
Font Awesome Icons
Only used a few icons in this project, did not want to overwhelm users with icons all over the page, and it kept it simpe to retrieve when appending its values
A Martini glass icon is used on the websites title
The next icons are the like and comment icons, the heart fills up when a valid user likes it, next to the icons there will just be there the number of likes and comments on the post
Future Features/Ideas
- Let users be able to have a drafts section, so that if they have an unfinished post they can finis making it later
- Add virgin drinks, so that our target audience can expand so that everyone can gain benefits from this page
- Add a category filter that filters out through spirit name, if a user wants to view drinks ONLY made by rum they can filter out the drinks and only drinks made with rum will appear on the site
- Favicon, wish I got find the piece to the puzzle but ran of out time and I was not able to implement this feature
Languages
Python
HTML
CSS
Javascript
Technologies
Django
Github
Gitpod
Heroku
Stack Overflow
Balsamiq
Pep8
Cloudinary
PostgrelSQL
Bootstrap
Testing, bugs and fixed
- Testing
- Pep8 screenshots code
Admin code
Admin URLs code
Apps code
Forms code
manage.py code
Models code
Settings code - Warnings are because of the lines being too long, if I tried to indent this lines then it cause the website to break, so I am aware of these warnings and have left them so that the website does not break
Test code
URLs code
Views code
HTML validator - Only ONE warning which was because I wrapped the title of the website in a h1 tag, this was not recommended but when I tried wrapping this in anything else the title was too small and did not stand out, so I kept it as it is. Apart from that, no warnings or errors
CSS validator - One error and 6 warnings
CSS validator passing after problems solved
Manuel testing
Manuel testing was done for this project, most of them are on the feature but I will explain here what I tested
On the home page there is the nav bar and register buttons on the content of the page, I have gone through each link to make sure they are wired up. You can see this with all the screenshots I got above
A feature I want to show that I tested is the user authentication, when the user is new or is not logged in options to register will appear, but when users have logged on then they will get the extra pages 'Add drinks' and 'Favourites' and instead of 'Login' they will have 'Logout'
A message will appear confirming users that they have logged in successfully
Explore page
Tested the explore page, to see that posts will appear for users to view, posts do not have any broken images and if they do the placeholder image will appear.
From here users are able to select a post and view the posts detail, ingredients and instructions on how to prep the drink
Likes and comments at the bottom, registered users can like and leave comments, unregistered users cannot
A user that is viewing their own post will have an 'Edit' button appear for them which will redirect them to an edit page where they can update or delete their posts
Registering, Logging in and out
When logging in users will need to put the username and password they registered with
To show this works a message will appear informing the users that they have successfully logged on
Same when users log out, will be taken to the signout form to confirm the want to log out, and a message will appear when this i successful, features to like, comment, add drinks and view favourties will get revoked
Registering user works as I created the user1 user from the register form
Solved Bugs
The first bug I noticed was with the hero image, on my small screen it looked fine, but when I was going through it with my mentor the image stopped half way. After playing with the css and not using the bootstrap class img-fluid the problem was solved
Bug 2 - In this bug the images that I added pushed all the way down, causing the footer to float front of all the elements, this is not appealing to users. I styled the footer to always be at the bottom of the screen and be pushed down by the body
Bug is solved, users image will now be posted rather than the placeholder image
The last bug that I found was the footer wrapping around the div, and leaving a blank space at the bottom. Styled it so footer is at the bottom now
Unsolved Bugs
- Bug appeared when I was trying to edit from the admin page and it was asking me for an email, the email is not required, I used [email protected] as a placeholder and it passed
In this bug I cannot find out what the problem, the font is not consistent for each post, on some posts it is the Montserrat font family but for other posts it is just the Helvetica font
Issue
An incomplete issue I currently have is the draft option, when users select draft it will send it to the admin, where the admin can publish it or just leave it. A feature I would like to add is have a drafts page where the drafts will be posted to this page, where users can view their drafts, and continue editing it or delete the post
Deployment
To deploy the project to heroku we first have to set 'DEBUG = False' rather than 'True'
And we have to add 'X_FRAME_OPTIONS = "SAMEORIGIN'" Under the debug
- We will than go to the Herokuapp and go to settings and select 'Reveal Config Vars'
- Remove 'DISABLE_COLLECTSTATIC' from the config vars
- Go on 'Delpoy', scroll down and select 'Deploy Branch'
Credits
- Credits to code institutes I think therefore I blog videos, was a perfect walkthrough video to be able to get the base implemented and understanding of the project
- To my mentor Narender for helping me and giving me amazing advice, when creating the delete view I was not able to link up the URLs, he gave me the solution and allowed me to complete the project
- Stackover flow for all the advice on models, forms
- Documentation on the django website where I learnt more about forms, CreateView, UpdateView and Delete View. Also plenty of documentation on linking views and URLs.
- Finally credits to slack, I could not have done this without looking at everyones advice there, knowing that everyone got the same issues really helped me believe I was not alone struggling with this project. Plenty of documenation and explanations
Self acknowledgement
I am impressed at myself for actually getting this far, I managed to create a website that incorporates the basic CRUD functionality but I could have done better
Unfortunatly I ran out of time and was not able to create a more detailed README file as I could if I had more time. I managed to get the bare minimum but I feel like I could have done more deep testing and added more detail to screenshots giving a more detailed explanantion
My goal is to be able to write a well reported README document and manage my time better