The Fast Supper

The Fast Supper is a blog website dedicated to providing more information regarding fasting and its health benefits.

The website is targeted at people who are curious about fasting, so these like-minded people can learn more about the subject, and engage with each other by commenting on the blog posts.

Visit the live site here.

UX (User Experience)

Project Goals

• Create a community in which fasting enthusiasts are able to learn more about the subject and exchange ideas through the comment board on the blog posts.
• Provide an educational platform by supporting and helping motivate the users who are currently fasting or thinking about it.

Target Audience

• Anyone who wants to learn more about fasting.
• People currently on a fast who need extra support.
• Fasting practicioners who want to exchange and grow ideas with like-minded people.

User Stories

Agile methodology tool:

• GitHub Projects was used to create and manage a Kanban board, for planning and implementing this project's functionalities.

• As a Site User I can view a list of posts so that I can easily select one to view.

• As a Site User I can view a list of posts so that I can select one to read.

• As a Site User I can click on a post so that I can read the full content.

• As a Site User / Admin I can view the number of likes on each post so that I can see which is the most popular or viral.

• As a Site User / Admin I can view comments on an individual post so that I can read the conversation.

• As a Site User I can register an account so that I can comment and like.

• As a Site User I can leave comments on a post so that I can be involved in the conversation.

• As a Site User I can like or unlike a post so that I can interact with the content.

• As a Site Admin I can create, read, update and delete posts (CRUD) so that I can manage my blog content both from the front and back-end.

• As a Site Admin I can create draft posts so that I can finish writing the content later.

• As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments.

Wireframes

The mockups below were done with the help of Balsamiq (for both desktop and mobile screens), these were useful to help visualise the project.

• Desktop:

  • Home page
  • Blog post page
  • Register page
  • Login page

• Mobile:

  • Home page
  • Register page
  • Login page

• Models Diagrams:

Design

• The colour scheme was generated with Coolors.

• Google Fonts was used for the website's fonts. Inspiration on the choice of fonts (Chivo & Playfair Display) came from this blog post.

Features

Existing Features

• Navigation Bar

  • Navigation is a fully responsive feature on all pages, it includes links on the site's Logo (displaying to the left within the bar), Home, Register and Login pages (the 'Add Post' page only shows up for superusers).
  • The Logout page shows up (and both Register/Login pages disappear) once the user has successfully registered/logged in.
  • The navigation looks the same in each page to allow for easy navigation (without the user having to use the ‘back’ button), taking the user through a logical journey.
  • This section makes it easy for the user to learn more about the site's different sections and content.

• About section

  • About section at home page to welcome and let the users know what the site is about.

• Blog Posts section

  • The Blog posts section displays six posts at a time (with featured images, authors, titles, post dates, excerpts), feturing pagination ("NEXT", "PREV" buttons show up), in case there are seven or more posts.

• Footer

  • The footer area consists of three social links for the blog (Facebook, Instagram and Twitter - all of them, if clicked, open on a separate tab) and "Copyright 2022" writing.
  • Like the navigation section, the footer looks the same on each page (and features on all of the pages) to allow for easy navigation, taking the user through a logical journey.

• Blog Post page

  • Featuring the posts image, posts title, posts author and posts date (two links "Edit" & "Delete" only appear if the logged in user is an admin).
  • Post body content, like and comment count.
  • Comment and likes counter which displays how many users liked that particular post, if the user clicks on the heart icon they like or unlike the post.
  • The comments section features information displayed from all users who have posted comments, such as their username, the date of the comment and the comment's content. It also features a text field to the right, where users who are logged in are able to engage with each other/the post and submit a comment.
  • Comment moderation for the admins so they can approve or disapprove users' comments (once an user submits a comment, the message below appears to them).

• Add Post page

  • If the user is logged in as an admin, they are able to add a blog post (both from the front and backend), simply by clicking on the "Add Post" navigation link.
  • The page features a form where the user can fill out all the details for the new post, such as title, slug, author, image (upload a feature image), content, status (draft or published).

• Edit Blog Post page

  • If the user is logged in as an admin, they are able to Edit any of the Blog posts (both from the front and backend), simply by clicking on the "Edit" link at the blog post's header.
  • The page features a form where the user can edit the current post's details such as title, content and excerpt.

