Table of contents
Milestone Project 4 - Gamernetic
Purpose
This website was created to complete the fourth Milestone Project for Code Insitute's Full Stack Software Developer course. I built this from the ground up using knowledge I gained from the previous modules. The objective of this project is to showcase my ability to create a true Full Stack application using the Django framework. The full list of technologies used can be found in the technologies section further down.
Users of this website are able to create, read, update and delete posts regarding any subject in the gaming industry.
You can find the link to the live website right here. Please note: To open any links in this document in a new browser tab, please press CTRL + Click.
User Experience
User Stories
First Time User Goals
First Time User Goals
- As a First Time User, I clearly understand the main objective of the website.
- As a First Time User, I can easily navigate through the website.
- As a First Time User, I can register an account to gain full access to the website.
- As a First Time User, I can view more from the creator of the website via their social media accounts.
- As a First Time User, I can choose a post I would like to inspect further.
Frequent User Goals
- As a Frequent User, I can log in to gain access to my account.
- As a Frequent User, I can create my own blog post and post it on the website.
- As a Frequent User, I can edit or delete my own posts.
- As a Frequent User, I can comment on a blog post with my thoughts on the subject.
- As a Frequent User, I can like a post to show that I enjoyed it.
- As a Frequent User, I can share a post to my own personal social media account.
- As a Frequent User, I can change aspects of my personal account details.
- As a Frequent User, I can change my password incase their is a security risk.
Admin User Goals
- As an Admin, I can create, read, update and delete posts so that I can manage my blog content.
- As an Admin, I can create draft posts so that I can finish writing the content later.
- As an Admin, I can approve or disapprove comments so that I can filter out objectionable comments.
Design
Wireframes
- Home Page Desktop:
- Home Page Mobile:
- Post Content:
- Add Post:
- Log In:
Imagery
The images you are greeted to when entering the website are of varying style. Most of the photos you will see are uploaded by the user, but the header image will always be as shown below. This is also used as the placeholder image when a user chooses to not upload a photo to their post.
Color Scheme
Three colors are used in this website, these being #000000, #FFFFFF and #FF0030. The background, text and foreground colors have a sufficient contrast ratio to aid with accessibility.
Fonts
The font used throughout the website is Space Grotesk. I used only 1 font for the site, but used text-transform to make some of the text uppercase.
Features
Existing Features
Home Page
The first thing users are greeted to is the Home Page. This is where you will find everything to navigate the website.
The purpose of this is to fulfill the following user stories:
As a First Time User, I clearly understand the main objective of the website.
Navigation Bar
Featured at the top of all pages is the nav bar, holding the Gamernetic logo and all links to the home page, register page and log in page.
The purpose of this is to fulfill the following user stories:
As a First Time User, I can easily navigate through the website.
I have also set up the Nav Bar to be viewed on smaller screen sizes, with the help of Bootstraps .navbar-toggler class.
Footer
Featured at the bottom of all pages is the footer, holding all links to my personal social media accounts.
The purpose of this is to fulfill the following user stories:
As a First Time User, I can view more from the creator of the website via their social media accounts.
Post Detail
When one of the posts on the home page is clicked, the user is taken to post detail view. Here the user can see the author, date/time posted and the content itself.
The purpose of this is to fulfill the following user stories:
As a First Time User, I can choose a post I would like to inspect further.
Like/Unlike
Just below the post itself, two icons are visible. One of these being a clickable Like button that can only be interacted with when the user has logged in. The second icon shows the amount of comments the post has recieved.
The purpose of this is to fulfill the following user story:
As a Frequent User, I can like a post to show that I enjoyed it.
I also added a link that will enable the user to share the blog post to their own Twitter account.
The purpose of this is to fulfill the following user story:
As a Frequent User, I can share a post to my own personal social media account.
Post Comments
At the bottom of the post is the comments section, where the user is able to write and post a comment on the blog post.
The purpose of this is to fulfill the following user story:
As a Frequent User, I can comment on a blog post with my thoughts on the subject.
When the user has posted a comment, an alert replaces the text field letting them know that their comment is awaiting inspection and approval.
The purpose of this is to fulfill the following user story:
As an Admin, I can approve or disapprove comments so that I can filter out objectionable comments.
Add Post
This page of the website allows the user to create their own blog post. I implemented a rich text editor which allows the user to add a bit more style to their post. For security reasons I have to give the user staff privileges to be able to post, which is common practice in other professional websites. This is to ensure that not just anyone off the internet can find my website and post questionable things.
The purpose of this is to fulfill the following user stories:
As a Frequent User, I can create my own blog post and post it on the website.
Edit/Delete Post
If the user is the author of the post, two buttons appear on the post detail section giving them the ability to edit or delete the post. This is to aid the user in correcting issues with the post, or just to delete it and start again fresh.
The purpose of this is to fulfill the following user stories:
As a Frequent User, I can edit or delete my own posts.
When the user clicks the delete button they are taken to a new page with a warning, making sure they are aware that they are about to permanently delete the post. This is so if they change their mind and want to keep it, they can.
Register
If the visitor likes the website, they are able to register an account. This enables the user to be able to like and comment on posts.
The purpose of this is to fulfill the following user stories:
As a First Time User, I can register an account to gain full access to the website.
Log In
When the user returns to the website to see if any more blog posts have been created, they are able to log back in.
The purpose of this is to fulfill the following user stories:
As a Frequent User, I can log in to gain access to my account.
Edit Profile
This page of the website enables the user to edit specific things regarding their account. These being:
- Username
- First Name
- Last Name
The purpose of this is to fulfill the following user stories:
As a Frequent User, I can change aspects of my personal account details.
Change Password
Within the Edit Profile page the user also has the option to click a link to take them to a page allowing them to change their password.
The purpose of this is to fulfill the following user stories:
As a Frequent User, I can change my password incase their is a security risk.
When the user has confirmed their new password, they are taken to a page informing them that the change was successful.
Features Left to Implement
Password Reset
I would like to implement a password reset feature. This would send an email to the users associated email address with a temporary password. They would then use said password to gain access to their account and change their password manually.Contact Us
I would like to eventually implement a Contact Us page to the website. Users would be able to send enquiries to me via a form.Reply to comments
I would like to add a feature that allows the user to reply to comments on a post. This could be a reply in a thread format or something else entirely. This would add a personal touch to the comments section, enabling users to interact with one another.Technologies
- HTML
- CSS
- JavaScript
- Django
- Bootstrap
- Heroku
- Heroku is the site used to deploy the project.
- GitHub
- GitHub is the hosting site I used to store the code for the website.
- GitPod
- GitPod is the Integrated Development Environment used to develop the website in a browser.
- Font Awesome
- Font Awesome icons are used for the social media links located in the Footer section of the website.
- Google Fonts
- Google fonts are used in the project to import the Space Grotesk font.
- Quicktools by Picsart
- Quicktools by Picsart is used to generate the image of the color pallete.
- Am I Responsive?
- Am I Responsive is used to generate the website mock up.
- Chrome Developer Tools
- The built in developer tools in Google Chrome are used to test CSS styles, inspect page elements and help with debugging problems with the layout of the website.
- Stack Overflow
- Stack Overflow was the primary source for help regarding issues.
- W3 Schools
- W3 Schools was one of the websites used for resolving issues with code.
Testing
Validator Testing
Code Validation
To ensure all code for Gamernetic was correct, validation through various validators was performed. The results are listed below.
-
HTML Validation
All HTML code was checked with the W3C Markup Validation Service.
Home Page
Post Detail
Sign Up
Log In
Add Post
One error returned. As seen in the code below, I have had to use {{ form.as_p }} to get the rich text editor to function correctly. As of right now I am unsure of a solution.
Edit Profile
I was unable to validate this page due to the page only being accessible to a user who is logged in and able to edit their profile.
Log Out
-
CSS Validation
All CSS code was checked with the W3C CSS Validation Service.
CSS Results
-
Python Validation
All Python code was checked with the PEP8 Online Service.
admin.py
apps.py
forms.py
models.py
urls.py
views.py
-
Accessibility
The websites accessibility was tested with the WAVE Web Accessibility Evaluation Tool.
WAVE report
Manual Testing
I tested that the website is responsive, functions well and looks good on all screen sizes using Google Dev Tools and Responsive Design Checker.
Google Doc
Bugs
For this website I decided to open a project on the GitHub repository, that I would add to as I go along. This is to aid with the transparency of my coding, showing the bugs I encountered and how they were fixed.
Deployment
This project was deployed using Code Institute's mock terminal for Heroku.
- Fork or clone this repository
- Create a new Heroku app
- Set the buildpacks to Python and NodeJS in that order
- Link the Heroku app to the repository
- Click on Deploy
Credits
I'd like to thank my mentor Ronan McClelland for their help and support throughout this project. I'd also like to thank my cohorts in the Code Institute Slack community, and the Tutor Assistance for all their help with code issues.
The Code Institute Python Template was used as a base for this project and made into my own.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent