Building a mental health crisis app, Final Day.
Tags: dohackathon, codepen, mentalhealth
Published: 2021-01-10 23:17:43

## What We built
The app is called “Help Me” and is designed primarily as an “SOS” (distress signal) to a selected circle of trusted people when someone is going through a mental health crisis. The goal is for the user to build a trusted community around themselves with private conversations and provide a system to show the user's range of emotions.


### Category Submission: 
Program for the People: Mental Health  


### App Link
[App Link](https://help-client-gc9ge.ondigitalocean.app/home)


### Screenshots
_Home Page_
![Home page screen-shot](https://dev-to-uploads.s3.amazonaws.com/i/067fzkzayuju5h08chr1.PNG)

_Log-in Page_
![Log-in page](https://dev-to-uploads.s3.amazonaws.com/i/8lzca8xaw86igrn8iwkc.PNG)

_Status Page_
![Status content page](https://dev-to-uploads.s3.amazonaws.com/i/egf9vwz4xqq7yeq0nmaj.PNG)

_Connections Page_
![Connections content page](https://dev-to-uploads.s3.amazonaws.com/i/80hsqnb3jtxabv8odcgy.PNG)

_Update Status Page_
![Update status page](https://dev-to-uploads.s3.amazonaws.com/i/i0cjtni7ueez1f1byd9h.PNG)

_Search for Connections Page_
![Connections search page](https://dev-to-uploads.s3.amazonaws.com/i/e5f8ipt2pnbzqmitjkg1.PNG)

_Dark Mode_
![App in Dark Mode](https://dev-to-uploads.s3.amazonaws.com/i/mfbsxkfhu6dxlexpf9n4.PNG)


### Description
**Communication Features**
* Users can click on another user's profile to make a _SOS_ phone call. 
* Users can click on another user's profile to send a _SOS_ text message, "I need help". 
* Users can send in-app messages to each other.


**Status Updates Features**
* Users can create a status update about their emotional feelings.
* Users can see their connections' status updates.


**Creating a connection Features**
* Users can search and add other users as a connection. 


**User Creation Features**
* User can create a user profile with name, username, email, and phone number.
* User can add up to five friends as their top five connections.

**User Preference**
* User can choose light or dark mode. 

**In the future we would like to add these features to provide more resources to people facing these health challenges!**

1. Users can push one button to send to everyone, "I am having a mental health crisis. Please come help me!"
2. When the user makes an _SOS_ text message, their location is sent with the message. 
3. Display a list of mental health resources.


### Link to Source Code
[Client code](https://github.com/xamthor/Help-Client)
[Server code](https://github.com/xamthor/Help-Server)

### Permissive License
[Client repo LICENSE](https://github.com/xamthor/Help-Client/blob/master/LICENSE.md)

[Server repo LICENSE](https://github.com/xamthor/Help-Server/blob/master/LICENSE.md)
## Background
Throughout my life I have only seen mental health issues on the TV. I considered these issues as other peoples problems until I saw them manifest within my family and friends. Now I'm scared of the thought that someone I love, cherish, and respect could experience something so dramatic and terrifying alone. Even worse, they could be hurt or killed while reaching out for help.

A sad byproduct of using social media as a “call for help” when going through a mental health crisis is that the person's reputation could be shredded by people who aren't dedicated to that person’s safety. I have found that this adds to the drama and fuels the fire of paranoia.

### How we built it 
The app was originally created in a single repo with both client and server files.  We found we were unable to run both components of the application within a single Digital Ocean app. We had to create two sites to host the server and client. 

**We learned**
1.  How to deploy web applications to the Digital Ocean App Platform.
2.  New experience using Angular to build a web applications.
3.  Introduction into user interface styling with Tailwind.
4.  Building the back end server with NodeJS and MongoDB.

### Additional Resources/Info
_The original design idea looked like this and focused on communication._
![Original wire-frame](https://dev-to-uploads.s3.amazonaws.com/i/s8w0nc7q6291t0lmhae3.png)

_My project partner recreated the wire-frame around the idea of a private community and communication._
![New wire-frame](https://dev-to-uploads.s3.amazonaws.com/i/xltv9xfqysc1i7w26c9e.PNG)