• Delete Blog Post page

  • If the user is logged in as an admin, they are able to delete any of the Blog posts (both from the front and backend), simply by clicking on the "Delete" link at the blog post's header.
  • The page displays the title of the post for deletion, a warning message and two buttons (delete, back home).

Features Left to Implement

• Forum/Members Area

  • Implementing a forum/members area in the future could be highly beneficial for The Fast Supper's community. The users would be able to have accountability partners as opposed to just exchanging ideas via the blog posts.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Python3

Frameworks, Libraries & Programs Used

• Balsamiq
  • Balsamiq was used to make desktop/mobile mockups in order to visualise the project.
• Bootstrap
  • Bootstrap template.
• Cloudinary
  • Cloudinary was used to store the project's images.
• Django
  • Django was used to build the app.
• Django Allauth
  • Django allauth for account management.
• Django Crispy Forms
  • Django Crispy Forms for rendering elegant DRY forms.
• Font Awesome
  • Font Awesome was used to add icons to improve the design of the website.
• Git & Gitpod
  • Git was used for version control via the Gitpod terminal in order to commit to Git and push to GitHub.
• GitHub
  • GitHub was used for version control.
• Google Fonts
  • Google Fonts was used to import the fonts which are used on the website.
• Heroku
  • Heroku was used originally for hosting and deploying the website.
• Render
  • The project was then migrated from Heroku to Render.
• Lucidchart
  • Lucidchart was used for drawing the database models.
• PostgreSQL
  • PostgreSQL for database management.
• ElephantSQL
  • PostgreSQL for database management.
• Summernote
  • Summernote WYSIWYG for Bootstrap.

Testing

• Manual testing:

  • All links, form submissions, admin privileges, user privileges, app functions were tested out and work as intended.

Testing User Stories

• As a Site User I can view a list of posts so that I can easily select one to view.

  • As soon as the user lands at the home page, they are able to see all the available blog posts.

• As a Site User / Admin I can view the number of likes on each post so that I can see which is the most popular or viral.

  • All the posts display a heart icon with a number next to it (which indicate how many times the post has been liked).

• As a Site User / Admin I can view comments on an individual post so that I can read the conversation.

  • Whenever the user is reading a post, once they scroll down to the comments section, they can read any comments that users have left on that particular post.

• As a Site User I can register an account so that I can comment and like.

  • The navigation bar is a section that makes it easy for the user to learn more about the site's different sections, and it includes a "Register" page. Once the user goes through the straightforward registration process, they are able to like and comment on different posts.

• As a Site User I can like or unlike a post so that I can interact with the content.

  • Once the user is registered, they may click on the heart icon to simply like or unlike a post.

• As a Site Admin I can create, read, update and delete posts (CRUD) so that I can manage my blog content both from the front and back-end.

  • The site admin is able to perform all CRUD functionalities from either the Django admin panel, or if they prefer, from the front-end as well. Once a superuser is logged in they are able to:
    • See an "Add Post" page in the navigation bar, once they click on this, they are greeted with a form to add a post.
    • If they click on any blog post they will see two links at the blog post header, "Edit" & "Delete".

• As a Site Admin I can create draft posts so that I can finish writing the content later.

  • Whenever a post author decides to write a blog post, they have a dropdown option to pick from, and they can either choose the post status as "Draft" or "Publish".

• As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments.

  • Admins may be able to read submitted comments and decide via the panel if they'd like to approve or delete them.

Validator Testing

• HTML

  • No errors/warnings were returned when passing through the official W3C validator

• CSS

  • No errors were found when passing through the official (Jigsaw) validator

• Python

  • No errors were returned when passing through the PEP8online check.

Google Lighthouse

• Google's Lighthouse was used for measuring the quality of the pages.

  • Home Page (desktop) result:

  • Home Page (mobile) result:

Color Contrast Accessibility Checker

• a11y Color Contrast Accessibility Validator was used to analyse the contrast of the site and make sure it complies with website accessibilities regulations.
  • Home Page result:

Responsive Testing

• Am I Responsive?
  • This design tool was used to show how responsive the website is and looks across four different viewports (Desktop, Laptop, Tablet and Mobile):

Device Testing

• The Fast Supper website was tested on several devices/environments (without any issues), including:
  • MacBook Air 13.3" M1 2020 (macOS Monterey 12.3.1)
  • Lenovo 5i i5 15" (Windows 10 64x)
  • iPhone 6
  • iPhone 7
  • Google Pixel 4a (Android 12)
  • Google Pixel 6 (Android 12)

