Prototype for mental health web-app using Patient Health Questionnaire (PHQ-9).
This tool does not provide medical advice, and is for informational and educational purposes only, and is not a substitute for professional medical advice, treatment or diagnosis. Call your doctor to receive medical advice. If you think you may have a medical emergency, please dial your local emergency response phone number.
As a patient, I would like to take the PHQ-9 depression screener and get the assessment score along with its explanation. If I score moderate depression or higher, I would like to be presented with 3 options for therapists that I can choose. Then I will select one and receive a thank you message.
- node must be installed
cd mental-health-app
yarn
yarn start
Go to http://localhost:3001
- click on Questionnaire
- Side Effects Management: redux-saga
- State Management: redux
- Router: react-router
- Front-end: react
- Styling: styled-components
- Transpiler & Bundler: webpack + babel
- Backend: serverless function (see mental-health-api)
- allows for offline use
- router no longer loads all the routes even if they are not in view.
| React | Preact | Chunk Name |
|---|---|---|
| 76.11 KB | 46.66 KB | js/bundle |
| 4.95 KB | 5.14 KB | js/main |
| 3.8 KB | 3.79 KB | js/DiagnosisRoute |
| 2.79 KB | 2.73 KB | js/TherapistsRoute |
| 2.5 KB | 2.58 KB | js/QuestionsRoute |
| 1.25 KB | 1.24 KB | js/runtime-main |
| 895 B | 891 B | js/WelcomeRoute |
| 234 B | 234 B | css/main |
| Metric | React | Preact |
|---|---|---|
| First Contentful Paint | 2.3 s | 1.9 s |
| Speed Index | 2.8 s | 2.4 s |
| Largest Contentful Paint | 2.4 s | 1.9 s |
| Time to Interactive | 2.4 s | 2.1 s |
| Total Blocking Time | 100 ms | 130 ms |