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.

Live Site

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

NavBar -

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

Title is LARGE and stands out, users instantly get an idea what the website is about

Content

The content in this page explains to users breifly what this site is about, and tries to incentivise users to sign up

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.

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

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

Administration panel

Administration page where you can check on posts and comments

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

Responsiveness

Mobile Screen

Home

Explore

Register

Sign in

Logged in Nav

Add drink

Favourite

Sign out

Features

Home Page Feature

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

Creating posts

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

Edit and delete

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

The Batanga drinks has been removed from the 'Explore' page

Like and Comment

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

Wireframes

Desktop 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, image

Relationships

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

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

code-institute-submissions / pp4-full-stack_toolkit Goto Github PK

pp4-full-stack_toolkit's Introduction