Serotonin

Contact

Inspiration

The lack of mental health applications is seriously flawed. From fifth grade where school teachers start emphasizing mental health, we are expected to automatically have perfect mental health.

After discovering that 82 million Americans per year suffer from mental health issues such as anxiety and depression, I began researching current mental health applications. To my surprise, there were no dominating ones. Users often complained about the lack of practicality (users do not want to log into a website or open up an app name "Mental Health" every day). With the rising popularity and usage of chrome extensions, I decided to create a mental health chrome extension. A practical one.

Instead of the user inputting words to describe their feelings, users click on emojis that correlates or best represents their current moods. Users do not like writing out how they feel, hence the creation of Apple emojis, so I gained inspiration from that.

Serotonin, in medical terms, helps regulates mood naturally. When one's serotonin levels are at a normal level, one feels emotionally stable, happier, and calmer. Therefore, the perfect name for my chrome extension.

What it does

After downloading the extension (for right now, downloading the repository from Github and uploading it to Developer Mode in Extensions), users pin Serotonin, which has the icon of a smiley face. When clicked on, the responsive navigation bar with "Calendar," "Data," "Notes," and "Profile" appears along with six animated emojis that represent moods - happy, confused, alright, sad, mad, and explosive.

View Video for a More Accurate View

Calendar: Originally, the calendar is blank. When the user first clicks on an emoji, the day on the calendar changes color, correlating to the emoji. For example, the user clicks "Happy Emoji," the calendar day turns yellow, and the "Sad Emoji" causes the calendar day to turn blue. The calendar is fully functional with "Next," "Previous," and "Jump To [month and year]."

Data: An animated pie chart for the current month is shown with updated percentages when hovered upon. If the user chooses multiple moods throughout the day, the pie chat automatically updates.

Notes: A responsive, movable textbox where users write anything - notes, rants, feelings. Notes are saved with local storage, and users have the ability to choose the mood they feel when they write. The notes under "Show Notes" are color-coded with the mood.

Profile: A textbox where users write their phone-number, and the Twilio messaging API sends a text message to the user's phone number with the following message and user's data: "Hello! Welcome to Serotonin. Your monthly mood is [moods], weekly mood is [mood], and current mood is [mood]."

Everything is saved with local storage, even when the extension is paused or removed.

How we built it

As a beginner to chrome extensions, I viewed and researched the purpose of each required file in a chrome extension, manifest.json for example. With my trusty Visual Studio Code, I created files that included JavaScript, HTML/CSS, bootstrap, and Twilio.

Challenges we ran into

Before this hackathon, I had NEVER used an API before, bootstrap, and had minimal experience in JavaScript. Fun fact: I spent more than five hours downloading HomeBrew for the Twilio API and researching on Twilio's website. Bootstrap was a problem due to the limited colors option; however, I found how to make an array of colors and use them for my bootstrap buttons. Styling for bootstrap was also a problem since the buttons were in my JavaScript files, and I was confused about how to implement the style tag. Each step ultimately had its own problems, but I pushed through and finished a fully-functional and appealing chrome extension.

Accomplishments that we're proud of

I did this all by myself (even the emojis considering my lack of artistic ability)! I will quite never say this enough - I absolutely love my chrome extension Serotonin. It's not a project that I create in a hackathon and never use again, I can use it forever (or when I expand and create an updated version in the long run).

What we learned

For the amazing Twilio API, I learned what an authentication key and ID were and how to call them in my code. I also learned that bootstrap has button classes (for example, button btn-lg). My JavaScript proficiency definitely improved, and now, I can create more chrome extensions!

What's next for Serotonin

File messaging with Twilio API. I used the SMS messaging since it was one of the few options available for the free basic Twilio plan. Serotonin can easily be promoted to schools, companies, and more. No limits! Everyone struggles with mental health at one point in their lives or have an obsession with emojis! It has market value due to everyday stress whether caused by school, work, or family. People need to keep track and regulate their emotions. I hope to expand on Serotonin, create an accompanying React Firebase website that promotes the chrome extension, and publish Serotonin on the Chrome Web Store.