1. Overview

   • About
   • Scope
   • Agile

2. User Experience

   • Project Goals
   • User Stories

3. Features

   • Colors

4. FlowChart Data Structure

5. WireFrames

6. Technology Used In Design

7. Testing

   • HTML Validator
   • CSS Validator
   • PEP 8
   • Automatic testing

8. Deployment

9. Credits

10. Issues

• The Tuneshack is a blog website developed to encourage lovers of all types and genres of music to sign up and talk freely about their love of music, their favorite bands or the best concert they have ever been to. The blog can used to post dates and venues for upcoming concerts. Every body is welcome and encouraged to post and interact with each others posts weather leaving comments or just liking a post.

• The initial scope of the project is to develop a website that is primarily used as a blog site for music lovers to use. There is future scope to extend the site to be more commercial in use i.e selling merchandise, tickets, bookings through third party sites.

• The first release wil include:

  • A home page for everyone to view posts and comment.
  • A sign up page /system for new users.
  • users can log in and comment and like posts.
  • Once logged in a user can update or delete their posts.
  • Authentication used to determine who is logged and who can post/update or delete.
  • users can log out at any time.

• Future development

  • Nested comments and a like functionality
  • Images included in comments
  • Possibility of an online store
  • Selling tickets through 3rd party official sites.
  • Search functionality
  • Email verification/password update
  • Categories to pick from

• The overall goal of the project is to display my competency in being able to create a website/app using the Django framework in conjunction with Python, Javascript, HTML and CSS.

• The users of the site will be able to view posts made by all but only create , update and delete posts made by themselves once they have signed up and logged in. Once logged out they will only be able to comment and read posts. Users will be limited to their own content for any updates or removals.

• As a Site User I can sign up to the app so that I can login and make posts and comment/like other posts

• As a User I can delete my posts so that they can be removed if required

• As a User I can delete my posts so that they can be removed if required

• As a User I can view and click on posts so that I can read through them weather logged in or logged out

• As a User I can **like and unlike posts ** so that there is site interaction

• As a site owner I can manage users and their posts so that I can manage content if required

• As a user I can make comments so that give feedback to other posts

• User can open the webpage from the URL provided and do not need to be registered to view the posts on the site. If not logged in the have the option to sign up or if already signed up to login. No unauthorized users can comment or like the posts already shown.

• The site user can view posts , add comments or likes if logged in. They can delete their own posts and update the posts but cant alter or delete other users posts.

• The user can view the comments here.

• The user can login from here.

• The user can sign up for the site here.

• The inspiration for the colors used on the website where taken from Canva

• Tuneshack flowcart

• Tuneshack data model

• All wireframes can be found here

• Django framework
• HTML5
• CSS3
• Javascript
  • Used to implement the change in year on in the copyright section of the footer.
  • Also used to hid the field for the author name in the add post section, if this was visible the ID would appear and cause issues.
  • Used to remove the alert from the screens.
• Python
  • Used in conjunction with the Django framework to implement the website.
• Heroku
  • Use to deploy the project on to the live site.

• Django
  • Used to create the URLS, Views, Forms and models in the site. Also uses the Django Template Language within the HTML files.
• Bootstrap
  • Bootstrap is mainly used to style the page and add responsiveness to the website.
• Cloudinary
  • Cloudinary is used to store all the images used withing the project.
• Google Fonts
  • Used as the main fonts throughout the project.
• Git
  • Git is used for version control
• Github
  • Github is being used to write the code and store the project as a whole.
• Am I responsive
  • Used to display the main image in the README file.
• Font Awesome
  • Font awesome is used for the like and dislike icons.
• All Auth
  • All Auth used for authentication od website.
• PostGres
  • Database used through heroku.
• SQLite
  • https://www.sqlite.com/index.html
• SmartDraw
  • To draw out the database schema.
• Balsamiq
  • To create the wireframes.

