We were inspired to create SemiColon; because of 2 aspects; for the frontend, we had looked at the styling and layout of the uber website, and wanted to implement a design similar to it. For the backend, we knew that especially in quarantine after the COVID 19 pandemic began, many individuals fell into depression due to financial stress and the loss of family members/people close to them. Hence, we wanted to help by creating SemiColon;

What it does

SemiColon has many features built into it. The webapp has a random quote generator coded using the useEffect API, a drop down list of suicide hotline numbers for all countries incase of an emergency, mental health tips/strategies, an inbuilt chat app that the users can use to talk to others on the website for relief, and twitter mental health sentiment analysis charts using the NLTK Vader Library. This provides statistical data about mental health on social media.

How we built it

We used react.js to code both the backend and frontend of this project, but used useEffect API for the quote generator and a set of key value pairs that contained countries and their suicide hotline numbers to display in our website. We also coded a chat app using UI kits from Finally, we incorporated the statistical data that analyzed twitter users' mental health with the NLTK Vader Library and researched how to code this in react js.

Challenges we ran into

3 of our team members had no experience with react.js, and thus only knew how to code in Python. Our original project was in Python Flask, but it was getting hard to implement all the backend functionality, thus we were worried that we wouldn't have time for frontend styling. However, we decided as a team that we would convert the project to react.js, and our 2 team members who didn't know react researched key aspects of the code we would need and referred to the docs as they were guided through the coding process.

Accomplishments that we're proud of

We are proud of the fact that when we were at the toughest situation with styling, we were able to smoothly switch to react.js and finish up the frontend with HTML and CSS, which we all knew. We are also proud about how we could finish the backend with teamwork and perseverance. We agreed on ideas very quickly and shared the same mindset as a group. When we had finished implementing all the functionality, one of our group members, Asrith, suggested that we made our homepage even more professional by implementing graphical data about twitter mental health, and we agreed immediately. This has truly been a spectacular experience for all of us.

What we learned

We learned about how to use different APIs in react.js and how to use key value pair data to render on a dropdown in a website. Most of us were new to react.js as a whole, so we received help from our teammates. We also learned about how to use the APIs and UI Kits in, which is recommended for creating professional chat apps.

What's next for SemiColon;

In the future, we are thinking of adding a Machine Learning/AI component to our website with a sleep tracker or emotion meter extension. We are also planning on adding a calendar page for users to keep track of important tasks and reminders to avoid stressing. SemiColon; is definitely an application that has just begun with its features and technologies, and we are enthralled about what we could experiment with hereafter.

Built With

  • css
  • html
  • nltkvader
  • react.js
  • useeffect
Share this project: