Cosmos

"They say there are no sounds in space. So let's share and create some noise together with Cosmos." Cosmos is your number one source to go to if you want to discuss and connect with others through music.

User Stories

• Create Posts: As a Verified User/Admin, I can create, read, edit and delete posts about music I like and start conversations with other Users.

• Choose Category: As a Verified User/Admin, I can choose among different categories to quickly find the relevant post of interest.

• Categories: As a User/Admin, I can choose among different categories to see all the relevant posts about that topic.

• Post Comments: As a Verified User, I can leave comments on uploaded posts to participate in the conversation.

• View Comments: As a User/Admin, I can view comments on individual posts to read the conversation.

• Like/Vote/Unlike: As a Verified User, I can Like/Vote/Unlike a post to show my interest in the subject.

• View Likes: As a User/Admin, I can see the number of Likes/Votes a post has.

• View popular posts: As a User/Admin, I can view a list of the post with the most Likes/Votes to see which posts are the most popular.

• Account Registration: As a User, I can create a User profile to use the website's functionalities.

• Approve Comments: As Admin of the web application, I can approve or disapprove of comments to filter out objectionable comments.

• Deleting of created Content: As a Verified User, I get notified if I want to delete a post or comment I made and get a chance to regret it.

UX

The forum's design is minimalistic yet a bit colorful to let the topics and posts speak for the website. Cosmos wants the User to feel like they are in a record store with a modern twist, refering to space.

Colour Scheme

The website's primary colors are:

• Black
• different kinds of dark blue
• A white version(rgb(252, 251, 255))
• Normal white (#ffffff)

Typography

• Headings/Menu/Footer/Comments: Montserrat subrayada
• paragraph text: Quicksand
• Logo: Modak
• Icons: FontAwsome

The fonts for this project are minimalistic but still familiar to the User. The font Montserrat subrayada is used for the significant headings to create a clean and minimalistic feel to the website. The font Quicksand creates a soft, warm, and familiar feeling for the paragraph text. Modak gives a vintage feel, which is in great contrast to the other fonts' more modern feeling. The Icon used for like, comment and social media are from FontAwsome.

Wireframes

• Desktop

• Mobile

Features

Existing Features

Menu/Navbar

The site has two different navbars at the top. The first navbar holds the links to the home page, the sign up to become a Verified User/Admin, the login if you are already a Verified User/Admin, and an add-post button will show if the Verified User/Admin is active as a site User. The signup and login link will change to a logout link when the User is active on the site. The menu is collapsable, so it becomes a hamburger menu when the screen size is 575px or lower.

• Normal

• Collapsed

The second navbar holds the links to all the different categories that the post can have. So it is easier for the Users to find posts and get involved in conversations about the topic of their interest. The genre link is a drop-down button that displays all the current genres available at the site.

• Category Menu Normal

• Category Menu Collapse

SignUp/LogIn/LogOut

To add a post and start a conversation, the User must become a site Verified User/Admin. To signup for the site, the User must create a username and password. When that User has a registered username and password, they can log in and out from the site as they like.

• Sign Up

• Log In

• Log Out

View and create a post

A visitor to the website can view all the posts made on the site. To add a post of their own, they must be a Verified User/Admin. When creating a post, the User has to give it a title, choose a category, and write the desired content. The User can also upload a picture with the post. On the home page, Users can see a list of the ten most-liked posts. In that way, Users can find new artists, songs, or music genera they have never listened to before.

• Unverified User: Read post with and without comments

  

• Verified User/Admin: Read post with and without comments

  

Pagination

The home page also shows the latest post made for the visitors. After fifteen posts, they can go forward to see more posts. The pagination also applies to the other pages for categories and most liked posts.

View and post Comments

A website User can see comments to a post and follow the conversation. If Users want to post a comment themselves, they must be site members and logged in. To keep the tone of the discussion in the best way, they need to be approved by the admin or staff before Users can see it displayed on the website.

• Add Comment as a Verified User/Admin

• View Comments

• View Comments as a Verified User/Admin

View Likes and like a post

Any visitor to the website can see how many likes a post has, but a visitor must log in as a User to like a post.

• View likes

• Likes a post

• Unlikes the post

Editing content made

A User can choose to edit a post they made. They can edit the title the comment's content and change the image.

Deleting content made

If a User has made a post, they can delete that content if they desire to do so. If they decide to delete content, they will get a message to confirm if they really want to delete it.

Footer with Social Media Icons

The footer contains several Social Media Icons that are relevant to a music-oriented website. When a User clicks on one of the icons, the website related to the icons will open in a new tab.

Features Left to Implement

A Profile page

A profile page for Users. This page could show relevant information like their post and their conversations. It could also display a list of posts with the status of draft. At the moment, a User can only post a post directly. If they change their mind and go back to another page of the site, that post will be unable to retrieve it.

Edit and Delete Categories

Another thing to implement would be the ability for Users to edit and delete the comments they posted.

Multiple categories

A User gets to choose to add multiple categories for a post to make it more visible for others and give the User a bigger chance to start a conversation.

Better layout design for the forms

Create better-looking forms for the login, log out and sign up page. The input fields should align with each other to get a better UX.

The Hero image

Make the current Hero image a carousel with posts or pictures related to new music.

Custom Media Queries

For a better UX and overall design, implementing custom Media Queries for elements like 'Add Post' would create a more accessible format for the eye.

Show Username in the Navbar/Menu

Adding the Verified User/Admin username to the navbar would better indicate to the User if they are logged in or not. This added username could also be a link to a future Profil page.

Technologies Used

These are the following technologies and packages used to develop this project:

• HTML: HTML5 are used to build the core structure of the website

• CSS: CSS is used to style the website with colors, fonts, placement of elements, etc.

• JavaScript: JavaScript are used to make the website more interactive for the User

• Python: Python is used to build the core structure and code for the project

• Heroku: Heroku is the deployment environment used to deploy the project and connected with the GitHub repository

• Gitpod: Gitpod is the development environment used for developing all the code during this project

• GitHub: GitHub are used to store the repository for this project

• Git: Git is used to create backups of the project and ensure that all versions of the project is pushed to GitHub

• Canva: Canva is a web application used to create the wireframes for this project

• DevTools: Dev Tools is used to look over the development of the website, debugging problems, and try different approaches to issues that would occur during the process.

• Auto Prefixer: Auto Prefixer is an application used at the end of the project to give the CSS code some extra properties when used on different browsers.

Django packages

To build this project the following packages needs to be installed:

Testing

To view all tests for this project, please refer to the TESTING.md file.

Deployment

The site was deployed to Heroku. The steps to deploy are as follows:

• Go to the Heroku site, sign up for free if you do not already have an account.
  • If creating an account, fill in the signup form with name.
• On the dashboard page, navigate to the Create New App button and click.
• Give the app a unique name; it can not have the same name as another app, choose the region you are currently located in and select Create app.
• Go to the Resources tab and select add a database. In the add-ons box, search for Postgres. Select Heroku Postgres and click Submit Order Form.
• On the apps dashboard page, navigate to the Settings tab.
• On the Settings page, go down to the config vars section.
• Create the following config vars:
  • Set the key to CLOUDINARY_URL, value to cloudinary-provided-API-key, and click add.
  • Set the key to DATABASE_URL, value to Provided-postgres-link, and click add.
  • Set the key to SECRET_KEY, value to Your-SECRET_KEY, and click add.
  • Set the key to DEBUG, value to True, and click add.
  • Set the key to DISABLE_COLLECTSTATIC, value to 1, and click add.

Note: Remove DEBUG and DISABLE_COLLECTSTATIC before the final deployment. Also remember to have the env.py file in the .gitignore file before the first deployment. So no value information will be visible after deplyment.

• To obtain a Cloudinary API key, go to the Cloudinary site signup up for free by clicking on the Sign Up For Free button. Follow these steps to set up the account:

  • Provide name, email and choose a password
  • For Primary interest, choose Programmable Media for image and video API
  • Change the assigned cloud name to something memorable
  • Click Create Account
  • Verify your email, and the service is ready to use
  • Navigate to the Cloudinary dashboard
  • Click on 'API Environment variable' to copy the API key.

• To obtain a PostgreSQL DATABASE_URL

  • Install the supporting libraries by typing in the command 'pip3 install dj_database_url pyscopg2'

  • When done, type in the command pip3 freeze --local > requirements.txt in the terminal

  • In the env.py file, import os.

  • Setup the following environment variable: DATABASE_URL and paste in the DATABASE_URL from Heroku. os.environ['DATABASE_URL'] = 'postgres://***************'

  • In the settings.py file, import os dj_database_url. So scroll down to the DATABASES section and comment out the entire section. Below the comment out section, add in the following code: DATABASES = {'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))}

• Navigate to the Deploy tab and down to the section called Deployment method.

• Select GitHub and confirm the connection between Heroku and GitHub.

• Search for the project's repository name on GitHub and click "connect" to link GitHub with Heroku.

• On the same page, scroll down and choose how to deploy the app. For this project, automatic deploys are selected and enabled.

• Create a Procfile for Heroku, inside the file insert the following line:

  • web: gunicorn cosmos.wsgi
  • Note that cosmos is the name for this app.

• Create a requirements.txt file for Heroku, using the following command:

  • pip3 freeze --local > requirements.txt

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

Local Deployment

In order to make a local copy of this project, you can type the following into your IDE Terminal to clone this repository:

• git clone https://github.com/stroemlind/cosmos.git

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

Credits

Content

For an overall start of the project:

• All videos in this CodeMy plylist, except videos 16, 17, 19 - 21 and 23 - 35
• Medium
• Django Central

For integrating and installing TinyMCE text editor:

• Geeks for Geeks
• TinyMCE
• TinmyMCE Django

For the footer design:

• MdBootstrap

For pagination:

• Webnots
• Django Projetc
• Ordinary Coders
• Nafeesah Younis GitHub and post on Slack
• For popular_post.html I Think Therfore I Blog

For the footer to stay at the bottom of every page:

• Stackoverflow

Populate Slugfiled in add_post.html and edit_post.html form:

• The Net Ninja

Like-button code and functionalities:

• Dev.to
• I think therefor I blog

For the Comment section, to Add and Display on page:

• Django Central
• Data-Flair
• Tutor Ed from Code Institute

For displaying Most liked posts on a page:

• Stackoweflow

Category navbar:

• Tutor Scott from Code Institute
• Boutique Aldo walkthrough lessons and githubfiles

Max length of words shown in blog post on index page:

• Django Projects

Django testing:

• Developer Mozilla
• Real Python
• Stack overflow
• Code Institute Lesson 'Hello Django - Testning'

Bootstrap functionalities:

• Bootstrap

Media

• Post Images used during development are created from these pexels images:

• Image one

• Image two

• ColorGenerator

Acknowledgements

First, I would like to acknowledge my mentor Tim Nelson, who always tries to help me create a good project, and thank him for all the time and effort he gave me during this project. He provided me with information about changing some of my views from Class-Based Views to Function-Based Views. With that help, I got the function to add and edit images to post work. Tim also helped me find the Rich Text Editor and the information on installing it for this project.

I would also like to acknowledge the help from the Code Institute tutors Ed, Scott, and Jo. They gave me significant input on how to approach debugging my code in another way, helping me understand how to develop my code and how some of the implemented function works.