• asgiref==3.5.0
• cloudinary==1.29.0
• dj-database-url==0.5.0
• dj3-cloudinary-storage==0.0.6
• Django==3.2
• django-allauth==0.50.0
• django-ckeditor==6.4.0
• django-crispy-forms==1.14.0
• django-js-asset==2.0.0
• gunicorn==20.1.0
• oauthlib==3.2.0
• psycopg2==2.9.3
• PyJWT==2.3.0
• python3-openid==3.2.0
• pytz==2022.1
• requests-oauthlib==1.3.1
• sqlparse==0.4.2

• Create posts by clicking Add Post.
• A user can delete or edit their own posts.
• All users of the website can read posts.
• A user can contact the site owner.

• All PEP8 validations can be found here

• I have performed some basic automatic tests as shown below on the forms and views.

• I installed Coverage with pip3 install coverage and ran the program in the terminal with coverage run manage.py test. The file was generated with coverage html and the results can be found in the htmlcov file in the index.html file.

The live deployed application can be found here TuneShack

To use the terminal designed by The Code Institute I used the Code Institute Full Template. This allows the code that is used to run the terminal be viewed in the browser.

• Click create new repository.
• Give the repository a name.
• Under Repository template pick the Code Institute Full Template.
• Click create repository

• Use GIT ADD .
• GIT COMMIT -m "Comments"
• GIT PUSH
• To commit the code and push to Github

• Locate the desired Github repository.
• In the top right corner click the Fork button.
• The repository has been forked and you can now work 0on the copy.

• Locate the desired Github repository.
• Use the code button and copy the link.
• Open Gitpod and select your directory where you want the clone to be created.
• Type git clone in the terminal and paste the link in.
• The clone will be created

I used the video tutorial provided by The Code Institute to create a Heroku account, add the details of the app and deploy the application to a live environment.

• Log in to Heroku Heroku
• Click New
• Give the app a name and choose the region
• Click on settings first and set the Reveal Config Vars
• Click Deploy at the top to go to the Deployment settings
• Choose GiHub as the deployment method
• Search for your app and connect
• Use Automatic deploys if you would like a new build when changes are pushed to GitHub from Gitpod
• Use Manual deploy for a new build every time this button is clicked.
• Once completed click View App

• Deploying your app to heroku

1. Login to heroku and enter your details. command: heroku login -i
2. Get your app name from heroku. command: heroku apps
3. Set the heroku remote. (Replace <app_name> with your actual app name) command: heroku git:remote -a <app_name>
4. Add, commit and push to github command: git add . && git commit -m "Deploy to Heroku via CLI"
5. Push to both github and heroku command: git push origin main command: git push heroku main

• MFA/2FA enabled?

1. Click on Account Settings (under the avatar menu)
2. Scroll down to the API Key section and click Reveal. Copy the key.
3. Enter the command: heroku_config , and enter your api key you copied when prompted
4. Complete the steps above, if you see an input box at the top middle of the editor... a. enter your heroku username b. enter the api key you just copied

• Album reviews taken for educational purpose only from https://www.bbc.co.uk/music/reviews/ and all reviews are credited to their respective owners on the site.

• https://www.geeksforgeeks.org/styling-django-forms-with-django-crispy-forms/

• https://django-allauth.readthedocs.io/en/latest/

• https://dev.to/radualexandrub/how-to-add-like-unlike-button-to-your-django-blog-5gkg

• https://learn.codeinstitute.net/courses/course-v1:CodeInstitute+FST101+2021_T1/courseware/b31493372e764469823578613d11036b/ae7923cfce7f4653a3af9f51825d2eba/?child=first

• davidwatters_5P and Daniel_C_5p for their hep on collecting static files.

• Matt Bodden_5P on help with validating HTML/css WITH Django included.

• My Mentor Miguel Martinez for his support through the whole process.

• The Slack community as a whole for being awesome.

Fix:

• Move Docs in to the main folder from the static folder and re run collect static. This worked and all files are loading in Heroku.

FIX:

• Login and log out message were not appearing when the connected buttons were clicked byt the user. I installed all auth and this fixed the issues.

FIX:

• Removed stray div tag from the home.html page.