fac-11 / allaboutme Goto Github PK

An app to help young people at Anna Freud centre to easily transition to adult care

Home Page: https://allaboutme-af.herokuapp.com/

JavaScript 53.86% PLpgSQL 2.81% HTML 2.37% CSS 6.11% Handlebars 34.85%

allaboutme's Introduction

All About Me 💪

25.9.17 - 13.10.17 | Founders & Coders Student Project | by Constantina, Dak, Jen & Rebeca Link Here
Continued for 2 more sprints as a Graduate Project Link here| by Constantina & Dak

Summary 📝

All About Me is a mobile-first web application which allows young people at the Anna Freud centre to answer questions about their mental health and send their answers to their mental heath workers.

Challenge ⚠️

Patients at The Anna Freud Centre were tired of being asked the same questions every time their clinician changed or when they went to a new centre. They wrote up the most commonly asked questions into one questionnaire which they could give to their clinicians, however it was still paper-based, papers often get lost and they found themselves again in a distressing place where they would have to repeat answers to personal questions.

Solution 💡

All About Me allows patients to answer the questionnaire online in their own time, save their answers, and update their details as needed. When they're ready they can send their form to their clinician.

How?

Design Sprint 🎨 (See a detailed process here)

Ideation
Prototyping
User Testing

The outcome of our design sprint was a prototype designed in Figma:

And our database design:

Build Sprint 🔧

Sprint Planning
Build!
Frequent discussion of priorities and user testing results with PO

See the outcome below!

User Stories 📚

In order to create a realistic MVP we focused on specific user stories we wanted to achieve.

Sprint 1

"As a user I want to be able to...:"

Sprint 2

Use the app offline (PWA) - no longer considered a priority
Change the colour scheme of the whole app
My data is safe and secure
Add 'Forgotten your password?' functionality
More tests to prevent unexpected errors
Navigate the app easily
Send a copy of the form to myself

Sprint 3

Draw my answers - feature is almost ready but is not yet tested or integrated with the rest of the app
Be able to hide my answers
Better styling on mobile
Fix colour change bug
See sensible error pages/messages when something goes wrong
Include any additional information I feel is relevant
Autosave answers - moved to sprint 4
Have a child-friendly experience while using the app (animations) - moved to sprint 4

Sprint 4

The product! ✨

Check it out here 👀

Or look at this short video that shows basic functionality of the app:

Set up the app locally 💻

First clone this repo:

git clone [email protected]:FAC-11/AllAboutMe.git

then run npm i to install the dependencies for the app.

Database Setup

In terminal type psql or pgcli if installed. Within psql/pcli enter the following commands:

CREATE DATABASE [db_name];
CREATE USER [user_name] WITH PASSWORD '[password]'; # (password in single quotes)

Now you can set the database url in your config.env as follows (setting the values in square brackets to the values you defined in the steps above):

postgres://[user_name]:[password]@localhost:5432/[db_name]

Next run the db_build.js file in terminal:

npm run dbBuild # to build the database
npm run dbSeed # to build the database and prepopulate with seed data

This will create the tables in your database. The seed data adds a user with email [email protected] and password password.

Environment Variables

Environment variables are one of the ways we keep our product safe. If you want to access our app locally you will need to add your own.

First create a config.env file in the root directory of the project and add the following variables:

DATABASE_URL
SECRET
SESSION_SECRET

and for sending emails you need the following:

TEMPLATE_DIRECTORY = ./src/email_templates
SENDER_EMAIL_ADDRESS
AWS_REGION
AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY

(Note: have a look at the SendEmail module to set this up and find the values for the variables)

Redis

Our app uses redis to store information used to reset passwords. In order to run the app locally you will need to have a redis server running on your machine. The instructions for this will vary depending on your setup: https://redis.io/topics/quickstart

Start the Server

You can now start the server! In your terminal type:

npm run devStart

then you should be able to go to localhost and view the app!

Technologies 💾

Database: PostgreSQL and redis.
Authentication: Password hashing using bcrypt.
Styling: Tachyons and CSS.
Node.js, Express and Handlebars.
To send the form via email: SendEmail with AWS.

Rescources

💃💃💃💃

allaboutme's People

Contributors

Stargazers

Watchers

Forkers

jen-harris rebecacalvoquintero dangerdak

