Best beer

Are you a beer lover?
Would you like to know what people are saying about a beer that you are eager to buy?
Would you like to have your review list of all beers you have already tasted in your life?
This App is for you!
On Best beer, you can add a review about your favourite beers or research about beers that you are curious to taste!!
Check it out!
Cheers!

Live app link here

User Experience

User Stories

1. As a user, I would like to be able to …

   1.1 Register on the website using my username, email and password;

   1.2. View all beer reviews added on the website;

   1.3 View beer review details about all added beers.

   1.4 View for a beer or beer style on the navbar.

2. As a logged user, I would like to be able to …

   2.1 Create a beer review of my favourite beers, including :

   • Beer Name,
   • Beer Style,
   • My thoughts about the beer,
   • Beer bitterness level,
   • Beer money and value ratio, and
   • Overall beer rating;

   2.2 Create a new beer or beer style if my beer or beer style is not added to the Database;

   2.3 Check my beer review after added;

   2.4 Edit or delete my beer reviews.

1. Strategy

• Project Goal

Create a platform that allows people (users) to evaluate beer and share their thoughts in beer reviews.

2. Scope

• A simple, straightforward, intuitive UX experience;
• an explicit content;
• An easy navigation for the user through all the features;
• A site that is visually appealing on most devices.

Functional Scope

Best Beer Flowchart

Best Beer DER - Diagram Entity Relationship

Agile Methodology

All functionality and development of this project were managed using Jira (https://bestbeer.atlassian.net)

• Credentials to this management tool will be provided during submission.

All sprints are described here.

Test cases were linked with every User story presented above, and can be found in TESTING.md(TESTING.md) - Automated testing section.

• Sprint 1

  • Setup Django
  • Heroku Deployment

• Sprint 2

  • Create User Profile
  • Create Register Page
  • Create Login Page

• Sprint 3

  • Create Add Review
  • Upload an image on beer review
  • Add rating beer feature

• Sprint 4

  • Create a beer style

• Sprint 5

  • Create a search by beer style

• Sprint 6

  • Create a search by beer name

• Sprint 7

  • Create and manage final user tests

3. Structure

• A clear and straightforward layout is in place to ensure users can navigate intuitively and have a leisurely experience.
• Navbar is fixed on top to facilitate users to navigate through pages easily. Small navigation is the same on all pages to ensure easy navigation.
• Add, Edit and Update Review are straightforward forms to allow users to use the features without issues.

4. Skeleton

Wireframes created with Balsamiq. The project was developed from initial wireframes, and some modifications were made during the development process in respose to user feedbacks and to assure the best usability.

Click to see wireframes:

HomePage
Add Review Page
Review Page
Login and Register Pages

• Add Review Page Wireframe was used in Update review Page development.
• Review Page Wireframe was also used on Searching pages design.

5. Surface

• Colours

The Colour scheme was generated using the eyedropper plugin to get one colour from the logo image and colours to create the colour palette.

• Font Selection

Two complimentary fonts were chosen with Google Fonts to be used across the website.

The chosen fonts were Lobster for headings and navbar and Open Sans for lists, buttons and paragraphs.

Existing Features

Navbar

• Fixed Navbar allow the user easy access to all pages.

1. Login and Register User buttons are present on the navbar if the user is not logged.

2. Logout and Rate your beer buttons are present if the user is logged.

3. Beer reviews and search beer by name and style are present to all users (logged or not).

4. User can search their prefered beer by name or style on the navbar.

   i. Beer style has a dropdown menu with all styles registered;

   ii. On the Beer name search, users can add just a few letters to find their prefered beer.

   

   iii. If there is no review for searched beer or style, the user is informed about it.

   iv. If any review is found on the Database, the user is redirected to a page with all reviews for that style or beer name. (Details about it on Beer style and Beer reviews page)

5. Collapsed navbar on smaller devices to wrap in all options and assure better navbar design.

Beer review page

1. On this page, users can access beer reviews available on the website ordered by decreasing the publication date.

2. Each review card contains beer name, style, image, the preview of beer review (fully available on beer detail page), bitterness and money-value level, beer rating, author and publication date.

• The entire card is a link to the beer review details page.

• When beer name and beer style are length, should apply a truncate class. The full names can be seen on the beer review details page.

Beer review detail page

1. On this page, users can access the entire content for a beer review.

1.1 If the reviews on this page were made for the user accessing it, two buttons became available:

i. Edit Review (highlighted on green)

ii. Delete Review (highlighted on red)

Update Review Page

1. On this page, a logged user can change a review made by them. All fields are already populated, allowing the user to see which information they would like to change.
2. The back button redirect the user to the previous page without changes on review.

Delete Review Page

1. If users click to delete a review, they will be redirected to a deleted page to confirm the deletion or cancel it.

Beer Style and Beer Categories Pages

1. After searcher a beer by its style on the navbar, the user is redirected to this page where they can find all reviews related to the search.

1.1 Beer Style search example:

1.2 Beer search example:

2. If no review is available, a message will be in place to inform it and suggest the first review.

Future Features

I would like to ...

1. Add an infinite carousel to present beer reviews on the reviews list webpage;
2. Create a random image database to be added on the post if the user doesn't add a beer image on their review;
3. Add a beer style JSON database on Beer style form;
4. Add a beer JSON database on Beer Form;
5. Include icon rating for bitterness and money value field on add_review page;
6. Include Brewery Name on beer review;
7. Include a user profile page with all beer reviews made by them.

Languages Used

Python 3.0

Frameworks, Libraries & Programs Used

• Balsamiq: Balsamiq was used to create the wireframes during the design process.
• Favicon Generator: Used to create favicon used on the website.
• Font Awesome: Font Awesome was used on all pages to add icons for aesthetic and UX purposes.
• Grammarly: Used to correct any spell mistakes on readme and app text.
• 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.
• Google Fonts: Google fonts are used to add fonts for aesthetic and UX purposes.
• Django: Framework used to add structure to the platform.
• PGAdmin: Used to administer Database and generate DER.
• Multi Device Website Mockup Generator: Used to generate mockup image.

Testing and Code validation

All testing and code validation details are described in a separate file called TESTING.md and can be found here.

Project Bugs and Solutions:

Deployment

This App is deployed using Heroku.

Credits

Media

• All pictures and images used in this project are from Depositphotos.

Work based on other code

Codemy - Used as a base to develop several features like login, registration and beer review form.
Pyplane - Star rating tutorial used to develop beer rating feature.
Tutorials Point - Used to add different django forms on same add review page.

Acknowledgements

• Stack Overflow is a valuable resource for solving lots of issues.
• W3schools and Django documentation for general reference.

I would also like to thank:

• My husband Guilherme for all the support on stressful moments, helping to figure out lots of bugs and for reviewing everything.
• Code institute tutors, and CI Mentor Miguel Martinez and my CI Mentor Daisy Mcgirr for the guidance and help with several issues and bugs.