Code Institute London Hackathon project in conjuction with SODA Social and in partnership with ex-militarycareers.com came up with the initiative Supporting Veterans' Mental Health.
The team has chosen The ART THERAPY GALLERY: A platform where veterans can submit and showcase their creative work. We believe that mental health awareness is vital amongst veterans. There is overbearing stigma surrounding mental health with lack of educational resources and so many are left aliented in society. This project is dedicated to help create a space for veterans to express themselves through therapeutic art, and we hope this will help to reduce the stigma and promote cathartic therapy that art can offer.
This project is also an opportunity for CI students to brainstorm and also to use their coding skills to develop apps and websites to support the veterans activities such as Wellness tracker, Veterans stories and other Mental health resources.
In preparing for this project we have conducted research on some veterans websites and also partictipated in the SODA webinar with some veterans present. This gave us more insights on what to develop for the project.
The team has created a gallery to showcase the veterans' work. We have used Django and Python programming skills to develop the webpages and incorporated CRUD functionality (Create, Read, Update and Delete). Team has worked in sprints using Agile methodology to deliver the project.
In this section, We are going to provide insights into the UX process, mainly focusing on the art therapy gallery which is what this application is built for, what it intends to achieve and how veterans can best utilise this web application to fulfil their needs.
The webpage contents and functionality has been developed with user interface and aesthetics in mind, catered to our demographic.
According to Caglar Araz from UX Collective, User Experience (UX) is "User experience refers to the singular and accumulated experiences that occur for users as a consequence of them interacting with an object in a given context."
The planning and development of this project is divided into 5 planes:
-
The Strategy Plane
-
The Scope Plane
-
The Structure Plane
-
The Skeleton Plane
-
The Surface Plane
-
Our website is designed to bring veterans together through art.
-
At Combat Canvas users can not only veiw art, but be encouraged to create projects themselves.
-
Using the site's log in feature users can create a profile and upload their own creations and comment on each others' to encourage them.
-
The site aims to be responsive to all devices, and accessible to keyboard only users and users with visual impariments.
A vetaran without previous access to art therapy. Objective: I am hoping that art therapy becomes a calming influence in my life and helps my PTSD flashbacks become less frequent as a result. I am looking for a website that is easy to navigate.
A veteran who is struggling with lonilness and a loss of identity. Objective: I am looking to Combat Canvas to help me engage with a new community. I also am looking to start a new hobby so that I can figure out who I am outside of the Military.
A veteran whose time in the miltary has ended and stuggles with anger and depression. Objective: I am looking for a way to process my emotions in a healthy way I want to build new connections with people who have the same experiences.
The site allows users to register for an account, view other users projects and interact with the online community. Registered users are able to login/logout and to create and update their own profiles and save their work to the online gallery page. Website users are able to view artwork and profiles and the contents of the webpage. Registered users are able to upload projects and leave comments. Admin is able to add, edit or delete the users projects, and its comments. Users are able to delete their own projects and edit their account information. CRUD Functionality
Home page: • Clickable button to direct to gallery page
Login page: • Log in • Log out • Add profile
User Page: • Delete profiles • Upload project • Delete project • Edit comments • Delete comments
Veterans page: • Add comments • Send message through contact form
-
A simple home page with responsive navigation bar to allow user to easily navigate without having to scroll and to show the purpose of the website.
-
Simple roadmap design that is visually appealing, non-distracting and easy to follow.
-
The design of the website should be visually consistent across all aspects to make it visually pleasing and comfortable for users.
-
The web application should be responsive across different resolutions.
-
Home
-
The Navbar is always fixed on top of the page with COMBAT CANVAS logo , the logo is on the left-hand side of the bar and a menu on the right with clear names of site pages for the ease of navigation. The carousel changes the images. This Navbar will stay consistent throughout the entire website and will automatically minimised into a hamburger menu on smaller devices.
-
The content of the home page contains the veterans pictures, and other contents they can navigate to.
-
A footer with social media links is featured at the bottom to allow users to easily connect with socials.
-
We have created mockup screens of the webpage functionalities using Balsamic Software tool. The initial draft of the wireframe was based on how user can navigate each page on the site however, the final product might be different due to team design thinking improvement.
Click link below to open wireframes
The website has been designed with a good user look and feel with minimal color distraction. All the fonts and styles are consistent throughout the site to make the users feel comfortable. With the help of CSS styles and media queries, the site is responsive across devices from desktop and laptop, to tablet and mobile. Even on smaller devices, the contents are aligned proportionally and styled to make sure they are still legible and well-displayed. Altogether, the design and layout of the site should be entertaining and captivating so that a user is able to understand and enjoy the site.
We have used Oswald Heavy fonts for headings and Merriweather for Paragraph
- Django
- Python
- CSS
- Html
- Google Fonts
Testing was done within the team.
Also validated the user friendliness of the site to conform with user experience design.
All the functional requirements met the acceptance criteria set up by the team.
Throughout the development stage of the project, SQLite3 was used as this is the default database included with Django. On deployment, you are given the option to utilise PostgreSQL as this is included with Railway.app.
user = models.OneToOneField(
User, on_delete=models.CASCADE, null=True, blank=True)
name = models.CharField(max_length=200, blank=True, null=True)
email = models.EmailField(max_length=500, blank=True, null=True)
username = models.CharField(max_length=200, blank=True, null=True)
location = models.CharField(max_length=200, blank=True, null=True)
short_intro = models.CharField(max_length=200, blank=True, null=True)
bio = models.TextField(blank=True, null=True)
profile_image = models.ImageField(
null=True, blank=True, upload_to='profiles/', default="profiles/user-default.png")
social_twitter = models.CharField(max_length=200, blank=True, null=True)
social_linkedin = models.CharField(max_length=200, blank=True, null=True)
social_youtube = models.CharField(max_length=200, blank=True, null=True)
social_website = models.CharField(max_length=200, blank=True, null=True)
created = models.DateTimeField(auto_now_add=True)
id = models.UUIDField(default=uuid.uuid4, unique=True,
primary_key=True, editable=False)
owner = models.ForeignKey(
Profile, null=True, blank=True, on_delete=models.CASCADE)
title = models.CharField(max_length=200)
description = models.TextField(null=True, blank=True)
featured_image = models.ImageField(
null=True, blank=True, default="default.jpg")
demo_link = models.CharField(max_length=2000, null=True, blank=True)
tags = models.ManyToManyField('Tag', blank=True)
vote_total = models.IntegerField(default=0, null=True, blank=True)
vote_ratio = models.IntegerField(default=0, null=True, blank=True)
created = models.DateTimeField(auto_now_add=True)
id = models.UUIDField(default=uuid.uuid4, unique=True,
primary_key=True, editable=False)
The site is hosted using Railway, deployed directly from the main branch of GitHub. The deployed site will update automatically as new commits are pushed to the master branch.
- From the Railway.app dashboard:
- Select “New Project"
- Select “Deploy from Github repo"
- From the Railway dashboard:
- Select your app from the list
- Select "Variables" from the menu
- Add environment variables in key-value pairs, click "Add" to add additional pairings.
- Create required deployment files in the repository:
-
requirements.txt
- Lists the required python modules for Railway.app to install.
- To create:
- In your IDE terminal, type:
pip freeze > requirements.txt
- In your IDE terminal, type:
-
Procfile
- Tell Railway.app the command to launch the app. ''web: python manage.py migrate && gunicorn CombatCanvas.wsgi''
-
runtime.txt
- Tell Railway.app the version of python used in the project. ''python-3.9.6''
-
.gitignore (optional)
- Lists files and directories which should be deployed to live app, such as files with environmental passkeys.
- To create:
- In your IDE terminal, type:
touch .gitignore - List the files and directories to be excluded from live deployment, within the .gitignore file.
- Save in your repository root directory.
- In your IDE terminal, type:
-
*Website Sources with research topic links.
Where Veterans Unleash their Creative Firepower
Celebrating Veterans' Artistic Valor
Shout to all the team Team 6- Picadilly Pythons.The team has been incredible hard working within the short period of time. Thank you to Team. Members of the team:
Patrick Pereira Vieira, Tindy Chan Lydia Young Ibi Alex Doherty Vasile Tios Tsimourdagkas Ant
We acknowledge SODA and all the Code institute staff on site for the London April Hackathon for their support on site.
All resources used for this project are intended for Academic purposes ony.