County Cricket Tour Blog:

This blog site is a page that allows lovers of county cricket to come together and share their experiences of the 18 different county grounds.

The live application can be viewed here:

https://county-cricket-blog-a93042f7114f.herokuapp.com/

Purpose and Target Audience:

Problem Statement: County cricket is becoming an under appreciated form of the game with much of the online space taken up by international or franchise cricket. It can be hard for followers of the county game to find a space for a more reasoned, friendly discourse about county cricket specifically.

Purpose: This app will allow people who love and follow county cricket around the country to come together as a community. Share their thoughts on the game and the experience of attending matches. It will also allow for tips about making the most of the different host stadiums.

Target Audience: The target audience is quite simply anyone who loves county cricket.

User Stories

• As the site owner I want the site to be easy and self explanatory to navigate.
• As a user I want to be able to review the posts of other people and add comments.
• As a user I want to be able to create a profile, which will allow me to create posts and view my previous ones.
• As the site owner I want users to be able to read about the site on the "about" page.
• As the site owner I want to ensure all log in details are secure.

Wireframe & Initial Design:

Home Page

• Laptop

• Mobile

Login/Register

• Laptop

• Mobile

About

• Laptop

• Mobile

Single Post

• Laptop

• Mobile

Agile

To plan and create this project I used the Agile principles in conjuction with a projectboard on Github. This was the first time I had used Agile as an individual developer rather than as a part of a Hackathon team. However whilst I did not need to assign tasks I still found it useful to set out a plan to work through the project and work towards fulfilling the acceptance criteria of User Stories.

Design Choices

As the main purpose of this project was the functionality of the site I did not focus too much on the design of the site. However my main aim was for a easy to navigate site that enhanced the user experience and layed out the information of the blog posts in a clear way.

Colour Scheme

I selected the main colours of the site with cricket in mind. The dark read of the navigation options and page titles was based on a cricket ball. The green of the header and footer the pitch. The backgroudnd white the colours worn during county cricket.

8B0000 - Dark red for the navigation options and page titles

56ad56 - Green for the header and footer

Database Design

Below is a simple database design for the project, created on Excel. This was important to visualise how my models would relate to each other and shows the data needed for each model.

User Flow Chart

I used Lucidchart to create a simple user flow chart to demonstrate how a user would be able to move through the site.

Main Features:

Home Page

The home page of the site shows the latest posts from the community. These are viewable for anyone visiting the site and you can click on a post to view the content in detail. However to create a new post or comment on an existing one a user must be authorised. From the home page you can also access, the about, register and login pages.

About page

The about page of the site gives a brief introduction and some basic guidelines, i.e always be kind. It also has what is the stock photo for the site currently. A county game taking place at the Riverside ground in Durham, taken by myself.

Register/Sign Up pages

These were created using the Django templates and allow a user to first register for the site and subsequently to login. Once logged in they can create posts/comment.

Footer

Viewable on all pages, the footer contains links to social media sites. At some point in the future these will be links to profiles for the blog, at the moment they simply link to the homepages of each company. The footer, along with the header and navbar help provide consistency accross the site.

A post

By clicking on the title of an individual post on the homepage a user can view the blog post in it's entirety. If it is the user's own post they can delete it from here. If it is a different users post comments can be left. Once submitted comments can be edited and deleted. There is also a small comment counter that shows how many comments have been left on each post.

Creating a post

Users who are logged in can add a new post by clicking the "New Post" link on the nav bar and completing the form. The dropdowns give the option of selecting where you saw the game (all 18 county grounds are listed) and the visitors. Once submitted this post will appear on the homepage for other users to view it. The most recent post will appear at the top left of the page.

Future Features

The current iteration of this project has been designed to meet the MVP of the task. In the future there are several features I would like to implement.

• The ability for a user to upload a photo to accompany each post.
• The ability for a user to edit a post once it is created. Currently it can be deleted but only comments can be edited.
• A profile page so a user can see all of their own posts.
• A logo or some artwork to make the homepage more interesting and visually appealing.

Validation:

HTML

I have used W3C validation service for the HTML and taken it from the page source of the live site.

