Tech Discuss is a website where people can talk about all things tech. It's a great place to find information and advice on all things related to technology. This is a site for people who are interested in technology. To be able to come together and report on the latest things that have happened in technology. Users can start discussions about different tech-related topics by posting their thoughts on these topics. Other users can then join in on these discussions by commenting on the posts.

The live link can be found here - https://techdisqus.herokuapp.com/

I made user stories to plan and develop the functionality of the website. Each user story was separated into Must Have, Should Have, Could Have, and Won’t Have categories to help determine what was most important to focus on or leave out when building the website.

• Upvote Posts: As a Site User I can upvote a post so that it indicates that I agree with it

• Comment on a post: As a Site User I can write comments on a post so that I participate in the discussion

• View post list: As a Site User I can look through a list of posts so that I can find which ones I want to view

• Filter Categories: As a Site User I can filter posts by category so that I only see those that are relevant to me

• Open a post: As a Site User I can click on a post so that I can see the entire post, including upvotes and comments on a separate page

• Make a post: As a Site User I can create my own post so that I can receive upvotes and comments for posting it

• Account registration: As a Site User I can register for an account so that I can make posts, comments, and upvote.

• Manage Website Content: As a Site Admin I can delete user posts and comments so that the website is free of objective content

• Profile page: As a Site User I can view my profile page so that I can see my information, posts, and comments

• Notification Messages: As a Site User I can receive a message after I make a post, comment, sign up, login, or logout so that I know it was done successfully

• Downvote Posts: As a Site User I can downvote a post so that it indicates that I disagree with it

• Image post: As a Site User I can post an image so that I receive upvotes and comments for posting an image

• User Managed Posts: As a Site User I can edit and delete my posts so that I can manage the posts I've contributed to the site

• User Managed Comments: As a Site User I can edit and delete my comments so that I can manage the comments I've contributed to the site

• Search for a post: As a Site User I can search for posts so that I can find a specific post

• Video post: As a Site User I can post a video so that I can receive upvotes and comments for posting video

• Allow Social login: As a Site User I can register or login with my social account so that I don't have to create a new account

• Password and Username reset: As a Site User I can reset my password/username so that I keep my account secure

• View other users profile page: As a Site User I can look at another user's profile so that I can see their posts and comments

• Delete own account: As a Site User I can delete my account so that I can remove all of my content as well as my profile from the website

• Back to top button: As a Site User I can click a button to take me back to the post at the top of the page so that I can get to the top without having to scroll

• Error Notification Messages: As a Site User I can receive an error message after I make mistake on a post, comment, sign up, or login so that I know it was not successful

• Dark mode: As a Site User I can set the website to dark mode so that I don’t strain my eyes

23 user stories in total composed of 10 Must-Have, 5 Should Have, 7 Could Have, and 1 Won’t Have. Must Haves make up 43% of the total user stories.

The website colours used are black, white and blue colours that contrast well with each other. I verified this using Adobe color.

• The navbar uses a white background with black text
• The main website background used the blue colour
• The card items are white and their contrast with blue makes for a satisfying look
• Buttons are blue or black depending on their function. Blue usually edit buttons and black for everything else.
• Footer is white

The website uses Helvetica Neue as the main font-family and it is supplied by Bootstrap default.

Wireframes were made with Figma to get a better idea on how things would look layout-wise on the website. The website is meant to look similar to Reddit, as it is a news posting website based on Reddit there are cards with post content inside them just like Reddit.

The projects feature on GitHub was used to create a Kanban board that lists all of the user stories. Each user story has a task that the user might be able to do on the website once the functionality has been added. All the must have user stories have been completed and the some of the user stories that are should have and could have will get implemented in the future when there is more time.

• Upvote Posts: As a Site User I can upvote a post so that it indicates that I agree with it.
• Comment on a post: As a Site User I can write comments on a post so that I participate in the discussion
• View post list: As a Site User I can look through a list of posts so that I can find which ones I want to view
• Filter Categories: As a Site User I can filter posts by category so that I only see those that are relevant to me
• Open a post: As a Site User I can click on a post so that I can see the entire post, including upvotes and comments on a separate page
• Make a post: As a Site User I can create my own post so that I can receive upvotes and comments for posting it
• Account registration: As a Site User I can register for an account so that I can make posts, comments, and upvote.
• Manage Website Content: As a Site Admin I can delete user posts and comments so that the website is free of objective content
• Profile page: As a Site User I can view my profile page so that I can see my information, posts, and comments
• Notification Messages: As a Site User I can receive a message after I make a post, comment, sign up, login, or logout so that I know it was done successfully

• User Managed Posts: As a Site User I can edit and delete my posts so that I can manage the posts I've contributed to the site
• User Managed Comments: As a Site User I can edit and delete my comments so that I can manage the comments I've contributed to the site
• Search for a post: As a Site User I can search for posts so that I can find a specific post

