search

vivignutz / berlin_bestbeers

4th Portfolio Project of Code Institute: A blog with the best beer bars in Berlin!
0 stars 2 forks source link

readme

Berlin Bestbeers - A beer map of Berlin

As my fourth portfolio project (PP4) with Code Institute, I created a website with a blog application in Django, which was built for people who enjoy craft beer. It is targeted towards people who want to find craft beer bars around Berlin, Germany. The purpose of this webpage is to allow users to participate posting their experiences on craft beer bars, upload fotos, comment and like on other posts.

View the live project here.

Responsive_Design_in_all_gadgets

Index – Table of Contents

User Experience (UX)

Project Goals:

The main goal of this project is to design a blog for craft beer enthusiasts living in or travelling through Berlin, Germany. This website should allow a CRUD functionality, where each user can register an account, login into that, logout, create his/her own visits to craft beer bars around the city, as well as read, comment, update and delete posts and comments, without the need for an administrator to be present. The user should have full control over his own posts and comments.

Strategy used:

The Agile methodology was used to organize and plan this project, with assistance from the Kanban board on GitHub Project.

As a starting point for the organization of this project, 5 EPICS were created, and within them, 27 tasks were mixed between USER and/or ADMIN Stories.

Each task or story was designed to meet the blog user's needs, and labels were inserted to help to prioritize each task. 22 User Stories were concluded, working on this project and the remaining 5 were left to be implemented in the future.

Below is the construction of the project labels:

Kanban_View

The new issues created to resubmit:

New_Issues

Agile workflow

To this project, an agile workflow approach was used in the entire development. Some key ideas were adopted:

User stories:

Features

Installed Features

Navigation bar:

The navigantion bar was built with bootstrap's built-in class fixed-top, so that is fixed on the top. When the page is scrolled by the user, the navigation bar stays fixed ont the top of the browser, and always visible to the user.

The logo was designed with Canva and is on the left of the navigation bar, close to the name of the site (Bestbeers). The logo is hyperlinked to the homepage of the site, and the font used was Poppins with font-family Roboto, used to the entire website. The Font Awesome was implemented into the base.hmtl.

The navigation items appear according to the user status. If logged in, the user can see the Home / Blog / Bars List / Add a Post / Logout / Username. This last includes a Font Awesome icon (fas fa-user):

Navbar

Otherwise, the following items will appear: Home / Blog / Bars List / Register / Login:

For small devices the navbar is collapsed into a "hamburger menu", and turns to a fully responsive navigation bar. Here the example for the navbar tested on iPhone 8 Plus viewport:

Navbar_Mobile

Home page:

Home page - Hero section:

The hero section is the first section of the home page that follows the navigation bar. It includes a background image featuring the yellow part of a beer and its "bubbles".

The background image uses background attachment fixed on large screen sizes to give a nice effect when the page is scrolled.

Hero_section

A large text overlay of this background image is the name of the website ("Bestbeers") wrote in red in h1 and the location of that (Berlin, Germany) in h2. Underneath the overlayed text there is a button which redirects the users to the following:

The hero image shows clearly to all first time users that that is a beer lovers blog.

Hero image mobile devices: mobile phone and iPad: Hero_small Hero_ipad
Home page - Info section:

Below the Hero section is the Info section, a container styled with help of Font Awesome icons (3), designed to show the user a greater complicity with those who appreciate beers. Different colours and format were styled around the icons. This section gives to users a complete idea about the website's purpose, and how this bar guide works.

Info_section

The circle around each icon was styled to get a different style (border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;) When open the blog on smaller devices the number of icons reduces to only one - the middle positioned ones.

Home page - Posts section:

Still at the home page, underneath the Info section, the user can see the last 6 most recent posts of other users. This provided a quickly view of all updates done recently.

This section was built with Bootstrap grid scheme, in which consists of three columns and two rows of posts, totaling 6 posts. All posts includes:

Home_page_posts

By clicking on a post, the user is redirected to the post detail page for that post.

Blog

The Blog is similar to the home page, also in reverse order of creation, i.e. from the most up-to-date to the last up-to-date, totaling 12 posts in each page. This posts are being paginated, and this Bars List can easily be accessed using the navigation bar link for all users, registered or not.

