I am a huge fan of the online MMORPG World of Warcraft and have been a loyal player since the early beginnings in 2005. World of Warcraft is not only a game to me, but also a means to express my creativity, by creating cool armour sets - also known as transmogs (mog for short). Transmog is one of my favourite aspects of the game, and I can spend many, many hours just picking out the right shade on a pair of boots. There is a lot of time needed to put in to make these transmogs, as you need to collect all pieces you want to complete your wardrobe. I know there are a lot of like-minded people who enjoy the collecting and creativity that comes with it, as well as wanting to share their creations with other people.

While deciding what I wanted to do with my fourth project with Code Institute, my boyfriend Dan suggested I do a blog to showcase my own transmogs. I instantly fell in love with the idea and was really excited to begin with this project.

I hope you enjoy the website as much as enjoyed making it! It's been a roller coaster of emotions, but in the end, I made it through!

View live site: Warcraft Mogs

• User Experience

• Agile Methodology

  • User Stories
  • Iterations
    • Iteration 1
    • Iteration 2
    • Iteration 3
  • Future Implementations

• Design

  • Colour Scheme
  • Typography
  • Imagery
  • Wireframes

• Features

  • General Features on Each Page
  • Accessibility

• Technologies Used

  • Languages Used
  • Frameworks, Libraries & Programs Used

• Deployment & Local Development

  • Deployment
  • Local Development
    • How to Fork
    • How to Clone

• Testing

• Credits

  • Code Used
  • Content
  • Media
  • Acknowledgments

Warcraft Mogs is a website developed for transmog enthusiasts in the game World of Warcraft. On this website, users can share their creations and get inspiration from others' work too.

• A place to showcase creativity
• Browse blog posts containing different armour sets
• Give feedback and participate in the comment section
• Like posts

• To be able to view the site on a range of device sizes.
• To inspire creativity
• To share creations
• To give feedback

• I want to see other people's creations
• I want to share my own creations
• I want to express my appreciation

• I want to see what other people think of my creations
• I want to stay up to date with new posts
• I want to be active on the blog

• I want to give feedback and discuss ideas with other users
• I want to build up my portfolio of my own creations

The Agile Methodology was used to develop this website. It was implemented through GitHub and the Project/Kanban Board: Warcraft Mogs.

With the Kanban board, the project was split into four sections;

• Todo
• In Progress
• Done
• Backlog (future additions)

• As a Site Admin, I can create draft posts so that I can finish writing the content at a later time.
• As a Site Admin, I can approve or disapprove comments so that I can filter out objectionable comments.
• As a Site Admin, I can create, read, update and delete posts so that I can manage my blog content.
• As a Site User, I can view a paginated list of posts so that I can select which post I want to view.
• As a user, I can view all posts in a list so that I can easily find a post to view.

• As a Site User, I can click on a post so that I can read the full text.
• As a Site User, I can like or unlike a post so that I can interact with the content.
• As a Site User, / Admin I can view the number of likes on each post so that I can see which post is the most popular.
• As a Site User, and/or Admin I can view comments on an individual post so that I can read the conversation.
• As a Site User, I can leave comments on a post so that I can be involved in the conversation.

• As a site user or admin, I can edit/update my blog post so that I can make a change in the already submitted post.
• As a site user, I can delete a blog post so that the post is removed from the blog.
• As a Site User, I can register an account so that I can comment and like.
• As a site user, I can upload my own post so that I can share my creation.

The purple colours and aesthetic has been generated from the header image.

The purple colours and aesthetic has been generated from the background image.

All fonts used were already pre-installed with the Bootstrap theme I have chosen for this project;

• Bootstrap Clean Blog

All images are screenshots taken from World of Warcraft content: Copyright ©2004 Blizzard Entertainment, Inc. All rights reserved. World of Warcraft, Warcraft and Blizzard Entertainment are trademarks or registered trademarks of Blizzard Entertainment, Inc. in the U.S. and/or other countries.

The header and background image are screenshots taken from in-game World of Warcraft. It is consistent throughout all pages.

Header

Background

The wireframe below is the general idea and vision I had for the website. It follows a basic structure that is the same throughout all pages of the website, with small modifications.

• The homepage serves as the landing page.
• Accessed from the navbar and Home button.
• Designed to give the user a good understanding of the purpose of this website and catch attention.
• Displays Post entries and relevant information about them, such as:
  • title
  • description
  • author
  • date and time of posting
  • number of likes
  • number of comments
  • armor type (category)

• Clicking the image of a post in the Home Page will take the user to the Post Detail Page.
• Clicking the Description of a post in the Home Page will take the user to the Post Detail Page.
• Display the Content text that was provided with the uploaded post.
• Displays amount of comments and likes.
• Displays all comments on that post.
• Displays a textarea field for signed in users to comment.
• Comment pagination buttons if there are more than 4 comments.
• Ability to Like/Unlike a post.

• Edit button in the Detail Page redirects to the edit page.
• Button and Delete Page is only visible to the user that created the post.
• Any changes made in this page will be reflected in the Post Detail page when the changes are saved.