Page	Screenshot	Result
Home		Pass: No Errors
About		Pass: Validator suggests changing the height and width of the image to a digit, trialled this but it works better as 100% so have left it.
Individual Post		Pass: Same issue as the about page with the image
Register		Pass: Errors shown in the validator. These are from the Django account templates, not issues I can fix.
Login		Pass: No Errors
New Post		Pass: No Errors
Edit Comment		Pass: No Errors

CSS

I have used the W3C Jigsaw validator for my CSS file.

It showed no errors as per the screenshot.

Python

App	File	Screenshot	Result
blog	admin		Pass: No Errors
blog	apps		Pass: No Errors
blog	forms		Pass: No Errors
blog	models		Pass: No Errors
blog	tests		Pass: No Errors
blog	urls		Pass: No Errors
blog	views		Pass: No Errors
countychamp	asgi		Pass: No Errors
countychamp	settings		Pass: No Errors
countychamp	urls		Pass: No Errors
countychamp	wsgi		Pass: No Errors

Testing:

I have completed the following manual testing of my app on both a laptop and a mobile device.

Browsers

I completed the testing on both Chrome and Safari. The functionality worked as expected on both, however on Safari there were some minor issues with the CSS and the navbar, as per the below image.

Links

Link	Expected Outcome	Outcome
Home	Navigates to the home page when clicked	Pass
About	Navigates to the about the site page when clicked	Pass
Register (navbar)	Navigates to the register page when clicked	Pass
Login (navar)	Navigates to the login page when clicked	Pass
Login (within register page)	Navigates to the login page when clicked	Pass
Sign up (within login page)	Navigates to the register page when clicked	Pass
Post titles	Navigates to the individual post page for that post	Pass
Next (if more than 6 posts on page)	Navigates to the next set of blog posts	Pass
Previous (if not on first page of posts)	Navigates to the previous page of blog posts	Pass
Social media icons	Open a new window and navigates to the homepage of the relevant social media site	Pass

Functionality

Whilst testing the below functions I also tracked that the associated message would pop up, confirming the action that the user had taken.

Feature	Expected Outcome	Outcome	Screenshot
Register	A new user can create a user profile	Pass
Login	An existing user can log in to the site and once logged in the message confirming this remains in the navbar	Pass
New post	An authorised user can create a new post	Pass
Delete own post	A logged in user can delete their own posts, a second screen asks if they are sure	Pass
Cannot delete other posts	A user cannot delete another users post	Pass
Leave a comment	A user that is logged in can leave a comment on any post	Pass
Edit or delete own comment	A user that is logged in can edit or delete their own comment	Pass
Cannot edit or delete other comments	A user that is logged in cannot edit or delete another users comments	Pass
Comment counter	The comment counter shows how many comments have been made on a post (Page made need to be reloaded)	Pass
Next/previous	Only 6 posts will be displayed on the home page. To see more a user must press the next button, which will then display the next 6 posts. Can go back a page by pressing previous.	Pass
Logout	A user can log out, a second screen confirms this is what they want	Pass
Not logged in	If not logged in a user cannot add a post, comment, or edit any of their existing posts or comments	Pass
Pop up messages	All pop up messages show the users previous action	Pass

Lighthouse Audit Tool

I've tested my app using the Lighthouse tool to check for any major issues. Some of the scores could be better, but overall they are ok.

Home:

About:

Individual Post:

Register:

Login:

Responsive Design

I have tested my app on a MacBook Air with a 13" screen, an additional 16" monitor and on a Samsung Galaxy 7 mobile. I have used Chrome dev tools to look at a tablet sized screen. Overall the app looks as it should accross all screen sizes. The main areas of responsive design are the home page and the view for an individual post. The home page when viewed as a desktop will show 6 posts in 2 rows of 3. A tablet will show 3 rows of 2 and a mobile will show a single column of posts. When viewing an individual post the image is no longer visible on a mobile. Another slight change for mobile devices is the layout of the navbar and title banner.

Laptop Home Page:

Tablet Home Page:

Mobile Home Page:

Mobile Title and Navbar:

Tablet Title and Navbar:

Laptop Title and Navbar:

Laptop Individual Post:

Tablet Individual Post:

Mobile Individual Post:

Tools and Technologies:

The technologies implemented in this app included HTML5, CSS, Bootstrap, Python and Django.

• Python used as the back-end programming language

• Django for the user authorisation templates

• Git used for version control

• GitHub used for secure online code storage

• Gitpod used as a cloud-based IDE for development.

• Bootstrap used for pre-built components.

• FontAwesome was used for the social media icons.

• Code Institute Database used as the Postgres database.

• Heroku used for hosting the deployed back-end site.

• Balsamiq used for the wireframes in the planning stage.

• LucidChart used to create the user flow diagram.

• Excel for my database diagram.

• Google and Chat GPT used when querying an error message.

Languages Used:

• HTML5
• CSS
• Python

Deployment:

I have used Heroku to deploy the project following the below steps. The link for the deployed project is https://county-cricket-blog-a93042f7114f.herokuapp.com/

Deployment Steps:

Create the Heroku App

• Create a Heroku account or login if you already have one.
• Once in the Heroku Dashboard, click on 'New' and then select 'Create New App'.
• Choose a unique name for your project, for instance "County Cricket Blog".
• Select the EU region.
• Click on "Create App".
• In the "Deploy" tab, choose GitHub as the deployment method.
• Connect your GitHub account and find/connect your GitHub repository.

Set Up Environment Variables

• Create an env.py in the top level of the Django app.
• Import os in env.py.
• Set up necessary environment variables in the env.py, including the secret key and database URL.
• Update settings.py to use environment variables for secret key and database.
• Configure environment variables in the Heroku "Settings" tab under "Config Vars".
• Migrate the models to the new database connection in the terminal.
• Configure static files and template directories in settings.py.
• Add Heroku to the ALLOWED_HOSTS list.

Create a Procfile and Push Changes

• Create a Procfile in the top level directory.
• Add the command to run the project in the Procfile.
• Add, commit, and push the changes to GitHub.

Heroku Deployment

• In Heroku, navigate to the Deployment tab and deploy the branch manually.
• Monitor the build logs for any errors.
• Upon successful deployment, Heroku will display a link to the live site.
• Complete further testing on the live site and amend code if needed.

Forking the Repository

Forking the GitHub Repository allows you to create a copy of the original repository and then make changes without affecting the original.

• Log in to GitHub or create an account.
• Visit the repository link.
• Click on "Fork" at the top of the repository.

Creating a Clone of the Repository

Creating a clone enables you to make a local copy of the repository.

• Navigate to the existing repository (https://github.com/jambardev/County-Cricket-Tour-Blog).
• Click on the <>Code button.
• Select the "HTTPS" option under the "Local" tab and copy the URL.
• Open your terminal and change the directory to your desired location.
• Use git clone followed by the copied repository URL.

Bugs:

As with all developers I encountered several bugs when developing my project. The main one was to do with my post model. Originally I had a status field with the option for a post to be saved as a draft. However when draft was selected there was nowhere for the draft post to go. After a bit of trial and error I decided to remove this as an option so in the current version there is no status field. I also encountered some issues that were out of my control to do with the database which made the final stages of the project quite challenging.

An issue was also identified with the authorisation of users being overrided by copying and pasting the URL. I was able to solve this issue using login decorators for each view where it was required.

Credits:

• My main resource for this project, particularly at the start when getting set up was the Code Institure project I think Terefore I Blog. For the most part I was able to follow the basic steps of setting up a blog project by following this walkthrough.

• For the Deployment section of this ReadMe document I have looked at the steps laid out by a fellow Code Institute student Katie Coughlan in her project Soujourn Scribbles for guidance. (https://github.com/katiejanecoughlan/sojourn-scribbles-V3/tree/main)

• I have also used Chat GPT, particularly to help establish the meaning of error codes.

• FontAwesome for the social media icons.

• Bootstrap for some basic CSS and button components.

• Balsamiq for the wireframes.

• LucidChart for the User Flow Diagram.

• The photo used on the site is my own.

• I would also like to thank for their help and guidance, the other members of my cohort, my facilitator Iris and the CI coding coach Martin.