🌐 Live Website,
Bloggerverse is a blogsite for people intrested in cultivating a blogging community, in which users can learn from, discuss with and connect with like minded individuals.
Table of contents:
When designing my user stories I used the Agile MoSCoW prioritisation technique and designed the user story table to help keep the project on track. The meaning of each label can be found in the key below. 👇
Key:
| Label | Definition |
|---|---|
 |
Requirement is necessary for the project to be conisdered as successfully completeted. |
 |
Requirement is important but not neccessary for the project to be conisdered as successfully completeted. |
 |
Requirement is a bonus to the project and if not included the impacts are less significant that a 'must have' or 'should have'. |
 |
Requirement are not considered as a priority for the project, given the timeframe but may be revistited when implementing future features. |
Table:
The Table below shows the user stories for this project. These user stories ID links to the issue number displayed in the Kanban board (can be found in the projects sectiion) and does not reflect the order in which these stories where completed.
The Stories in the Kanban board contain the agreed acceptance criteria in the form of tasks so that an agile technique is used to track the development of the user stories and the project itself.
| User Story ID | User Type | User Story | Priority |
|---|---|---|---|
| 01 |  |
I want to be able to view blog posts, without logging in or signing up | |
| 02 | |
I want to be able to view blog posts snippets from the home page | |
| 03 | |
I want to be able to view detailed blog posts easily | |
| 04 | |
I want to be able to add my own blog posts | |
| 05 | |
I want to be able to edit my own blog posts | |
| 06 | |
I want to be able to delete my own blog posts | |
| 07 | |
I want to be to add comments to blog posts | |
| 08 | |
I want to be able to like/dislike blog posts | |
| 09 | |
I want to be able to see the number of likes a posts has | |
| 10 | |
I want to be able to sign up | |
| 11 | |
I want to be able to login/logout | |
| 12 | |
I want to be notified when an action is successful/unsuccessful | |
| 13 | |
I want to be able to create my own profile | |
| 14 | |
I want to be able to view/edit my profile | |
| 15 | |
I want to be able to view the post authors profile | |
| 16 | |
I want to be able to reset my password | |
| 17 | |
I want to be able to report offenesive content | |
| 18 |  |
I want to be able to easily manage posts, users and comments | |
| 19 | |
I want to have my own admin area | |
| 20 | |
I want to be able to add my own posts and comments | |
| 21 | |
I want to be able to use other social media to login | |
Kanban Board
Below 👇 are screenshot of the Kanban board, all stories witin the scope of this project have been completed. The Stories that will not be implemented in this release have been closed as wont fix and moved to the backlog, where they may be reconsidered for future releases.
The main goal was to make an intuitive UX, so that the user is not confused when visiting the Website. To achieve this, I created a simple, succinct, web application. The navabar is present on every page with clear icons for easy navigation.
The user experience should be tailored. To ensure this navbar items vary based on whether the user is authenticated, so that users who are not logged in aren't shown features that are not available to them.
If a user tries to access a page they are not auhtorised to, they are informed why they can't see the page and a link is provided so that they can rectify the issue in one click.
All user actions shoud return a response. To ensure this is possible there are specific success and error messages displayed as result of a user action. Page redirects are also used to make it obvious that an action has been successfully completed.
• Colour scheme
° I have gone for a simple beige (#e5c6a0) , as this is a neutral but trendy colour. To enusre accessibility for all users I used a monchrome design for the text. All text and Icons are displayed in black text (#ffffff) on a white card (#000000).To find the shade of beige that offers the best contrast with these font colours I used WebAim.
• Typography
° In keeping with the minimalistic style of the website, I have chosen to use an original fixed-width type family font 'Space Mono' as it was developed for editorial use in headline and display typography. Tying in with the purpose of the web application.
° I want the users to be carefree whislt using the site as the purpose of the site is to alow the users to share/explore different ideas and connect with like minded individuals. The style of 'Space Mono' makes it easy to read and fosters the care free vibe, I want the users to experience.
• Imagery
° The default blog images was created using Canva
° The icons used throughout the site are Boostrap icons
° The logo was created using Tailor Brands
• Wireframes
° Wireframes were created using figma. To meet my UX objective of creating a simple and intuitive User Interface (UI), I took a minimalisitic approach with the wireframes, to provide flexibility so that the project can evolve in accordance with user feedback. Without straying from the mnimilistic theme. Here is the link to my wireframes for desktop and mobile. After listening to user feedback during the project; further features were added, so not all features are represented in the wireframes. However, all features will be discussed later in the README. Below are screenshots of the desktop and mobile Wireframes. 👇
Home screen - screenshot for Desktop 🖥️ and Mobile 📱
When viewing posts by category the same layout will be used, so a seperate wireframe was not created for that page.
Forms - screenshot for Desktop 🖥️ and Mobile 📱
All the forms used in this web application have a uniform style and appear on a seperate page.
As previously explained (:point_up: ) new features were added during the project in response to user feedback. I will be explaining the current features, breaking them down into main and bonus features to help demostrate the progression of the project. Some future features will also be discussed.
Site User
First I will be looking at the features for site users
The following features are features that were essential to the project and are highlighted as must have or are an important should have.
• The Navbar is available on every page, this allows seamless navigation across the web application, ensuring the main features are acessible in one click. The standard Navbar is show below. 👇
• The navbar is also personalised so that the user experience is tailored.
° When logged in the user will see a Navbar that looks similar to the screenshot below. 👇
° The standard Nav bar is shown when a user is not logged in, this is so that the user is only shown areas they have access to.
• The landing page is simple keeping with the minimalistic theme of the site. All blog post are displayed with post snipits on a white card to give it a more modern feel.
° The landing page is also personalised for logged in users adding to the personalised feel of the site. This is demonstrated below 👇
° Each blog post includes hyperlinks to view the full post or other posts under the post category. It is also possible to see the author, date of post and number of likes. Screenshot are shown below 👇
All the forms used have a uniformed simple style keeping with the minimalistic theme.
Signup
• The Signup form can be seen below, this form is easily accessible from the Navbar and links are available on the login page also. 👇
Add Post
• The form used to add posts can be seen below, this is easily accessible from the Navbar and links are available on the login page also. 👇
° The form uses a richtext field to give the user more freedom in styling their post.
°A dropdown is also used to allow the user to select an existing category for the post.
° If the user has not completed profile setup they will not be able to make a post. This prevents an error being returned when there is no id for user making the post. (Shown below) 👇
° If the user is not logged in and tries to add a post, they will be prompted to login or sign up. With links to the relvant form being displayed. (Shown below) 👇
Edit Post
• The form used to Edit posts can be seen below, this is easily accessible from the posts. 👇
Delete Post
• The form used to delete posts can be seen below, this is easily accessible from the post. 👇
° Once a post is deleted the user will be informed as seen below 👇
• Django authentication is used for user login/logout. The user is able to tell when they are logged in by the changes in the nav bar (these have been shown previously ☝️ ).
° When logging in the user is prompted if the login is unsuccessful. The login form is shown below, along with the error message.
• Users are able to add their own images which will be used when displaying post snippets on the landing page. 👇
° The uploaded image is stored using cloudinary and will be displayed as seen in the screenshot below
° If a user does not upload an image a default image will be used as seen below. 👇
• All Authenticated users are able to leave comments, using the comment form shown above ☝️ in the forms section. The comments are then displayed in the comment section.For the users convenience they are redirected to the posts they left a comment under. as seen below. 👇
• All users are able to see the number of likes a post has, but must be logged in to like a post 👇
° When logged in the user can like or dislike a post, the button changes dynamically to prevent multiple likes/dislikes from the same person.
• The footer contains buttons with links to Github, LinkedIn and Email where the can contact me. Twitter and Instagram links are also included although the bloggerverse does not have a page on these platforms. All of the links open in a new tab for the users convenience. 👇
Bonus features ❇️
These features are features that were either considered a could have or requested by users during testing.
• Authenticated users are able to create their own categories, to ensure that users have as much influence over the site as possibly. For ease this is a Navbar item when users are authenticated, making the form accessible from every page. 👇
° Once a user has created a category they are notified and redirected to the categories page, to make it clear that it was successful.
° If a user tries to add a category that already exists they will be told that the category already exists.
• All post are assigned a category so that the users can view post by category.page. 👇
° A user can either use the category hyperlink on a post ☝️ to see other posts in that category. An example of the category page is shown below 👇
° If a user tries to access a catogory that does not exist or has no post yet they will see the following page 👇
° Or a user can use the catgory list page to search for posts in a specific category 👇
° Categories also display as a dropdown in the navbar
• Authenticated users are able to create their profile, the user is redirected to this page after signup and the link to this page is acesssible from the navbar. The form used for the create profile page is shown below 👇
° The information added by the user is then available for other users via the view author profile card at the bottom of each post. 👇
• Authenticated users are able to edit their profile, to ensure all information is up to date. The form used for the edit profile page is shown below 👇
• Authenticated users are able to change their profile settings, to ensure accounts are kept secure. The form is shown below. 👇
° The link in the image ☝️ above directs you to the change password form (shown below). 👇
• Authenticated users are able to change their passowrd, to ensure accounts are kept secure. The form used for change password page is shown below.:point_down:
• Users are able to view the post authors profile page, in order to connect and learn more about like minded individuals. This section is shown in the following screenshot. 👇
• In the future users will be able to login using exsting social media accounts such as google to make logging in easier.
Site Admin
The Admin panel currently allows control over the following:
• Admin can Add users • Admin can Delete users • Admin can Edit users settings/profile • Admin can view users settings/profile
• Admin can Add posts • Admin can Delete posts • Admin can Edit posts • Admin can view post
• Admin can Add new categories • Admin can Delete categories
• Admin can Add Comments • Admin can delete Comments • Admin can view Comments • Admin can edit Comments
Here is a picture of the admin panel 👇
In Development I used the Django default database SQLite, this is not compatible with Heroku so I switched to Heroku Postgres Prior to Deployment.
My web application is deployed on heroku, the steps taken are disccused later in the README.
Canva - I used Canva to create my default images. I also used Canva to remove the background colour of my logo.
AmIResponisve - I used amiresposive to generate the resposive image at the start of my Readme.
WebpageTest- I used webpage testing to test my webpage across a range of devices.
Tailor Brands - I used Tailor brands to create my logo.
Git - I used Git to track the changes to my code. Git was also used for version control.
Github - Github was used to host my project files. I then used Gitpages to deploy the website.
Vs Code- VS Code powers gitpod and was used to build the website.
Slack - I used slack to get feedback on my project.
Google Fonts - The fonts used are google fonts.
Figma - I used figma to design my mockups.
Gitpod - Gitpod is powered by VS Code, storing my code in the cloud. I can then commit that code to my Github repository as Gitpod and Github are connected.
Lighthouse testing - I used lighthouse testing to test the performance of my webpage.
Cloudinary - I used cloudinary store media files uploaded by users.
• W3C HTML Validator - Passed
click the hyperlink above to view my results. 👆
• W3C CSS Jigsaw Validator - Passed
click the hyperlink above to view my results. 👆
• JsHint- Passed
click the hyperlink above to view my results. 👆
° I only used a few lines of JS, but had two warnings about renaming. No errors were found.
• Python - Passed
Initially I had quite a few errors relating to line spacing and line length. These have since been corrected and there are no errors in my workspace. All python code is PEP8 compliant, unless it is not possible to do so(explained below). I have tested the code in all of the files listed below 👇 using a PEP8 validator and I used the pydocstyle linter extension in vscode.
The settings.py file returned two errors due to Django rules allowing longer line lengths (88 characters) than PEP8 (79 charcaters.
This is shown in the screenshot below 👇
The Django-Heroku package I have used in my project is also causing an error as it must be importaed at the end of the file, this goes against PEP8 rules but have passed validation using a DJango lynter.
This is shown in the screenshots below 👇
° blog:
• settings.py
• urls.py
• wsgi.py
° myblog:
• admin.py
• apps.py
• urls.py
• views.py
• models.py
• forms.py
° users:
• apps.py
• urls.py
• views.py
• models.py
• forms.py
To ensure peformance was tested exstensively, I used two tools
•Lighthouse testing The overall performance of my webpage is good but there is room for improvement in best practices. As seen in the screenshot below.
The low score in this area is due to cloudinary files been passed over http instead of https. I have not found a way to change this on the free plan (current plan i am using). Although for future projects I will ensure https is used.
jquery was also used in this project, this is a library that has known security risk. I will not be using jquery for future projects to maintain best practices.
•WeppageTest
I used webpage testing to conduct performance testing across a range of emulated devices, my results were the same across all devices tested. The results from a Motorola G (gen 4) - 4G can be seen here.
The above HTML and CSS Validators test for valid code that is compatible with all browsers.
The following functions were tested on the following browsers using a pass / fail system:
| Function | Browser | Result |
|---|---|---|
| Add/Edit/Delete post |     |
PASS |
| Comment | |
PASS |
| Like/dislike | |
PASS |
| Navbar | |
PASS |
| Signup/Login/Logout | |
PASS |
| Footer Links | |
PASS |
• OS compatibility was tested on iOS 14.8, Android 11, ipadOS 15, Windows 10 and MacOS Monterey.
• The devices used include but are not exclusive to Macbook Pro, iphone XR, HTC 11, iphone 11Pro and iPad air. To ensure the website was thoroughly tested I used Chrome Dev Tools to test on a range of viewports from 320px up to 2560px.
• I shared the web app with family and friends of varying ages and computing skills to test the ease of navigation on a variety of devices. There were no issues with navigation.
• I also used testers to check that all buttons were working and there were no broken links. No broken links were found but there were a few no reverse errors, these issues have been corrected. After corrections were made I asked for them to be tested again and everything was working as expected.
As demonstrated by the table below 👇, all intended user stories have been implemented. Screenshots of the relevant features can be seen in the [features](## Features) sectio above ☝️
| User Type | User Story | Priority | Implemented |
|---|---|---|---|
|
I want to be able to view blog posts, without logging in or signing up | |
Yes |
|
I want to be able to view blog posts snippets from the home page | |
Yes |
|
I want to be able to view detailed blog posts easily | |
Yes |
|
I want to be able to add my own blog posts | |
Yes |
|
I want to be able to edit my own blog posts | |
Yes |
|
I want to be able to delete my own blog posts | |
Yes |
|
I want to be to add comments to blog posts | |
Yes |
|
I want to be able to like/dislike blog posts | |
Yes |
|
I want to be able to see the number of likes a posts has | |
Yes |
|
I want to be able to sign up | |
Yes |
|
I want to be able to login/logout | |
Yes |
|
I want to be notified when an action is successful/unsuccessful | |
Yes |
|
I want to be able to create my own profile | |
Yes |
|
I want to be able to view/edit my profile | |
Yes |
|
I want to be able to view the post authors profile | |
Yes |
|
I want to be able to reset my password | |
Yes |
|
I want to be able to report offenesive content | |
No |
|
I want to be able to easily manage posts, users and comments | |
Yes |
|
I want to have my own admin area | |
Yes |
|
I want to be able to add my own posts and comments | |
Yes |
|
I want to be able to use other social media to login | |
No |
As previously mentioned this project was developed using a GitPodworkspace. The code was committed to Git and pushed to GitHub using the terminal. The code was then remotely deployed to Heroku.
To deploy this blog app to Heroku from its GitHub repository,the following steps were taken:
- Create the Heroku App:
• Select Create new app in Heroku.
• Choose a name for your app and select the location.
- Attach the Postgres database:
• In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.
- Prepare the environment and settings.py file:
• In the Settings tab, click on Reveal Config Vars and copy the URL next to DATABASE_URL.
• In your GitPod workspace, create an env.py file in the main directory.
• Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
• Add the SECRET_KEY value to the Config Vars in Heroku.
• Update the settings.py file to import the env file and add the SECRETKEY and DATABASE_URL file paths.
• Update the Config Vars with the Cloudinary URL, adding into the settings.py file also.
• In settings.py add the following sections:
° STATIC_URL
° STATICFILES_DIRS
° MEDIA_URL
° MEDIA_ROOT
° TEMPLATES_DIR
° Update DIRS in TEMPLATES with TEMPLATES_DIR
° Update ALLOWED_HOSTS with ['app_name.herokuapp.com', 'localhost']
- Set DISABLE_COLLECTSTATIC and Deploy to Heroku:
• Create two directories for your static files (add a subfile for each file type) and templates (if multiple apps used create a seperate nested template file for each additional app to prevent confusion).
• Create a file named Procfile in the main directory and add the following:
° `web: gunicorn project-name.wsgi`
• In the terminal, log in to Heroku and then enter the following:
° `heroku config:set DISABLE_COLLECTSTATIC=1 --app (Heroku App Name)`
• Go to the Deploy tab on Heroku and connect to GitHub, then to the required repository. Click on Deploy Branch and wait for the build to load. When the build is complete, the app can be opened through Heroku.
• There are currently no known bugs. However I did have some issues during the project, solutions to these issues have been highlighted using "fix:" commits.
All code was written by Brieanna McDonald (the author)
I did use the following resources to better understand the django framework 👇
### To write my README
• Thanks to Danmadeira for some of the shields used in my README, they are from this repository.
• Thanks to sheilds.io of the custom shields used for User Story table.
• Thanks to dev.tofor some of the shield used in my README.
• All images added to the site by me are from pexels unless stated otherwise.
• Code Institute sample README
• Emoji Cheat Sheet to add emojis in my README.
• Markdown badges to add badges to my README.
• Thanks to everyone on the code institute slack channel who provided feedback and support during this project.
• To everyone else who tested the web app, thank you for your feedback.