As we are now almost a year into the pandemic, we realize that many people are struggling to maintain contact with the rest of their community. In fact, among students, we personally see that as a result of lack of social contact, our peers have also struggled to stay motivated with their studies. As many of us are isolated at home, Zooming classes away and watching weeks pass, it begins to feel lonely. Yet the traditional social media feed doesn’t reflect this. TherapMe aims to improve one’s mental health by showing you that we are not alone in this. We want people to answer meaningful questions, yet provide an anonymous space so users are comfortable doing so.
What it does
To begin, TherapME asks users for their phone number, which is then automatically saved in a database as well as given to Twilio to keep users in touch with TherapME. TherapME can then contact users daily via SMS with a question, which is also displayed on TherapME itself for reference. In addition, the daily question changes each day. The purpose of this question is to help users share their current situation anonymously, so they can feel part of an inclusive group where they can maintain social contact.
How I built it
The technologies we used in this hack can be summed up as the MERN stack as well as using the Twilio API. The MongoDB was hosted on GCP and was used to hold all phone numbers and text messages. To add and retrieve data from the database, we also developed a REST API that ran on a Node.JS/Express server, and that itself was deployed to Heroku. Besides the endpoints used to alter and add data in the MongoDB, the server also had other endpoints used to connect with Twilio and send SMS messages to users. Last but not least, the server runs a CRON job at a designated time to send users the daily question via Twilio.
For the React component of our hack, we had first mocked the design in Figma. This part of hack took a considerable amount of time to get the design just right. Once finished and then implemented in React, an appealing design was born. Leveraging React Bootstrap, we display a simple form that validates a user's phone number. Beneath that are animated rows that displays user’s texts for the daily question. CSS also played a big part into how we styled the app, especially with z-indexing certain components to make a minimalistic, nature background.
Challenges I ran into
For some of our members, this was the first time that we were working with MongoDB as well as the TwilioAPI. While both technologies took some time to figure out, we are happy to be able to incorporate CRUD operations for our server as well as communicate with Twilio to fulfill the function behind TherapME.
Accomplishments that I'm proud of
What I learned
As stated already, this was the first time for some of us working with MongoDB and Twilio. Incorporating these technologies into this hack allowed us to feel comfortable with working with them in later projects.
What's next for TherapME
While we are happy with the design of the web app, there could also be room to improve. At the moment, TherapME only shows the messages and daily question of the current day, but we would love to allow users to see past questions and past messages.