DEV Community

loading...
Cover image for Building a mental health crisis app, Final Day.

Building a mental health crisis app, Final Day.

JC Smiley
Front End Developer with a focus on React (web) and React Native (mobile), Code Connector national team Online Content Manager and a leader for the Memphis chapter, Gardner, and Outdoor Enthusiast
・3 min read

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

Screenshots

Home Page
Home page screen-shot

Log-in Page
Log-in page

Status Page
Status content page

Connections Page
Connections content page

Update Status Page
Update status page

Search for Connections Page
Connections search page

Dark Mode
App in Dark Mode

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
Server code

Permissive License

Client repo LICENSE

Server repo LICENSE

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

My project partner recreated the wire-frame around the idea of a private community and communication.
New wire-frame

Discussion (4)

Collapse
dthompsondev profile image
Danny Thompson

Awesome Article JC!

Collapse
jcsmileyjr profile image
JC Smiley Author

Thank you

Collapse
onesirian profile image
Lawrence Lockhart

JC This may be your best one yet. Definitely portfolio material!

Collapse
jcsmileyjr profile image
JC Smiley Author

Thank you