allaboutme's Issues

Edit Answers

The user will be able to edit the uncompleted sections .
The user will be able to change his/her previous answers.

access to other pages without login/signed up

At the moment you can access to other pages even without being logged in

Autosave form

Autosave form so users don't accidentally lose work.

Could be every time a field is changed, or periodically...

relates #53

User Testing

To gather feedback on the prototype we need to carry out using testing.

Understand what users think about the app
Highlight any potential issues
See if there are any additional features that users want
Ensure that the flow of the app is intuitive to the user

Save form as pdf/word document

the data will be exported as a pdf/ word document
possibility to send the pdf through the form as attachment but not necessarily

Colour theme choice

As a user I can choose my colour theme
The theme will affect the whole app
The theme should take effect without having to refresh the page
The theme should be the same on my next visit
- Even without the user having to log in - cookies?
Checkbox should be ticked for current theme

Progress bar

A graphical user interface that is intended to inform the user how long it will take him to complete the form.
needs:
logic
& Styling

What precautions do we need to take for data protection?

Hey @NickPovey, we were chatting yesterday and starting thinking about data security as @sofer mentioned this is particularly stringent within the NHS.
Are you or Alex able to let us know what measures we need to put in place?

Logout button

There should be a way to log out from the app :)

Animations

Animations - we were thinking a dancing penguin in particular to encourage the user for his progress with filling in the form would add a lot for a better user experience.

HTML

Handlebars that will include all the different screens of our app

Send the form

Being able to send the form to an external person: the clinician
the data will be exported as a pdf/ word document

USER FEEDBACK

copy and pasted email

"Hi Nick,

We managed to look at most of it although ran out of time to go through every page. They really like it and wanted to give the following feedback:

· Choice of background colour is very calming
· Page 4 – Change 1st sentence to “This app gives you the chance to tell your new Mental Health Worker about yourself.”
· Page 5 – Change Whatsapp option to text (We would not use social media)
· Page 10 – The following images are unclear so can they be changed please –
Pile of books (use picture of an open book instead)
One looks like a snowdome but assume it’s supposed to be outdoors – please change the image to something clearer
Yoga image??? Can it be changed to something clearer
Do the plane and the world both indicate travel?? If so why are they both needed??
Can we add a pen to indicate writing?
Can we add a microphone to indicate singing?

That’s as far as we got I’m afraid. Can I come back to you again next week with the rest?"

Set up basic server

app.js
index.js
controllors/index.js

allow the app to serve an empty home route page

Security

#104 To salt the passwords
Make sure the data are secured enough

--> email
I have sent the link onto a couple of people but they basically agreed with Alex’s comments just now in that the young person is choosing to complete the information and the only personal information contained is the name and mobile number and not things like DOB or NHS number or address etc. They are choosing who to send it on to so as long as they are happy with the password protection that is set up then it is their choice whether to use. A lot of yp use apps to store information so it is no different really.

Tests

Improve our tests coverage by writing more tests, ensuring that 1. our app is more robust and 2. it's easier to add features as we go along

Things which need more tests:

Endpoints
Helpers

Add max width and margin left & right auto to styling

This will help alignment to the desktop design 👍

Database set up

Build the database
Set up the database schemas
Queries (use TDD!)
- add user
- get user based on email
- insert each answer to each question into database
- get a users answers to questions based on user id/email
Being able to save the data automatically to the database
Validator

Symptoms page - layout of text box

Currently text box for last question is off to the right instead of appearing directly under the question like all the others do - all the others have a
between the text and the textarea.

Drawing element