• View other users profile page: As a Site User I can look at another user's profile so that I can see their posts and comments

• Downvote Posts: As a Site User I can downvote a post so that it indicates that I disagree with it
• Image post: As a Site User I can post an image so that I receive upvotes and comments for posting an image

• Video post: As a Site User I can post a video so that I can receive upvotes and comments for posting video
• Allow Social login: As a Site User I can register or login with my social account so that I don't have to create a new account
• Password and Username reset: As a Site User I can reset my password/username so that I keep my account secure
• Delete own account: As a Site User I can delete my account so that I can remove all of my content as well as my profile from the website
• Back to top button: As a Site User I can click a button to take me back to the post at the top of the page so that I can get to the top without having to scroll
• Error Notification Messages: As a Site User I can receive an error message after I make mistake on a post, comment, sign up, or login so that I know it was not successful

• Dark mode: As a Site User I can set the website to dark mode so that I don’t strain my eyes

• User model is automatically generated by Django when a user creates their account.

• Topics are created by the admin user using superuser access to the admin interface. With this only the admin is capable of creating topics.
• The name attribute has a character field that allows the admin write a name for the topic.

• Post model allows users to make posts as authors
• The title attribute has character field for users to be able to write a title for their post.
• The slug attribute has slug field that will slugify title of the post so it shows in the url
• The author attribute has a foreign key field that has a relationship with the User model id attribute.
• The topic attribute has a foreign key field that has a relationship with the Topic model id attribute.
• The updated_on attribute has a datetime field that will show the date when the post was edited
• The content attribute has a text filed for users to be able to write text content in their post.
• The created_on attribute has a datetime field that will show the date when the post was made.

• The post attribute has a foreign key field that has a relationship with the Post model id attribute.
• The user attribute has a foreign key field that has a relationship with the User model id attribute.
• The body attribute has a text field for users to be able to write a comment.
• The created_on attribute has a DateTime field that will show the date when the comment was created.

• The user and post attributes have many to many relationship with the User model id and Post model id
• Allows users to put upvotes on a post

The SQL Relational database used was PostgreSQL

• HTML
• CSS
• JavaScript
• Python

• Gitpod

• Git
• GitHub

• Figma
• DrawSQL

• Chrome Developer tools

• Bootstrap(5.0)

• Django

• Heroku
• Gunicorn
• Cloudinary

• PostgresSQL

• Django Generic list view does a lot things that is not clear and raised errors when a page with a slug URL was clicked on. Switching to a normal view fixed the issue.

• Posts and comments aren’t ordered by most recernt even though the meta class is set to order by created on date

• Likes and Comments don't show on homepage

• Trying to edit or delete comments on profile pages causes errors

1. Create Repo

2. Clone Repo

3. Install python

4. Install Django and the supporting libraries

   pip3 install django gunicorn
   pip3 install dj_database_url psycopg2
   pip3 install dj3-cloudinary-storage
   

5. Create requirements file for Heroku

   pip3 freeze --local > requirements.txt
   

6. Like this

   asgiref==3.5.2
   backports.zoneinfo==0.2.1
   cloudinary==1.29.0
   dj-database-url==0.5.0
   dj3-cloudinary-storage==0.0.6
   Django==4.0.4
   django-allauth==0.50.0
   django-autoslug==1.9.8
   django-crispy-forms==1.14.0
   django-summernote==0.8.20.0
   gunicorn==20.1.0
   oauthlib==3.2.0
   psycopg2==2.9.3
   PyJWT==2.4.0
   python3-openid==3.2.0
   requests-oauthlib==1.3.1
   sqlparse==0.4.2
   

7. Create a new Django Project

   django-admin startproject <projectName>
   

8. Create a new Django app

   python3 manage.py startapp <appName>
   

9. Then add the new app to settings.py file

   INSTALLED_APPS = [
       'django.contrib.admin',
       'django.contrib.auth',
       'django.contrib.contenttypes',
       'django.contrib.sessions',
       'django.contrib.messages',
       'django.contrib.staticfiles',
       'newapp', #new goes here
   ]
   

10. Now you need to migrate changes

```bash
python3 manage.py migrate

```

11. then run the project to make sure everything is working okay

```bash
python3 manage.py runserver

```

12. Then you sign up or login into Heroku to create the app

13. Create a new app on Heroku by clicking the new app button

14. Go to the resources tab

15. Search for ‘Heroku Postgres’

16. Click the submit order form button

17. Go to the settings tab

18. Click on the reveal Config Vars button

19. Copy the Postgres URL value to the right of the Database_url key

20. Go back to the Django project on the code editor

21. Create an env.py file in the same directory as your manage.py file.

22. Add in these environment variables for the database and secret key inside the env.py file.

23. Now copy the name value of your secret key and paste it into config vars on Heroku then click add.