• Delete button in the Detail Page redirects to the delete page.
• Button and Edit Page is only visible to the user that created the post.
• Deleting a post will remove it from the database and redirect the user to the Home page.

• Can only be accessed from the navbar when logged in.
• Submit button submits the post and redirects the user to the uploaded post detail page
• Displays 5 fields:
• title
• description (displayed on the home page)
• armor (category)
• content (displayed in the post detail page)
• image upload

• Can be accessed from the navbar to anyone.
• Back button to take the user back to the Home Page

• Can be accessed from the navbar to anyone.
• Button submits the form and sends the user to the Contact Success Page.
• Displays three required fields:
• name
• email
• message

• The Contact Success Page will be displayed to a user who has successfully filled in the form in the Contact Page.

• Can only be accessed from the navbar when a user is not signed in.
• Does not appear if you are signed in.
• If the user already has an account, there is a link provided to redirect the user to the Sign in page.
• The Register page uses django-allauth to provide all the settings for user authentication.

• Can only be accessed from the navbar when a user is not signed in.
• Does not appear if you are signed in.
• If the user haven't got an account, there is a link provided to redirect the user to the Register page.
• The Sign in page uses django-allauth to provide all the settings for user authentication.

• Can only be accessed from the navbar when logged in.
• When the user clicks the Sign out button, they will be redirected to a site to verify if they want to log out.
• The Sign Out page uses django-allauth to provide all the settings for user authentication.

• The 404 Page will be displayed when a user tries to enter the url for edit/delete a post when they are not signed in.
• The 404 Page will be displayed when a user tries to enter the url for edit/delete a post when the user is logged in as a user that is not the same author the post they are trying to edit/delete.

All pages feature a navigation bar with access to the following pages: Home, About, Contact, Register and Sign in. If you are already logged in, you can access the pages Upload Post and Sign Out. The footer is also present on all of the pages, with links to my social media accounts and GitHub. The navbar appears in white when you scroll up on the page. The website is responsive due to the bootstrap theme and styling that has been added.

• The navbar as it appears on all pages when a user have not scrolled down on the page.

• The white navbar appears when a user is scrolling up on a page

• The Footer is displaying on all pages and clicking the social media buttons opens a new tab to my social media handles.

To expand this website further, I would like to add these future implementations:

• The ability to enlarge the images in the detailed view
• Create a user page, and the ability to view other user pages
• Search field
• Create drafts
• Sort and display blog posts by different categories such as newest, oldest, armor, popular (most liked)
• Add more categories

More features and ideas may be added in the future.

I have tried my best to be mindful of accessibility, and the steps I've taken for this are the following:

• Alt tags on the header and placement images
• Aria labels to the social media links
• Chose a good colour contrast throughout the website
• Semantic HTML

• HTML5
• CSS
• Python
• JavaScript

• Django
• PostgreSQL
• Summernote
• CrispyForms
• Cloudinary
• Colormind
• Balsamiq
• ElephantSQL
• Heroku
• Bootstrap Clean Blog
• Canva

The site was deployed using Heroku, following the steps offered by Code Institute. You can find the instructions in a Google Docs here.

• Install Django and gunicorn: pip3 install django gunicorn
• Install supporting database libraries dj_database_url and psycopg2 library: pip install dj_database_url psycopg2
• Install Cloudinary libraries to manage static files: pip install dj-3-cloudinary-storage
• Create file for requirements: pip freeze --local > requirements.txt
• Create project: django-admin startproject project_name
• Create app: python manage.py startapp app_name
• Add app to list of installed apps in settings.py file: 'app_name'
• Migrate changes: python manage.py migrate
• Test server works locally: python manage.py runserver

• Navigate to the Heroku website
• Create a Heroku account by entering your email address and a password (or log in if you have one already).
• Activate the account through the authentication email sent to your email account
• Click the new button on the top right corner of the screen and select Create a new app from the dropdown menu.
• Enter a unique name for the application.
• Select the appropriate region for the application.
• Click Create app
• In the Heroku dashboard click on the Resources tab
• Scroll down to Add-Ons, search for and select 'Heroku Postgres'
• In the Settings tab, scroll down to 'Reveal Config Vars' and copy the text in the box beside DATABASE_URL.

• In your IDE, create a new env.py file in the top-level directory
• Add env.py to the .gitignore file
• In env.py import the os library
• In env.py add os.environ["DATABASE_URL"] = "Paste in the text link copied above from Heroku DATABASE_URL"
• In env.py add os.environ["SECRET_KEY"] = "Make up your own random secret key"
• In Heroku Settings tab Config Vars enter the same secret key created in env.py by entering 'SECRET_KEY' in the box for 'KEY' and your randomly created secret key in the 'value' box.

• In your Django 'settings.py' file type:

from pathlib import Path
import os
import dj_database_url

if os.path.isfile("env.py"):
    import env

• Remove the default insecure secret key in settings.py and replace with the link to the secret key variable in Heroku by typing: SECRET_KEY = os.environ.get(SECRET_KEY)
• Comment out the DATABASES section in settings.py and replace it with:

DATABASES = {
  'default': 
  dj_database_url.parse(os.environ.get("DATABASE_URL"))
  }

• Create a Cloudinary account and from the 'Dashboard' in Cloudinary copy your url into the env.py file by typing: os.environ["CLOUDINARY_URL"] = "cloudinary://<insert-your-url>"
• In Heroku add cloudinary url to 'config vars'
• In Heroku config vars add DISABLE_COLLECTSTATIC with value of '1' (note: this must be removed for final deployment)
• Add Cloudinary libraries to the installed apps section of settings.py file:

'cloudinary_storage'
'django.contrib.staticfiles''
'cloudinary'

• Connect Cloudinary to the Django app in settings.py:

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'
* Link file to the templates directory in Heroku 
* Place under the BASE_DIR: TEMPLATES_DIR = os.path.join(BASE_DIR,
'templates')

• Change the templates directory to TEMPLATES_DIR. Place within the TEMPLATES array: 'DIRS': [TEMPLATES_DIR]
• Add Heroku Hostname to ALLOWED_HOSTS: ALLOWED_HOSTS = ['rhi-book-nook.herokuapp.com', 'localhost'] *Create Procfile at the top level of the file structure and insert the following: web: gunicorn PROJECT_NAME.wsgi
• Make an initial commit and push the code to the GitHub Repository. git add . git commit -m "Initial deployment" git push

• Click the Deploy tab in Heroku
• In the 'Deployment method' section select 'Github' and click the 'Connect to GitHub' button to confirm.
• In the 'search' box enter the Github repository name for the project
• Click search and then click connect to link the Heroku app with the GitHub repository. The box will confirm that Heroku is connected to the repository.

In the IDE:

• When development is complete change the debug setting to: DEBUG = False in settings.py
• In Heroku settings config vars, change the DISABLE_COLLECTSTATIC value to 0
• Because DEBUG must be switched to True for development and False for production it is recommended that only manual deployment is used in Heroku.
• To manually deploy click the button 'Deploy Branch'. The default 'main' option in the dropdown menu should be selected in both cases. When the app is deployed a message 'Your app was successfully deployed' will be shown. Click 'view' to see the deployed app in the browser.

1. Login (or sign up) to GitHub.
2. Go to the repository for this project here
3. Click the Fork button in the top right corner.

If you wish to clone my project, please see the following steps below:

• Navigate to GitHub: https://github.com/nicolemne/warcraft-mogs
• Select the 'Clone' button
• Copy the URL or download it as a ZIP file
• Use git clone + the URL in your terminal, or unpack the ZIP containing the project

Please refer to the TESTING.md file for all testing performed.

• Django Model Meta Options
• Django Slug Tutorial
• Class Based Generic Views Django
• Bootstrap Forms
• Verbose Name
• Paginator Class
• Delete Comment

I am grateful to my friend Joseph for offering valuable guidance and assistance in resolving issues with my Upload Blog Post feature. He shared many helpful pointers and provided me with relevant links that played a crucial role in finding a solution (the majority of which are listed below - I apologize if I have forgotten to include any links). I greatly appreciate his support and contribution to the success of my project.

• Python super() Function
• Stackoverflow - We use super().form_valid(form)
• Stackoverflow - Submit a post/article
• Django Accessing “clean” data
• Why a while loop instead of a for loop
• Django.utils.crypto (get_random_string())
• Django.utils.text (slugify)

I have been inspired by the valuable insights and contributions of my fellow Code Institute peer, Emelie Hansson. Through many talks, she provided useful tips, resources, and knowledge that have influenced my own work. I appreciate her willingness to share and collaborate, as it has been helping me enhancing my project.

• Hiking Blog

From the "I Think Therefore I blog" project:

• Post & Comment Models

From a comment on Stackoverflow:

• Fixed background image

From Codemy "Create a Simple Blog with Python and Django" video playlist:

• Set up Categories, Edit & Delete post

I take great pride in stating that I have personally developed all the code in this project, demonstrating my dedication and commitment to its creation. While working on this project, I utilized various resources, including those acknowledged in the Credits and Code Used section, which provided valuable insights and inspiration.

I would like to thank and acknowledge the following people, who have shown invaluable support throughout my fourth project:

• Dan Ford, not only as my boyfriend but also as my biggest supporter. His unwavering encouragement and belief in my abilities have been a constant source of motivation and inspiration. I am truly grateful to have him by my side throughout this journey.
• Joseph Doble has been instrumental in my project, offering assistance with sourcing relevant information and providing clear explanations of how things work and why. His support has been invaluable.
• Emelie Hansson, a fellow Code Institute student, who has provided me with tremendous support throughout my journey. Her encouragement and assistance have been greatly appreciated.
• Tutor Support, their patience and willingness to address my endless questions have been instrumental in my learning and growth.
• Mitko Bachvarov, my mentor at Code Institute, for the great help and support with my project.
• Kera Cudmore, for the README and TESTING template.