25.9.17 - 13.10.17 | Founders & Coders Student Project
Made by Constantina, Dak, Jen & Rebeca
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.
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.
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.
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!
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
Check it out here ๐
Or look at this short video that shows basic functionality of the app:
First clone this repo:
git clone [email protected]:FAC-11/AllAboutMe.git
then run npm i
to install the dependencies for the app.
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 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)
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!
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
- Database: PostgreSQL
- Styling: Tachyons and CSS.
- Node.js, Express and Handlebars.
- To send the form via email: SendEmail with AWS.
๐๐๐๐