Site Link: AYA Teen Room
- Introduction
- User Experience
- Design
- Project Management
- Features
- Future Features
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
Site Link: AYA Teen Room
AYA Teen Room is a website aimed at gathering feedback from AYA Teen Room Users in order to facilitate room owners to improve the rooms according to users needs.
AYA Teen Rooms are rooms based on cancer wards in the 4 main centres that treat cancer for adolescents and young adults (AYAs) in Ireland. The teen rooms are lounge spaces solely for the use of AYAs who are staying in the ward for cancer treatment. These rooms give the AYAs a safe and relaxing space to spend time away from the ward rooms, which are often busy, noisy, and populated with either children or older adults (depending on the ward/hospital).
The philosophy of the AYA treatment team is to always put the users at the centre of every decision made. Making sure the teen rooms are serving the needs of the user by ensuring teen feedback is sought and received, and that the AYAs can see feedback being acted on, demonstrates this to the AYAs clearly. This helps to build trust with the treating team, and improves the treatment experience for the AYAs.
The target audience is AYA patients, who are aged between 13 - 24 years old, who are having cancer treatment at one of the 4 hospitals with an AYA teen room.
- To provide a way to gather teen room user feedback on the teen rooms
- To allow users to give feedback in a private way
- To allow AYA staff to let users know how their feedback is being implemented
-
As a teen room user I can be a registered site user so that I know only my teen room peers are on the site
-
As a teen room user I can edit my details so that i have control over my username and other details
-
As a teen room user I can change my password so that I know my log in details are secure
-
As a teen room user I can reset my password via email so that it's easy to reset if I forget my password
-
As a teen room user I can receive messages about login status so that i know if I have logged in or out successfully
-
As a teen room user I can easily see if an event has already happened so that I am fully aware of event timetables
-
As a teen room user I can add feedback on the teen room so that the owners know how to improve the room
-
As a teen room user I can post anonymously so that I can be honest with my opinion without worrying people will know who I am
-
As a teen room user I can see when feedback posts were last updated so that I know how recent they are
-
As a teen room user I can see other peoples feedback so that I know what other users think about the room
-
As a teen room user I can amend feedback I have left so that my feedback accurately reflects how I feel
-
As a teen room user I can delete feedback I have given so that I have control over my feedback
-
As a teen room user I can amend a comment i have made so that I can correct any mistakes I have made
-
As a teen room user I can like other users feedback so that I can add weight to their feedback
-
As a teen room user I can indicate if i'm interested in going to an event so that i can be involved in events
-
As a teen room user I can log in to the site with my email address so that I don't have to remember a username
-
As a room owner I can view medical id of users so that I can engage in safeguarding if there is an issue with a post of concern
-
As a room owner I can see the medical ID of the user posting feedback so that I can perform safeguarding duties if the content is of concern
-
As a site owner I can comment on posted feedback so that I can let users know i have seen their feedback and what actions I am taking to enact it
-
As a site owner I can comment on feedback given so that users can see their feedback is being considered
-
As a site owner I can amend comments i made so that ensure they are accurate
-
As a site owner I can delete comments I have given so that I am only giving comments I wish to
-
As a room owner I can moderate feedback posts so that I can ensure feedback content is appropriate
-
As a Room Owner I can post information about upcoming events so that users are aware of upcoming events
Colour scheme
The colour scheme was chosen to complement the images supplied by the AYA team of the rooms, along with the supplied hero image. A simple colour palatte was selected, to provide a cohesive mature look to the webpage without being boring.
The colours chosen were:
- Barn Red #78000 - used for sub-headings to stand out
- Moonstone #17A2B8 - used for buttons
- Baby Powder #FCF9F3 - used for site background
- Air Superiority Blue - used for about carosel to draw attention
The system fonts were utilised in this site, and are efficient and resource friendly as they reduce the resource fetch load. They give a clean clear and easy to read look to the site. For Chrome and Android this loads Roboto as the primary font, whereas Segoe UI is loaded for Windows and Windows phones.
The hero image is of two teens hanging out in a cool looking room. It's bright and eye-catching, and sums up the point of the site - teens in a room!
Wireframes for the project are below. Mobile and desktop wireframes were produced using Balsamiq. Final product is broadly consistent with the intention and design of the wireframe designs.
Home Page Mobile
Home Page Desktop
Feedback Post Detail Mobile
Feedback Post Detail Desktop
Feedback List Desktop
Sign Up Form Mobile
Submit Feedback Mobile
Designed at planning stage, the database models were used to guide the development process while building the application. The initial schema closely reflects the structure of the finished application.
Database schema
....
This project was planned and mangaged using an Agile Framework.
User stories were documented, then placed into a project backlog. Each user story was given a title and a number, and acceptance criteria. Milestones were created and stories attached to them. Work tracking was done using kanban boards - a separate project board was created for each iteration, and user stories populated to the board from the project backlog. User stories that ended up as 'won't have' were then returned to the project backlog. Each board had a to-do, in-progress and done section.
MOSCOW prioritisation was applied to each user story at the outset, and then updated during the project as work progressed. Six prioritisation tasks were used (four for user stories and two for general task tracking):
- Must Have
- Should Have
- Could Have
- Won't Have
- Bug (to track bugs)
- Dev (for development tasks)
Iteration 3 Kanban Board
The nav bar is a fixed nav bar. It holds a greeting section - this says 'Hi Stranger' if a user is not logged in, and 'Hi Jim' (or relevant username) if the user is logged in - alerting user to log in status at all times. The nav bar does not change across any page of the site. It collapses to a hamburger on smaller screens. Available nav tabs change depending on log in status - if a user is not logged in they only see the home and about tabs, along with a log-in and sign-up button. A logged in user sees all the site tabs, and a logout button. The active page the user is on is emphasised in bold. If the user clicks on the greeting this is also a link that will take them to the homepage.
Nav bar large logged in
Nav bar large not logged in
Nav bar mobile
There are three sections to the home page.
Home Page Section 1 - Welcome/Hero
The hero section has simple text introducing the site and it's purpose. The hero image is bright, eye-catching and engaging, whilst clearly supporting the purpose of the site. A user who is not logged in will see a call to sign up here (not visible for a logged in user). The format changes to stacked on smaller screens.
Home Page - Hero Desktop
Home Page - Hero Mobile
Home Page Section 2 - About Carousel
Below the hero section is a blue carousel that catches the eye. This has three slides, which quickly explain the basics a user needs to know - why we want feedback, why the feedback is private, and what a teen room is.
Home Page - Carousel 1
Home Page - Carousel 2
Home Page - Carousel 3
Home Page Section 3 - Room Featurettes
The last section is a featurette section, with pictures and descriptions of the four teen rooms (and their locations).
Home Page Room Details
The footer is consistent with the header in style. It is a fixed footer, and consistent across every page,. It anchors the page visually, and contains the site author details.
Footer
The about page is accessible by all users (logged in or not). It contains a more detailed list of information about AYAs and the teen rooms, contains links to some relevant websites, and contact details for the AYA team.
About 1
About 2
User can access sign up page from button on hero section or from nav bar button. Users are reqested for username, email and password on this page. A success message is given if sign up is successful. Warnings are given if issues with completing form. Duplicate usernames are not allowed and generate warning text.
Sign up
After sign up, user is directed to a info page that explains they need to fill out profile details. This allows the user to be informed on the reason for collecting the medical ID in this section.
Sign up success
The user then goes to the profile page to complete their user profile. Help text is present to guide the user, and required fields are starred. User is warned if errors in form. User gets success message when successfully completed, then redirected to the home page as a logged in user. The user must enter their medical id - this must be 7 digits or get an erroe message. helper text is present to prompt user as to where to find their medical id, and how long it is.
Profile Page
User can access edit profile section from account dropdown on the nav bar. Form is pre-filled with current details. User sent to home page, with success message, if successful entry. Warning text if incorrectly filling out fields.
Edit Profile
User can access change password section from account dropdown on the nav bar. User sent to home page, with success message, if successful entry. Warning text if incorrectly filling out fields. Button to return to home page quickly if entered page in error.
Change Password
Logged in users can view list of feedback given by other users. This is in order of most recent at top of page. Title and details of user, room it's about, and when posted are displayed. User can click on title to see full post and other post related options.
Feedback List
Clicking on post title takes user to feedback detail page. Full feedback is shown (if it is longer than the snippet shown on the list page).
Feedback Detail
Selecting submit feedback tab takes user to a submission form. User enters title and feedback content. If title is same as another title that exists already, user is warned to change it. User can select room feedback pertains to from dropdown list. On successful submission user is returned to feedback list page with a success message. If user enters a post title the same as another, it is allowed (as the slug will auto-increment in the backend to compensate).
Submit Feedback
If logged in user is the author of the feedback post, edit and delete buttons are displayed below their own post. These buttons are not present if the user is not the post author.
If user selects edit post the post submission form is opened, pre-populated with the post details. On successful submission a success message is shown, and user taken back to details page.
If user selects delete, they are taken to a warning page. The colours of these buttons differ from the rest of the site to make them stand out more to the user. If the user selects 'Oops No!' they are redirected to the feedback list. If the select delete they are redirected to the feedback list with a successful deletion message displayed.
Feedback Options
Edit Feedback Form
Delete Feedback
If a post has no comments there is a message underneath it to say this, and to expect a reply within 24 hours.
If a staff user is logged in they will see a submit-comment form under the post (not visible to standard users). On successful submission user is returned to feedback post with a success message.
No Comments Yet
Comment Form
Comment Example
If a user is staff, and also the comment author, they will see an edit & delete button under the comment. The process for edit and deleting a comment is the same as that for a feedback post.
Feedback Comment Example
Edit Comment
Delete Comment
When a user clicks the log out button they are taken to a log our view, with options to log in or return to home page.
Superuser can access admin panel to disaollow problematic posts, and view medical id within the teen user profile section (in case of safeguarding issues with a post).
Admin Panel
Admin Medical ID
- Users can "like" posts and comments - User Story 14, 15
- Add pagination to feedback list
- Add sorting and searching to feedback list e.g. filter by room
- Add log in with email function so it's easier to remember (compared to a password) - User Story 24
- Add reset password via email function - User Story 4
- Allow users to add comments to posts - User Story 15, 13
Validator Testing
The code was regularly tested using the Code Institute PEP Validator substitute CI Python Linter. All tests passed with no warnings or errors.
The code was regularly tested using w3c validators for HTML and CSS throughout development, using these links:
W3 html check
CSS Validation
Lighthouse testing was conducted at regular intervals during development, using the Lighthouse function inbuilt into the Chrome Inspector tool.
Home Page
About Page
The site was tested using the responsive tool in developer (chrome, firefox and edge). There was one issue noted at screen sizes under 400px (as described in the bugs section). The site is fully responsive.
Accessibility testing was performed regularly throughout development utilising 'WAVE Web Accessibility Evaluation Tools', using this link: WAVE Testing
This testing provided assistance on ensuring relevant issues were identified and resolved during development, such as ensuring the text and button colours were acceptable (changed button text to black to ensure high enough contrast).
Home Page
About Page
The site was successfully tested (i.e. no issues identified) on the following broswers to ensure intended functionality:
- Mozilla Firefox Version 109.0 (64-bit)
- Google Chrome Version 109.0.5414.120 (Official Build) (64-bit)
- Microsoft Edge Version 109.0.1518.70 (Official build) (64-bit)
Manual testing was performed successfully (i.e. no issues identified) using the following devices:
- Huawei P30
- Samsung Galaxy S23 Ultra
- Microsoft Surface Pro 7
- Acer desktop with HP 24 inch HD monitor
- HP Notepad
| Feature | Action | Expected Result | Actual Result | User Story |
|---|---|---|---|---|
| Nav bar | User not logged in | View home & about pages only | ok | |
| Nav bar | User not logged in | sign up button visible, link active | ok | |
| Nav bar | User not logged in | Hi Stranger greeting displayed | ok | 5 |
| Nav bar | responsive test | collapses responsively | ok | |
| Log in | Log in button | takes user to log in form | ok | |
| Log in | Log in form | sign up button takes user to sign up page | ok | |
| Log in form | user enters incorrect username or password | user warning | ok | |
| Log in form | user enters details correctly | user taken to home page, nav bar username greeting displayed | ok | 5 |
| Edit profile form | user enters details incorrectly | user warning | ok | |
| Edit profile form | user enters details correctly | success message, user returned to home page | ok | 2, 8 |
| Change password form | user enters details incorrectly | user warning | ok | |
| Change password form | User clicks go back home button | user returned to home page | ok | |
| Change password form | user enters details correctly | success message, user shown option to log out | ok | 3 |
| Change password form | user can log out or use nav options | logged out or nav options work as user is still logged in | ok | |
| User sign up | user enters details incorrectly | user warning | ok | |
| User sign up | user enters details correctly | taken to profile info page | ok | |
| User sign up | user can choose username of choice | no need to enter real name | ok | 8 |
| User sign up | User enters medical id | if id not 7 digits error message | ok | 16, 17 |
| User sign up | user enters details incorrectly | user warning | ok | |
| User sign up | user enters details correctly | success message, user returned to home page | ok | 1 |
| User log out | user clicks log out button | taken to log out page, options: log in or go home displayed | ok | 5 |
| User log out | user clicks home button | user returned to home page | ok | |
| User log out | user clicks log in button | user taken to log in page | ok |
| Feature | Action | Expected Result | Actual Result | User Story |
|---|---|---|---|---|
| View feedback list | View feedback link selected | Feedback list displayed | ok | |
| View feedback list | Look for post details | Username, room & date posted displayed under post title | ok | 9 |
| View feedback list | Look for post details | Truncated content visible | ok | |
| View feedback list | Click on feedback title | Feedback detail display opens | ok | |
| View feedback detail | Read feedback | Full feedback content displayed | ok | 6, 10 |
| View comments | Look for comment on feedback | 'Reply from AYA' text present under feedback | ok | |
| View comments | No comments given yet | 'No replies yet...' text present | ok | |
| View comments | Comments exist | Comment, with details of commenter & time/date posted displayed | ok | 9, 10 |
| User submit feedback | user clicks feedback submit link | feedback form displays | ok | |
| User submit feedback | user enters form incorrectly (missing fields) | warning displayed | ok | |
| User submit feedback | user enters form with duplicate title | success message, return to feedback list | ok | 7, 23 |
| User submit feedback | user submits feedback | success message, return to feedback list | ok | 7, 23 |
| User Edit Feedback | User did not post the feedback | no edit or delete option available | ok | |
| User Edit Feedback | User did post the feedback | edit and delete option available | ok | |
| User Edit Feedback | User clicks edit button | Feedback form displayed with prev. feedback in it | ok | |
| User Edit Feedback | User submits amended feedback | User returned to feedback list, success message displayed | ok | 11 |
| User Delete Feedback | User clicks delete button | do you want to delete warning displayed w 2 options | ok | |
| User Delete Feedback | User selected not to delete | user returns to feedback list page | ok | |
| User Delete Feedback | User selected to delete | user returns to feedback list page, success message displayed | ok | 12 |
| Staff add comment | Staff looks for comment form | comment form is visible under the feedback section | ok | |
| Staff add comment | user is not staff | no comment form visible | ok | |
| Staff add comment | staff submits comment | success message, return to feedback list | ok | 18, 19 |
| Staff edit comment | staff looks for edit button | only visible under comment if the staff = the comment author | ok | |
| Staff edit comment | staff clicks comment edit button | comment form displayed with prev. comment in it | ok | |
| Staff edit comment | staff submits amended comment | returned to feedback list, success message displayed | ok | 20 |
| Staff delete comment | staff clicks delete button | do you want to delete warning displayed w 2 options | ok | |
| Staff delete comment | staff selected not to delete | user returns to feedback list page | ok | |
| Staff delete comment | staff selected to delete | user returns to feedback list page, success message displayed | ok | 21 |
| Feature | Action | Expected Result | Actual Result | User Story |
|---|---|---|---|---|
| Nav bar | Active page is obvious to user | Nav tab in bold is congruent with active page | ok | |
| About page links | user clicks links on bottom of about pager | links open on new page, work correctly | ok | |
| Admin panel | Super user can disallow posts | disallowed posts are not displayed to users | ok | |
| User Story | super user can view medical id in Teen User Profile section | super user can view medical id | ok |
-
There is an unused table in the feedback post model (show_feedback). This was added in error at project development. Rather than delete the field, it was set to null=True and blank=True so that it could have empty data, and not included in any user feedback views.
-
Email is collected sign up, however as email password reset was not implemented, it is not in use. It remains in place for future development.
-
Date format is different for user input at signup to how it is displayed at user profile edit. Help text was added to the user profile edit and signup stage to direct the user in correct format, however it can be confusing. This issue should be resolved in an early upgrade of the site.
- Duplicate slug error: if a user entered a post with a duplicate title a duplcate slug error was generated, crashing the site. I implemented a slug incrementer into the FeedbackPost model to check for slug duplication and add an increment in case of duplication - this avoids the user having to rename their post title.
- When testing adding new post I found that one user could submit feedback, but when next user went to submit an integrity error was generated (Key(slug=() already exists)). I solved this by checking the admin panel. I found that when posts were being reviewed by admin (as they hadn't been set to auto-allow at that point) the slug-field was being generated only at that point. This meant that if there was more than one post awaiting approval (and not allowed by admin) there was more than one post with a null slug value. I researched and implemented a slugify function to make the slug populate itself at point of post generation.
Slug Bug
Slug duplication reference https://www.kodnito.com/posts/slugify-urls-django/
-
Messages were pushing the page down when they appears and when they were dismissed, the page did not revert until it was refreshed (which could cause loss of data in case of form entry). This was due to the CSS styling being applied - I changed the message CSS to absolute position, gave the messages a z-index of 1, and changed the right position so the message was not full screen, using a custom css class to overwrite the bootstrap message css.
-
Staff could edit/delete each other's comments: To solve I applied a nested if statement of {% if request.user.is_staff %} followed by {% if request.user.username == comment.author %} to apply a check that the user was both staff AND the comment author to ensure only a staff who authored a comment could edit/delete that comment.
-
When displayed on screen sizes less than 400px wide the containers were being pushed to the left so there was a long right margin down the body underneath the header. I researched this for a long time, and tried enabling a media query in the css, but not successfully. I contacted tutor support who helped me identify that I needed to set overflow: auto on my html and body classes in the CSS, which resolved the issue. The site is now fully responsive on all screen sizes.
This site can be forked using Github as follows (to make a copy in your own repo)
- Go to Fork button on the right-side ribbon menu (between Unwatch and Star)
- Click the button to make a copy automatically into your own respository
- Owner will default to your own github name
- Add a repository name and an optional
- Add a repository name and an optional description
- Select Create Fork button
This site can be cloned using Github as follows (to make a copy on your own machine):
- Enter the relevant Github repository
- Click the green Code from the menu (to the left of the green Gitpod button)
- Click the green Code button from the menu (to the left of the green Gitpod button)
- Copy the link under https (to copy using HTTPS)
- Open git bash on your own machine, and select the directory you want to save into
- Type 'git clone' then copy in your link The site github link is here:
Ensure project set up appropriately for Django:
- add env.py to gitignore
- pip3 install django gunicorn
- pip install dj_database_url psycopg2
- pip install dj-3-cloudinary-storage (or other image API platform)
- pip freeze --local > requirements.txt (to automatically update the requirements.txt file)
- django-admin startproject project_name . (to start project)
- python manage.py startapp app_name (to create project app)
- populate 'installed apps' (settings.py) with app name/s
- python manage.py make migrations (to prepare changes for migration)
- python manage.py migrate (to migrate changes)
- python manage.py runserver (to test local environment is working)
- In Heroku dashboard click Create New App button
- Give app a unique name
- Select region e.g. Europe
- Click Create App
- Go to Resources tab
- from add-ons select 'Heroku Postgres'
- Go to Settings tab
- Add Config Vars:
- Click on Reveal Config Vars button
- Copy the contents of the DATABASE_URL file
- Click *Add button
- add env.py file to the root directory
- add to the gitignore file:
- env.py
- os.environ["DATABASE_URL"] = "the database link copied from Heroku above"
- os.environ["SECRET_KEY"] = "any secret key (maybe use an online generator)"
- Go to Settings tab, then Config Vars
- in key box enter "SECRET_KEY", in adjoining box paste your secret key from above
-
in the root settings.py file add:
from pathlib import Path import os import dj_database_url
if os.path.isfile("env.py"): import env
-
Secret key
- delete the current key from settings.py
- Add the following in it's place: SECRET_KEY = os.environ.get(SECRET_KEY)
- Go the the dashboard & copy your cloudinary URL
- Go to Settings tab, then Config Vars
- Enter: DISABLE_COLLECTSTATIC, value of '1'
- populate 'installed apps' (settings.py) with: 'cloudinary_storage' 'django.contrib.staticfiles'' 'cloudinary'
- Comment out the database settings and add: DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL")) }`
- Amend the templates array to read: 'DIRS': [TEMPLATES_DIR]
- Add Heroku host address to 'allowed hosts': eg 'aya-teen-room.herokuapp.com', localhost'
- perform initial git commit and git push
- Go to deplot tab within your add
- Select 'github' for deployment method
- Use search box to search for your repsitory, then connect to link Heroku & Github
- Ensure DEBUG set to False in settings.py (Github)
- In Heroku disable collect-static (set to 0)
- Manually deploy by selecting 'Deploy Branch'
- Click view once the option appears to go to live site
-
Slug duplication code: Slug duplication reference
-
Slugify code: Slug reference
-
Coding with Mitch guided me through many of the basic concepts of building with Django when I was feeling lost
-
Code Institute django walk-throughs - set-up and deployment
All written content was created by the site author based on professional knowledge.
Languages
Frameworks
- DjangoPython web framework (backend)
- Bootstrap 4Front-end web framework
During the creation of this site I used the following technologies:
- Git Hub used for online programming, change tracking and storage respository for this project.
- Heroku cloud platform service to deploy, use & manage the application.
- Elephant SQL Postgres SQL database service.
- CloudinaryImage and video API platform for image hosting.
- Lucid Charts for database schema creation during devlopment phase.
- Tables Generator used to create tables in manual testing section for README.
Thanks to my mentors Spencer Barrilball and Medale Oluwafemi for their advice and support, and my family and colleagues for bearing with me.