All About Me 💪

25.9.17 - 13.10.17 | Founders & Coders Student Project

Made by Constantina, Dak, Jen & Rebeca

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.

Or as we say in the app:

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.

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 functioning prototype designed in Figma:

Build Sprint 🔧

• Sprint Planning

• Technical spike

  • PWA

• Build!

See the outcome of our build sprint below!

User Stories 📚

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

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

• Login securely
• Sign up to the app
• Select a personal colour - started, majority set as issue for spring 2
• 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 - sprint 2
• Access the app offline - spring 2
• Be able to use the form on mobile and desktop
• See ideas to difficult questions
• Enjoy using the app

The MVP! ✨

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 git@github.com: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'];

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:

node src/database/db_build.js

This will create the tables in your database.

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 and add the following variables:

DATABASE_URL
SECRET
SESSION_SECRET

and for sending emails you need the following:

TEMPLATE_DIRECTORY
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)

Start the Server

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

npm run devStart

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

To be continued... 😎

In the next sprint, we aim to:

• Make the app available when the user is offline (PWA)
• Allow the user to change the colours of the whole app
• Take into account the possible data storage constraints
• Allow the user to draw his answers
• Possible extra animation
• Add 'Forgotten your password?' functionality
• More tests to prevent errors from happening
• Add typeform style
• Styling error pages

Technologies 💾

• Database: PostgreSQL
• Styling: Tachyons and CSS.
• Node.js, Express and Handlebars.
• To send the form via email: SendEmail with AWS.

Rescources

• @oliverjam's guide to a minimal PWAs
• Send email Dwyl library

💃💃💃💃