24. Go to the settings.py file

25. Add these imports at the top of the settings.py file.

```python
from pathlib import Path
import os
import dj_database_url
if os.path.isfile('env.py'):
    import env

```

26. Then go to the insecure SECRET-KEY in settings.py and change its value to target the secret key in the env.py file instead.

27. Then go down to the database section in settings.py. Comments out the default DATABASES python dictionary with ctrl +/ then add your own database link to the env.py file.

28. Now you need to migrate changes again

```bash
python3 manage.py migrate

```

29. You can go back to Heroku app now and click the resources tab

30. Then click on the Heroku Postgres add-on to check that the database is working.

31. Now you just need to log into your Cloudinary account and copy your API Emviroment Variable.

32. Go back to the Django project then go to the env.py file.

33. Then paste it in as a new environment variable. Make sure to remove the Cloudinary_url= part at the beginning of the value or else it won’t be valid.

34. Then copy the same key and value to Heroku config vars

35. Now add another config var DISABLE_COLLECTSTATIC

36. Then go back to the Django project on your code editor. Go to the settings.py file.

37. Add the cloudinary libraries to settings.py

```bash
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'cloudinary',
     'news', #new goes here
]

```

38. Now we just need to tell Django to use Cloudinary to store our media and static files.

39. Go to the static files section that is near the end of the settings.py file. Then add in these links.

```python
# Static files (CSS, JavaScript, Images)
# <https://docs.djangoproject.com/en/4.0/howto/static-files/>

STATIC_URL = '/static/'
STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = [os.path.join(BASE_DIR, 'staticfiles')]

MEDIA_URL = '/media/'
DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

```

40. Now you need to tell Django where the templates will be stored.

41. Back to the top of settings.py file in the base directory section. Add the templates directory variable

```python
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')

```

42. Then go to the middle section in settings.py you need to find the templates list and add TEMPLATES_DIR to the DIRS KEY in the dictionary.

```python
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATES_DIR],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

```

43. Now go to the ALLOWED_HOSTS variable in the settings.py file and add the Heroku host name.

```python
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['<appname>.herokuapp.com']

```

44. Now you to create 3 directories; media, static, templates in the root directory.

45. Now we nee to crate a ‘Procfile’ that contains this text

```
web: gunicorn <projectName>.wsgi

```

46. Now you save all the files then use git to commit files to GitHub

```bash
git add. 
git commit -m "deployment commit"
git push

```

47. Then we deploy to heroku

48. Open the terminal.

```bash
command: heroku login -i

```

49. Get your app name from heroku.

```bash
heroku apps

```

50. Set the heroku remote. (Replace <app_name> with your actual app name and remove the <> characters)

```bash
heroku git:remote -a <app_name>

```

51. Add and commit any changes to your code if applicable

```bash
command: git add . && git commit -m "Deploy to Heroku via CLI"

```

52. Push to both GitHub and Heroku

```bash
git push origin main
git push heroku main

```

1. Go to the settings.py file and set DEBUG to True

   DEBUG = TRUE

2. Then below that add X_FRAME_OPTIONS = ‘SAMEORIGIN’

   X_FRAME_OPTIONS = 'SAMEORIGIN'

3. Then you save eve thing then commit then push to GitHub

   git add .
   git commit -m "commit message"
   git push
   

4. Then head over to your Heroku app on the Heroku website.

5. Go to settings reveal config vars then remove DISABLE_COLLECTSTATIC variable

6. Then deploy to Heroku

7. Open the terminal.

   command: heroku login -i
   

8. Get your app name from Heroku.

   heroku apps
   

9. Set the Heroku remote. (Replace <app_name> with your actual app name and remove the <> characters)

   heroku git:remote -a <app_name>
   

10. Add and commit any changes to your code if applicable

```bash
command: git add . && git commit -m "Deploy to Heroku via CLI"

```

11. Push to both GitHub and Heroku

```bash
git push origin main
git push heroku main

```

• The base code of the project is from Code institute’s I Think Therefore I Blog project.
• Cards, side panel, and footer is from Bootstrap
• Generating upvotes is from Code institute’s I Think Therefore I Blog project
• Using related names in models is taken from a Reddit answer in the comments
• Code for slug routing is from Vegibit
• Code on how to use auto slug
• Code for styling Django forms with Bootstrap is from the Codemy blog video
• Code for creating a form post that sets the currently logged in use
• Code used to redirect to same page
• Filter & Search functionality is from Traversy Media’s django 7 hour course
• Adding Django message with bootstrap to trigger after certain condition bootstrap messages video
• Code for creating a user profile pages is from Traversy Media’s django 7 hour course

The posts on the website to fill it with user content came from these links

• The cheap GPU post
• The posts about Microsoft’s windows server drop
• The post about the tiny remote controlled robot crab