Live Site

1. Intro
2. Technologies
3. Features
4. Testing
5. Credits
6. Deployment

• Not Read It is a socail media website similar to Reddit.

An Agile methodology was used in planning the project utilising Github's Project kanban. Issues were used to create user stories. When work began on a user story, it was moved to the "In Progress" column. When the task is complete, it is moved to the "Done" column. A collumn named Future Features is used for prospective features for the website and for any features that were not complete by the project deadline.

Wireframe Images

• View Post List: As a Site User I can view a list of posts so that I can select one to read. #2
• Open a Post: As a Site User I can click on a post so that I can read the full text. #3
• Manage Posts: As a Site User / Admin I can create, read, update and delete posts so that I can manage my content on the website. #5
• Account Registration: As a Site User I can register an account so that I can comment and like. #8
• Site Navigation: As a Site User I can easily navigate the site using the navbar or get back to the home page by clicking the logo. #14
• Select Category: As a Site User / Admin I can select a topic category when creating a post. #15
• Categories: As a Site Admin I can create, view, update and delete categories on the website. #16

• Python
• HTML5
• CSS

• GitHub
• GitPod
• Heroku
• Django
• WhiteNoise
• PostgreSQL

Like / Unlike: As a Site User I can like or unlike a post so that I can interact with the content.

View Likes: 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.

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

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

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

Category List: As a Site User I can view a list of categories so that I can view posts within.

• Manually testing each each path.

Manual Test of post paths

• Repeated real world testing performed with:

Laptop mode

Tablet mode

1920 x 1080px

2560 x 1440px

This functionality testing involved:

• Verifying all navbar & other links functioned as expected.

iPhone X

Samsung Galaxy S20 Ultra

iPhone 6/7/8

• Using Chrome Dev Tools Elements tab to test out small styling changes before adding.

• Checking that fonts scaled correctly for each display size.

• Checking for overflow.

Checked for overflow using Unicorn Revealer

• Tested html at https://validator.w3.org.

Initiallyfound one HTML error, missing lang element in HTML Tag. Resolved Issue. Remaining errors due to Django.

• Tested CSS at https://jigsaw.w3.org/css-validator/

CSS MIME bug. Unable to resolve

Removed DISABLE_COLLECTSTATIC config vars from Heroku which removed one of the errors. Error may be a conflict with WhiteNoise. Previously used Cloudinary, but removed any reference from settings and removed from env.py when error occured.

The live deployed application can be found at not read it.

This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

Deployment steps are as follows, after account setup:

• Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
• Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
• From the new app Settings, click Reveal Config Vars, and set the following key/value pairs:
  • DATABASE_URL (this comes from the Resources tab, you can get your own Postgres Database using the Free Hobby Tier)
  • SECRET_KEY (this can be any random secret key)

Heroku needs two additional files in order to deploy properly.

• requirements.txt
• Procfile

You can install this project's requirements (where applicable) using: pip3 install -r requirements.txt. If you have your own packages that have been installed, then the requirements file needs updated using: pip3 freeze --local > requirements.txt

The Procfile can be created with the following command: echo web: gunicorn notreadit.wsgi > Procfile

For Heroku deployment, follow these steps to connect your GitHub repository to the newly created app:

Either:

• Select "Automatic Deployment" from the Heroku app.

Or:

• In the Terminal/CLI, connect to Heroku using this command: heroku login -i
• Set the remote for Heroku: heroku git:remote -a <app_name> (replace app_name with your app, without the angle-brackets)
• After performing the standard Git add, commit, and push to GitHub, you can now type: git push heroku main

The frontend terminal should now be connected and deployed to Heroku.

Gitpod IDE was used to write the code for this project.

To make a local copy of this repository, you can clone the project by typing the follow into your IDE terminal:

• git clone https://github.com/tadhgnolan/not-read-it.git

You can install this project's requirements (where applicable) using: pip3 install -r requirements.txt.

Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.

Additionally, you'll need to create your own env.py file with the following keys:

• SECRET_KEY (can be any secret value)
• DATABASE_URL (this comes from the "Resources" tab on your Heroku app)

• A social media site designed by Tadhg Nolan

• Django Blog Used and modified code from this Github repository.

• Stack Overflow
• W3Schools
• r/python
• Reddit

• Cormac Nolan - Feedback and advice.
• Tim Nelson - Mentor.