- About
- Project Target
- Agile
- User Stories
- Project Board
- Live Deployment
- Design
- Wireframes
- ERD Designs
- Database
- Features
- Testing
- Validator Testing
- Accessibility
- Deployment via Heroku
- Future Features
- Credits
- Content Credit
- Technology
- Further Thoughts
The Carew Beer Review! A review of the beers at the yearly Carew Arms Beer Festival in Crowcombe in Somerset. A real ale festival with 18 different beers to try over the weekend.
The website aims to address the need to review the beers at the recent beer festival at the Carew Arms in Somerset. There were 18 beers to taste over the course of a weekend. There were also ciders but the current scope is too only focus on the beers.
The website will address this problem by providing separate options for each beer to read details of each beer and allow a user to leave a comment review and a score for each beer. The reviews will then be displayed alongside each beer on the beer page, and the score will also display on the card for each beer.
The target audience for this website is largely attendees of the festival who were interested in rating the beers. However as the beers are also available in the wider public this could also be a resource for them to check and leave a comment for. Once created it could easily be adapted to be ready in time for next years festival, so that it can be updated during the weekend as well.
For the Agile process I utilised the Github project board and user stories. Detailing the production process and highlighting issues when they arose.
New user stories have been added as the project processed and based on user feedback during the final testing phase.
A MOSCOW framework has been utilised.
Mo: Full Beer Details, CRUD functionality.(Leave reviews, edit reviews, delete reviews)
S: Ratings that are shown on all pages and averaged.
C: Code and style revisement. Future features such as Carousel view, ratings convered to star ratings.
oW: Ability to add new beers as a user. This a specific website featuring specific beers at the festival, such a feature is thus not required. However, in future the site could be adapted for other beer festivals or personal reasons when having this ability would be beneficial.
User stories were used to keep track of the MOSCOW framework and project MVP as working through the project.
| User Story | Detail | Acceptance Criteria |
|---|---|---|
| Review Accordion Auto Opens on click | As a user it would be clearer if the review box opened automatically when 'leave a review' or 'edit' buttons were clicked and it defaulted to closed. | Responsive Accordion for the review table that opens on Leave a Review/Edit |
| Carousel View | As a user it would be nice to view the cards in a rotating carousel rather than scrolling the whole site. | Cards display in a rotating carousel. |
| From User Testing: Rating defaults to zero | When I edit that review, the score defaults to 1 and I have to change it again. If the reviewer just wanted to edit the text, they might not realise they have to change the score again, so would be better if it could default to the score originally given. | When updating Edit Review the previous score should be set |
| From live Tests: RFemove placeholder text | Minor point, but when you click to add a review, the Review Title is already populated with the text "Review Title", which you have to delete. It would be nice if it was blank when you click in the field. | Placeholder text should no longer appear in the fields. |
| Can Edit & Delete Reviews | As a user I can edit my review and delete the review if required. | Edit function on related comments. Delete function on related comments. |
| User can Create an account, login, and log out | As a User I can create an account, log in to said account and log out of said account. | Users should successfully create accounts, log in, and log out. |
| Age Verification Only needs to be confirmed Once | As a User I can Confirm my age once on the site so it does not constantly intefere. | Cookie accepted on modal age verification, No longer pops up. |
| Create Drafts | As a Super User/Admin I can create drafts ready to be posted. | Drafts can be created in the admin panel. |
| Create Posts | As a Super User I can add posts so that site users can see beers at the festival. | Beer posts can be added/created in the admin panel. |
| Active Feedback | As a User I can see if I am logged in, when I post a comment or edit them so that I can keep track of my actions. | I am told if logged in, Receive confirmation messages when comment is posted or edited. |
| Create Review/Beer Detail Page | Design beer detail and review pages | Beer detail page should display reviews and relevant information. |
| Age Restricted Content | As a User I can confirm I am over 18 so that I can review the age restricted content | A modal pop up querying my age before allowing access to content.If Yes to over 18 site access allowed. If no redirected away from site. |
| User can leave a review | As a user I can leave a single review so that other users and me can know how I felt about a beer. | I can leave a review for beers. |
| View Beers | As a User I can see all festival beers on the main page. | A landing page with Beers to filter through. Clickable Beers with further details. Descriptive images/tasting notes and option to add reviews. |
https://github.com/users/SamuelParkerTech/projects/8
Live Website - https://beereview-856687d00272.herokuapp.com/
The aim of the design is to make it really simple, clear and straightforward as to what the site is used for. A simple main landing page displaying the title with "CarewFest Beers & Reviews". A separate page for each beer containing further details and beers. In time, if project allows I would explore the option of having this pop up to keep the user on the same page.
The site does not encourage excessive drinking and is a means to share information on beers at the festival. I will include a link to https://www.drinkaware.co.uk/ to provide more information.
Before the user accesses the page they will have to confirm they are 18 years old as the subject matter is age restricted (alcohol/beer). This will be created using a modal and will redirect the user away from the site if they click 'no'.
The main page will host a selection of beers in bootstrap cards which are also links, hosted in a carousel so each beer can be moved between with clear arrows to enable this decision. By clicking on each beer the user will get more information and access to the reviews with an option to leave their own reviews. Each card will also display the rating of the beer (generated from user reviews). This design will remove screen clutter and make a pleasant viewing experience for the user.
On the review page, further details on the beer will be displayed as well as the user rating again. If logged in users will be prompted to leave their own review, or log in to leave a review. The reviews will be displayed on this page underneath the further details, utlising more bootstrap cards to clearly display each separate review. I would like to display the score in a star format or a simple x/5 display. This display will be scrollable instead of a carousel format. The reviews will be split 3 to a row on large screens and 1/2 on smaller tablets & mobiles. Making sure that the remains responsive on all devices. It is possible that these review pages could be incorporated as pop ups if time allows but the main focus is on a working MVP at this time.
A brief description of the pub, festival and website. This was a later addition as I had time to add.
I have selected font Oswald from Google Fonts as a clear and effective font. I've gone with a colour scheme of Orange & White matching the colours of the Beer Favicon seelected.
C6A15B \
FFFFFF
000000
Black will likely also be used. (Black has been used for text to increase contrast/visiblity)
I have chosen a hero image of the exterior of the pub which will form the main background of the page. Image provided by Paul Savage of Out and About Images.
For the ERD design I have used MIRO to create these.
The main data for the database was created from the beers on offer at the beer festival. Once I had the list and images needed I added this data to a google sheet. I used ChatGPT to convert this data to in to a JSON form to save time.
I also expanded the listings in order to match my ERD tables. The design of which were relatively fluid as during the creation process. I had a few issues during the loading of the data from posts.json due to changes to my model, a good lesson in making sure you know exactly what fields are required. In the end I had to manually remove the ratings table column and once that was sorted I was able to load the data successfully.
The main welcome page features a challenge ID age modal, if this is clicked no it redirects to google. It saves a cookie and will not display again for 30 days.
Displays all beers, key details and the average review score. Each card is a link to the main beer page. These are highlighted when the mouse is moved over to indicate a link.
More details beer information, and separate review cards are displayed. A review form is at the bottom. \
The review form generates a score with a dropdown menu so figures outside of 1 - 5 cannot be added (When this was not a dropdown you would receive an error if a number higher than 5 was entered but it was not a good user experience). If you are not logged in you cannot leave a review
On submit, edit and delete you receive a message confirming the action taken. Before deletion you are asked if you wish to confirm deletion by pop up modal. (Similar to the Age Verifcation).
The user is displayed at the top right with a message "you are logged in as ..." as well as a link to log out. If no user is logged in they are shown options Register, Login and "You are not logged in"
Upon successful login a message is displayed.
On log out they are asked if they wish to confirm logout.
Users who are not admins cannot access the admin page
I checked responsiveness on other sites throughout the development process, I also used Am I Responsive for this. https://ui.dev/amiresponsive?url=https%3A%2F%2FBeeReviews.dev
For users authentication I have used All Auth - https://docs.allauth.org/en/latest/installation/quickstart.html
Before going live the site was made available to a small group of attendees to the beer festival to gather feedback on design, check for issues and test bugs. This feedback was incorporated and added to the site/user stories.
| Feedback | Action | Outcome |
|---|---|---|
| I just added a review for Exmoor Beast. On the homepage, the rating appears. But when I click on Exmoor Beast, the Rating shows as "No ratings yet" - | Code error resulting in rating not displaying correctly fixed | Review rating is correctly displayed |
| Minor point, but when you click to add a review, the Review Title is already populated with the text "Review Title", which you have to delete. It would be nice if it was blank when you click in the field. | Placeholder text removal added to User Stories and code edited to remove the fixed placeholder text | Placeholder text is now automatically removed |
| The review I left was 5/5 for the beast (obvs). When I edit that review, the score defaults to 1 and I have to change it again. If the reviewer just wanted to edit the text, they might not realise they have to change the score again, so would be better if it could default to the score originally given. | Added to User Stories - Score defaults to 1 on editing | Currently a known bug which remains in development for a future update |
In the process of testing I created the a test account "testaccount" for the purposes of checking the functionality of the site. In this process, I was able to add reviews, edit reviews and delete them. Full testing details can be found below.
| Test | Expected Outcome | Result | Action Taken |
|---|---|---|---|
| Age Verification Modal Site Load | Age Verification Modal Pops Up | Pass | None |
| Age Verication Modal Saves cookie if Yes | Cookie Saved - Check if Cookie stops Modal loading (see below) | Pass | None |
| Age Verification Redirects on No | Page redirects to Google | Pass | None |
| Age Verifcation Modal does not load if cookie present | Site loads with no Modal | Pass | None |
| Beer Page Links | Beer Card link goes to the correct beer page | Pass | None |
| About Page Link | About Page loaded | Pass | None |
| External Links | External Links Open to New Windows / Correct Sites | Pass | None |
| Beer Ratings Main Page | Beer Rating is displayed in star format OR if no reviews are yet left "No ratings yet" | Pass | None |
| Beer Ratings Details Page | Beer Rating is displayed in star format OR if no reviews are yet left "No ratings yet" | Pass | None |
| Test | Expected Outcome | Result | Action Taken |
|---|---|---|---|
| Log in Status | 'You are not logged in' displays in Nav Bar | Pass | None |
| Register Link | Opens Register page | Pass | None |
| Login Link | Opens Login page | Pass | None |
| Register Account | Account is registered, message stating account registered | Pass | None |
| Register Account Incorrect | Account is NOT created due to incorrect details | Pass | None |
| Login | Login is successful, Message stating you are logged in | Pass | None |
| Add/Edit Reviews | Prompted to Log in to leave a review / cannot edit reviews | Pass | None |
| Test | Expected Outcome | Result | Action Taken |
|---|---|---|---|
| Log in Status | 'You are logged in' displays in Nav Bar | Pass | None |
| Login / Register / Logout | Logout button should display, Register/Login options are hidden | Pass | None |
| Add Reviews | Can add reviews to beers | Pass | None |
| Review correct | All necessary fields completed or throws error/review not posted | Pass | None |
| Edit Own Reviews | Can edit their own reviews | When editing the score resets to blank, they cannot complete the review without setting the score so need to reset it. | This SHOULD keep the original score but it currently does not work as such, making it force them to rescore is a work around to avoid it resetting to 1 - see known bugs below. NOW RESOLVED |
| Delete Own Reviews | Delete own reviews and not others | Pass | |
| Delete confirmation | When deleting a review a pop asks "Are you Sure, this action cannot be undone" | Pass | None |
| Logout | Log out confirmation screen, and confirm account is logged out message once confirmed | Pass | None |
| Test | Expected Outcome | Result | Action Taken |
|---|---|---|---|
| Login as Super User/Admin | Login Opens Admin Page | Pass | None |
| Login as Standard User | Unable to login | Pass | None |
| Add New Beer | Can Add New Beer Details | Pass | None |
| Edit Pages | Can edit pages / Reviews | Pass | None |
| Delete | Can Delete Page / Reviews | Pass | None |
Leaving a review test
Edit/Delete own review function test
Edited review test outcome(edited review)
Delete review pop up test
Deleted review message confirmation test
There is currently a known issue where when editing the rating is removed rather than copied across in the dropdown. This should be filled in when you click edit based on the existing rating given.
The Javascript is collecting the rating correctly but I have not been able to get it to set it correctly as of 12.08.2024. I have checked this by logging it to the console.
If it is left blank, the updated review will not post and the user will get an error message "Review not updated" if they click update.
This is now resolved. I believe the issue was due to converting the rating to a star system so it was not pulling the original score. I have thus added code to the HTML and Javascript to make sure the right number is requested. It is now working as intended as evidenced by the Print to console function.
On some pages you get a Javascript error TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLDocument. (script.js:34:41). This error relates to the age verification modal and only appears once the cookie is in place. Updated - I have removed this error by checking if the cookie is present and if so the code will exit. 12.08.2024
The Bootstrap Modals are still causing a few issues on the index page, from the Bootstrap css.
You can see in the Console log a quote from Douglas Adams Hitchhikers series, I added this to check Javascript was working in an early test period and have left it in as an easter egg.
I tested the HTML using W3 Validator using the URL checker function. https://validator.w3.org/
CSS Validator testing used the jigsaw validator: https://jigsaw.w3.org/css-validator/ and posted no issues.
Javascript was testing using JS Hint: https://jshint.com/
Two undeclared variables 'Bootstrap' which is part of the modal process. This is fixed by adding /* Global Bootstrap */ to the file.
Python PEP 8 CI Checker - https://pep8ci.herokuapp.com/
models.py 
admin.py 
apps.py 
urls.py 
views.py 
Custom_Filters.py 
admin.py 
apps.py 
forms.py 
models.py 
urls.py 
views.py 
asgi.py 
settings.py (lines too long errors from Django creation) 
urls.py 
wsgi.py 
In checking contrast a lot of the text was failing/posting a warning in Chrome Dev tools, I changed most the text to black and it now scores highly in contrast.
Accessible Web testing currently states no accessibility issues (WCAG)
I score lowest on 'best practices' - this is because Cloudinary is sending cookies with the images.
First make sure the Debug is set to false
Connect your Github to your Heroku
Make sure VARS are set correctly.
In the deploy tab, scroll down and deploy MAIN Branch
| Step | Code |
|---|---|
| In Github | |
| Create a new Github Repo | Github > new Repository |
| Open Repo | If your Github is utlising the plugin click 'Open' to launch your preferred IDE |
| In IDE | |
| Install Django: | pip3 install Django~=4.2.1 |
| Create requirements file | pip3 --local > requirements.txt |
| Create Project (proj_name) | Django-admin startproject proj_name . |
| Run Server | python3 manage.py runserver |
| Add Servers to ALLOWED_HOSTS in settings.py | ALLOWED_HOSTS = ALLOWED_HOSTS = ['.codeinstitute-ide.net', '.herokuapp.com'] |
| Create App (app_name) | python3 manage.py startapp app_name |
| Add to INSTALL_APPS in settings.py | INSTALLED_APPS = [… 'app_name',] |
| Set Up Heroku | |
| Heroku Dashboard | https://www.heroku.com/ |
| Create new Heroku App | Choose unique name / select close region |
| Add Config Vars | Config Vars > Reveal Config Vars > Add New Key > DISABLE_COLLECTSTATIC value 1 |
| In IDE | |
| Install web server Gunicorn and freeze | pip3 install gunicorn~=20.1 \ pip3 freeze --local>requirements.txt |
| Create Procfile | create Procfile in root directory |
| Declare Procfile | Add web : gunicorn proj_name.wsgi in Procfile |
| In Heroku | |
| Connect Repository | Navigate to Deploy tab > connect to Github Repo |
| Check Add ons & Dynos | Inside app resources make sure to use Eco Dynos. Delete PostGres DB Add-ons |
| Database | |
| Create Postgres Database | CI Database Creator - https://dbs.ci-dbs.net/ |
| In IDE | |
| Install Database Packages | pip3 install dj-database-url~=0.5 psycopg / then pip3 freeze --local > requirements.txt |
| Create env.py file | Root directoy add env.py and add to .gitignore |
| In env.py | |
| import OS | Top line 'import os' |
| set enviroment variables | os.environ["DATABASE_URL"] = "Paste in PostgreSQL database URL" |
| Secret Key | os.environ["SECRET_KEY"] = "Make up your own randomSecretKey" |
| In Heroku | |
| Add Secret Ket to config Vars | SECRET_KEY, “randomSecretKey” |
| Add a Config Var called DATABASE_URL | DATABASE_URL, “yourDBUrlgoeshere” |
| In settings.py | |
| Link to env.py | from pathlib import Path, import os, import dj_database_url, if os.path.isfile("env.py"): import env |
| Remove secret key | SECRET_KEY = os.environ.get('SECRET_KEY') |
| Comment out old Database section | # DATABASES = { } ( # on each line ) |
| Add new Databases section | DATABASES = {'default': dj_database_url.parse(os.environ.get("DATABASE_URL"))} |
| Migrate Database | |
| Save all files and Migrate | python3 manage.py migrate |
| Create Super User | |
| Create Super User | python3 manage.py createsuperuser |
| In settings.py | |
| Set DEBUG to false | DEBUG = False |
| Redeploy | |
| Push all Git changes and commits | Redeploy to Heroku |
The project should now be ready to begin
I would like to add the functionality in future for the main page to be a carousel rather than a full page scroll. This would simplify the view and utilise less screen space.
I would also like to make the review form accordion be closed on page load, and open when 'leave a review' or 'edit' buttons are clicked.
In future efforts I would get the rating to load correctly when the edit button is used. (See known bugs).
Another feature I would like to add would be to display the beers / reviews in order of rating as well as by name, or grouped by brewery. \
For a future functionality I would also like to add a user area, which would display previous reviews the user had left and a checkbox to tick off beers tried at the festival. If they have left a review it should automatically tick off a beer, likewise if they tick off a beer it should prompt them to leave a review.
- Carew Pub Images courtesy of Out and Abouts Images https://www.outandaboutimages.co.uk/
- ChatGPT - Content Creation. Descriptions of some beers was tweaked and some site descriptions were created with ChatGPT
- Favicons - Favicon.io - https://favicon.io/emoji-favicons/beer-mug/
- FontAwesome - Social Icons https://fontawesome.com/
- All other images provided by S Parker Photography www.sparkerphotography.co.uk
- Django set up using the CodeStar blog tutorial and Django Setup and Deployment Guidebook supplied by David Calikes and Code Institute.
- Troubleshooting - Django Documentation, Bootstrap Documention, Stack Overflow, Google and ChatGPT were also used when issues arose.
- Github - Version Control & Project Kanban / Issues
- Gitpod - Code Editor
- Django - Python Framework
- BootStrap - CSS Framework
- Google Fonts - Oswald Font https://fonts.google.com/specimen/Oswald
- Miro - ERD Creation board https://miro.com/
- Coolors.co - Colour pallette/tone helper https://coolors.co/
- Google Sheets - Data collection & creation https://docs.google.com/spreadsheets/create
- Trello - Project Assessment Criteria Tracker https://trello.com/b/Gxg1ULD2/final-project-criteria
- AllAuth
- Am I Responsive https://ui.dev/amiresponsive?url=https%3A%2F%2FBeeReviews.dev
- asgiref==3.8.1
- cloudinary==1.40.0
- dj-database-url==0.5.0
- dj3-cloudinary-storage==0.0.6
- Django==4.2.14
- django-allauth==0.57.2
- django-summernote==0.8.20.0
- gunicorn==20.1.0
- oauthlib==3.2.2
- psycopg==3.2.1
- PyJWT==2.9.0
- python3-openid==3.2.0
- requests-oauthlib==2.0.0
- sqlparse==0.5.1
- urllib3==1.26.19
- whitenoise==5.3.0
This project was a good learning experience. I had many issues which delayed me for a day or so while I worked out what the issues were. Sometimes these were as simple as typo, a misplaced comma, indent or simple logic not working. Many of these issues were because of a lack of experience. However, each issue helped me learn more about Django and how it works. Thus some problems once resolved, helped resolve other issues. For example, removing a column from my data table gave me the knowledge to add a column to my data table when the opposite issue arose.