Choice of drawing and/or writing answers for each question
Use tabs the user can click to show either text area or drawing area
Responsive - app is mobile first so the drawing elements should be responsive
Save drawings to server/db (-> see #193 )
Retrieve drawings from server/db
Test saving and retrieving images
Send drawings in email to clinician

favicon

add favicon

Use flash messages

Use connect-flash module to display success/error messages.

This is more readable and easier to use than our current method (which also doesn't allow us to show messages on redirect 👎 ).

Useful gist example of how to use it: https://gist.github.com/brianmacarthur/a4e3e0093d368aa8e423

(We've already changed our messages partial which will have broken messages on other pages which still depend on the old method).

Should work on all pages
Should be styled :)

css

Password reset

Functionality for the users to reset their passwords should they forget them would be nice to add.

Show user if section is complete on progress page

As per figma design, to allow the user to see their status on individual sections

Documentation: Add database diagram to readme

To make it easier for someone coming to the project to see what's going on.

e.g using http://ondras.zarovi.cz/sql/demo/

Create Handlebar partials

Navbar
modal

Typeform Style

When the user answers the first question, it will be directed to the second one one in an interactive way

https://www.typeform.com/

Refactor DB

Combine database form tables into 1. This will make our tables easier to work with and make changes to and should also take care of #98

Improve functionality of Progress Bar

At the moment it adds an arbitary 20% per section whether it is completed or not - this could be improved to update based on number of questions answered 👍

consider doing this thing

specific comments here

Create helper to greet user by name

Create pure function to find name of user on app
input helper into relevant sections throughout the app

Send Form from your own email address

Possibility for users to send the email from their own email address, so that they can also keep it in their record could be added.

PWA

Make the app a PWA so that users can login offline

The users could access the app offline
Fully functional in mobile: The users could save the data offline

Passwords enhanced security

Using bcrypt instead of the crypto module is a better choice for enhanced security specifically for user passwords according to the following research we've done:

link1
link2

Styling bugs on a couple of pages

No header on progress page
'NO' preselected on appointment page
'OK' hidden on symptoms and difficulties page

styling bugs

'>' not needed on appointments page
two headers on sign up page
starting title is too big
do font black

Link form to database

Should be able to:

Set up Heroku, Codecov & Travis

Set up

Heroku
Codecov
Travis

tests TDD

fix bug

Symptoms section is not saving properly

re-colour 'edit' buttons on home page

Color of edit buttons is now grey - this should be purple

heroku not working

[ x] add the rest of the config.env in heroku
[ x] look at the logs to find out why it is not working

Name validation

We should re-think name validation - current error message says it cant contain alphanumeric characters and validator seems to not let it contain spaces

Login & Sign up

Sign Up

HBS

Create HTML for basic form structure

Controllors

Password module
Signup.js
signuppost.js

Database

signup.js

Validation

Includes Validation in backend
[x ] renders error messages on page
[x ] It should be secure enough --> nobody should be able to access to the database

Testing

Test all validation logic

App status

Hey @NickPovey,
We're looking good to get a working product ready for Friday 👍 . Unfortunately we have had a bit less time that we expected when we were scoping the product so realistically I don't think we'll be able to get all the extra features finished.
We are unlikely to get the drawing or speech element finished or the offline aspect. But we are still aiming to incorporate the colour choice 😄 I hope this is OK!
If we have a second sprint these will be top priority!

user testing

Here is the feedback from my colleagues at the anna freud centre

Ability to hide questions #117
Add open section to just write whatever you want #119
Generated email of form answers should get sent to your email as well #120
Home button icon looks like a bar chart and is not clearly a home button, replace with icon of a house #124
The rain prompt shows up for all questions, and hence doesn't make sense for some of them #138
Didn't like the background picture, replace/ability to put your own one there (tried to get them to suggest an alternative, no luck) #137
Not very child friendly, add happy/smiley faces instead of yes/no or maybe have an alternative version of the app that would have this that you could choose, selecting your age range at the beginning #136

Some things I have noticed

Question 6.Re phrase to "What helps you to keep well?" #116
There isn't a back button on the your progress page and the colour section page, so some times people kept on pressing the back button on the actual web browser on my tablet which would take them back to github, I don't think it would hurt to just have it everywhere if possible. #118

color scheme designer tool

This is awesome, I've used this for web design in the past. Check it out, it might be useful.

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Welcome page

Some sort of intro page explaining what the form is and how it will be used. Eg from the pdf sent to us:
"This booklet allows you to write your own introduction
to your new Mental Health worker giving them the
information you want them to know about you.
You don’t have to answer every question if you feel
uncomfortable doing so and you can give as much or
as little information as you would like.
It may be helpful to get family or friends views to help
you complete some of the answers.
A copy of the document will be sent to your new
worker and a copy will be given to you.
This document has been designed and written by
CAMHS Service Users."

HTML5 progress bar element not compatible with all devices

Currently you are unable to style to progress bar and the pre-styled version is not compatible with mobile .
Will need to look to code this ourselves