The Blog page has the same grid Scheme as the Home Page, but contains 12 posts in each page and the pagination in the end of the page. The Hero image and the Info section don't appear in this list to make it more compact and in let it on a list format. For small screens (mobile) the view changes to one post after another and the user has to scroll the screen post to post.

Blog_small_screens Blog_large_screens

Bars List

The Bars List is a list of all bars posted, but without some informations like excerpt and content. Basically contains the name of the bar, the author, number of comments and likes and the social media icons as a form of contact to the user. This posts are also being paginated, and this Bars List can easily be accessed using the navigation bar link for all users, registered or not.

This list gives to users the option to have more easily access to a list of all bars posted, and contact them through the social media. By clicking on a bar, the user will be redirected to the post detail page for that post.

Bars_List

Bars_List_Mobile

Register function:

All users can register theirselves to start to interact with the website and/or other users. To access the registration mode, the user have two ways:

To create an user account, an username, a password and an optional email registration has to be provided.

Bars_List

From now this user has fully access to the entire website and its features for users. If the user clicks on "Login" button button by mistake, the also can access the Register link at the Login page.

Login page:

The website can be accessed from all users. But to get the fully interactivity (CRUD) to posts to whom is registered and logged in, and this user can post bars, comment in other's post, like and dislike.

The Login access can be found at the navbar:

Login_page

How_to_register

If the user clicks on **"Register" button by mistake, the also can access the Login link at the Registration page. When the user enters a correct username with a matching password and clicks on "Login" button, they will be redirected to the Home page.

Logout page:

The Logout page can be accessed using the provided navbar link that is present when a user is logged in. When the user clicks on Logout, they are directly logged out of their account and redirected to the Home page.

How_to_Logout

Clicking by **"Cancel" button, the user will be redirected to the previously visitet page.

Add a Post

Every registered users can post a new content - a new Bar. This feature can be accessed through the navigation bar. This feature is only available if a user chooses to register to the site and can be accessed using the provided navbar link. The user can share their experience at the bar or simply post as a recommendation with a photo of the bar shooted by their. This is possible thanks to the SummernoteWidget.

Add_Post

The adding post feature is the same to all users and has the fields: Title, Content, Excerpt (to appears at the Bars List), Image upload button (only one photo each post can be uploaded), and the buttons "Submit" / "Cancel".

In case that the user doesn't upload any photos, a default placeholder photo will be displayed.

When the user complets all fields, and clicks on "Submit", the post will takes place to the datenbase as a draft and wait for approval or rejection of the admin. The proposal of that approval or rejecting feature is that to avoid the repetition of Bars. So the "Bars List" can turn on a list or even a "guide" of the best beer bars or brewery in Berlin. Users can also click on "cancel" in order to not to send their posts.

Placeholder_image

Post detail

When a post is clicked on by the user, the Post Detail page opens up, and shows a headline with the name of the Bar/Post. Underneath is the Post Author's name and the date of posting. In large viewports the photo uploaded by the Autor will be displayed in the headline beside of the name.

Post_Detail

Post_Detail

Post_Detail

Font Awesome icon (fa-heart) changes colour and the user will be able to like/unlike the post.

Delete_Comment

Delete_Post

Post update and Comment update

Authors can update ther own posts and comments using the Post Detail's Page, clicking at the button "Edit Post" or "Delete Post". If the author decides not to update after clicking on the "Edit Post," button, he/her can click on "Cancel" button. It gives to the user author full control over their posts.

Updating a post isn't necessary to be approved by the admin, and the post will be automatically updated.

Delete_Comment

Delete_Comment

The comment will be updated immediately after clicking on "Update Comment" button. This feature can avoid grammatical errors on the content.

Django Admin superuser:

The Admin background page of Django makes it possible to admin the entire website by creation of a "superuser" account. To access the Admin panel, the URL of the blog + /admin has to be inserted at the browser: https://berlin-bestbeers.herokuapp.com/admin

The admin can access all content and registered users of the website. The superuser will be albe to approve (from draft to approved) and delete a specific user, post or comment. In this case the bad content can be removed.

Admin_view

System Feedback messages:

One-time notification will be displayed according to the actions of the users. This messages belongs to the django Framework, and were activated for the Berlin Bestbeers Blog.

System/Flash messages are displayed as feedback for users when actions are completed and stays 2 seconds until be automatically removed.

