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...:"

• Login securely
• Sign up to the app
• Change the colour scheme of the whole app
• Answer the questionnaire
• Send answers to questions
• Edit answers once saved
• See my progress within the questionnaire via a progress bar
• See completed/incomplete sections on screen
• Access the app offline
• Be able to use the form on mobile and desktop
• See ideas to help with answering some questions
• Enjoy using the app!

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

• Integrate drawing capability
• Add questions about current and previous medication
• Improve user experience
• Increase test coverage to ensure the app runs as smoothly as possible
• Autosave answers to help users avoid losing their input
• Customisable background image
• See fun animations on the site
• View the info page again (currently only shows on signup)
• Answer questions using an interactive modal
• Close their account should they choose to

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

• Send email Dwyl library
• Using flash messages
• Password reset flow
• CSS speech bubble :)
• Handling 404s with Express
• Choosing accessible colour combinations

💃💃💃💃