Browser Testing

• The Fast Supper website was tested on several browsers (without any issues - across different devices), including:
  • Google Chrome (100.0.4896.127) (arm64)
  • Mozilla Firefox (99.0.1 (64-bit))
  • Safari (Version 15.4 (17613.1.17.1.13))
  • Microsoft Edge
  • Brave (Version 1.37.116 Chromium: 100.0.4896.127 (Official Build) (arm64))
  • Vivaldi (4.3.2439.65 (Stable channel) (arm64))

Known Bugs

• When adding a new post via the front end page "Add Post", the placeholder image is always the one to show up, regardless of any other images being selected/uploaded. As a workaround the blog post's placeholder image can later be replaced via the Django Admin Panel.

• The sticky footer and fixed navbar appear larger on lower resolution mobile devices, partially covering some site elements (however this doesn't affect any functionality).

Deployment

Deploying on Heroku

To deploy this application to Heroku from its GitHub repository, the following steps were taken:

• Log into Heroku

• Select "New" and "Create new app".

• Name the new app, choose the region and click "Create app".

• In the "Resources" tab, search for "postgres" at the add-ons text field, select the "Heroku Postgres", then "Hobby Dev", submit.

• In the "Settings" tab, click on "Reveal Config Vars" and input the following key/values:

  • CLOUDINARY_URL
  • DATABASE_URL
  • SECRET_KEY

• Click on "Deploy" and select your deploy method and repository.

• Click "Connect" on selected repository

• Click "Deploy Branch" in the manual deploy section. -Heroku will now deploy the App.

Development Environment

• Create env.py, import os and input the following variables:

  • os.environ["DATABASE_URL"] = "postgres://....."
  • os.environ["SECRET_KEY"] = "....."
  • os.environ["CLOUDINARY_URL"] = "....."
  • os.environ["DEVELOPMENT"] = "True"
  • os.environ["CLOUDINARY_CLOUD_NAME"] = '.....'
  • os.environ["CLOUDINARY_API_KEY"] = '.....'
  • os.environ["CLOUDINARY_API_SECRET"] = '.....'

• Create the requirements.txt file. pip3 freeze --local > requirements.txt

• Create Procfile.

• Click "Deploy" at the top to go to the Deployment settings tab.

• Choose "GitHub" as the deployment method.

• Choose "Automatic deploys" if you would like to enable a chosen branch to be automatically deployed with every GitHub push to the branch.

• Use "Manual deploy" to deploy the current state of a branch to this app (simply enter the name of the branch and "Deploy Branch").

• Once the deployment has completed click on "View app".

Final Deployment on Heroku

GitHub had a security breach and manual deployment via CLI was necessary.

• Set debug flag to false in settings.py DEBUG = FALSE.
• In settings.py add X_FRAMES_OPTIONS = SAMEORIGIN.
• Login to heroku, enter credentials. heroku login -i
• Get your app name from heroku. heroku apps
• Set the heroku remote. (Replace <app_name> with the actual app name). heroku git:remote -a <app_name>
• Add, commit and push to github git add . && git commit -m "Deploy to Heroku via CLI"
• Push to both github and heroku: git push origin main command: git push heroku main

Forking the Repository

By forking the GitHub Repository you make a copy of the original repository on you GitHub account to view and/or make changes without affecting the original repository.

To achieve that simply:

• Log into GitHub.
• Locate the GitHub Repository in question.
• At the top of the repository, on the right side of the page, select "Fork"
• You should now have a copy of the original repository in your GitHub account.

Creating a Clone

How to run this project locally:

• Install the GitPod Browser Extension for Google Chrome.
• Log into GitHub.
• Locate the GitHub Repository you'd like to clone in question.
• Click the green "GitPod" button in the top right corner of the repository. This will create a new GitPod.

Credits

Content

• The instructions on how to reset/remove the latest Git commit from a repo were taken from this GitHub Gist.
• Many thanks to John Elder's Codemy for the "Create A Simple Blog With Python and Django" which was a good reference and example.
• A huge thank you to Matt Rudge and Code Institute for the "I Think Therefore I Blog" Walkthrough project which was a great reference, inspiration and example.

Media

• All the website's images were taken from Unsplash.
• All the blog posts' content was taken from this WebMD link.

Other

• Many thanks to my mentor, Gerry McBride, for his guidance and feedback.