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

💃💃💃💃

dangerdak / allaboutme Goto Github PK

allaboutme's Introduction