Sign_in_message

Sign_out_message

Post_approval_message

Footer:

The webiste Footer appears in all pages and is featured at the bottom. 2 sections are used to build the Fotter:

Footer

Beer_Map_Footer

Other features:

Logo

Favicon

Meta Data:

Berlin Best Beers Blog

Features to Implement in the future

Design

Wireframes

At the begining of this project, the Balsamiq Wireframes was used to plan the wireframes of the website, its funcionalities for the users, and to get an idea about how it might look in large widths and mobile devices.

Below are the wireframes created, and its features:

Wireframe_Home

Wireframe_Bars_List

Wireframes_Post_Detail

Wireframes_Add_Post

Wireframes_Mobile

Database Design

Classes

The User class is the default User class from Django. The key custom classes in this project to share theirs experiences at the Berlin craft beer bars is the Post class, when user is logged in, in which the logged users can have fully access to all features of the blog once they are logged in.

Post
type field name
CharField title
slugfield slug
ForeignKey author
DateTimeField updated_on
TextField content
CloudinaryField featured_image
TextField excerpt
DateTimeField created_on
IntegerField status
DateTimeField created_on
ManyToManyField Likes

The Comment class is used to represenst a block of text that a user creates to share their experiences. A Bar/Post can have many Comments but each Comment can only belong to one Bar/Post. Each Comment can have only one User author, but each User author can write many Comments, in different Bars/Posts.

Comment
type field name
ForeignKey post
CharField name
EmailField email
TextField body
DateTimeField created_on
BooleanField approved

Likes, Dislikes are also created as feature for registered users.

Site Map:

Lucidchart was used to explain the main structure of the entire website and how to navigate in it:

Site_Map

Colours used:

The palette colour used for Berlin Bestbeers was chosen thinking about the standard yellow colour of the beers. The dark parts like the navigation bar and the footer belongs to the Bootstrap and brought a good contrast with the yellow used one.

Colour Palette

The HEX colours used:

Typography

I have used font-family Poppins and Roboto, family Lato, sans-serif 200, 300, 400 and 600. Since this fonts are easy to read and shows a give a very young appearance to the website, they are chosen.

The same font are used to catch the users attention at the name of the Site and name of all posts, which I used the red colour with a dark boarder.

Font_used

Images

Some images used for updated posts were picked up from original existed bars and breweries in Berlin. As this website was build for educational purposes only, it will not be released in order to not violate the rights of the real authors of these images. Unfortunately the free image sites do not have all images that I want use.

Technologies

Languages Used:

Frameworks and Libraries Used:

Software and Web Applications Used:

Tests

Browser tests

This project was tested using Lenovo YogaSlim Laptop (14", 2021), with Windows 11 installed, using the following browsers:

I have tested the live application, and works in an iPad Mini iOS device using Safari Version 16.0 browser.

I also have tested this application with a Google Pixel 6 Device using a Chrome Browser Version 110.0.5481.63.

Responsiveness

Chrome developer tool have been used to check the responsiveness.

Validators:

W3C Markup Validator:

W3C Markup Validator was used to find sintax errors. The source code of the live project was copied and pasted to check the entire code and no syntax erros were found.

W3_Validator

W3C CSS Validator:

To validate the CSS style of the project, the W3C CSS Validator Services were used and no errors were highlighted.

CSS_Validator

JSHint:

JSHint was used to validate the JavaScript - no errors showed.

Jshint

PEP8 CI Python Linther:

PEP8 CI Python Linther (Python validator) used for these thests. The code passed without any errors on all files tested:

Admin_py_test

Forms_url_py_test

Models_py_test

URLs_py-test

Views_py_test

Lighthouse Test:

The Lighthouse testing of Chrome develeper tools confirmed that although the all images were used in original sizes, the website, its colours and fonts provided an easy-read and accessible website. The performance of 72 can be easily imroved with the resize of all images.

Ligthouse_test

Tests on user stories

To be sure that the suer stories work well, it were also tested one by one. All tests werde done manually, including the system feedback messages. All expectations were met.

Further tests

Resubmission Tests

Solved bugs

Known bugs

API_Bug_Map

Deployment

The application was deployed to Heroku and the databese stored at ElephantSQL. The steps to deploy are as follows:

Credits

Acknowledgements