While being stuck in quarantine is necessary to stop the spread of COVID-19, it also deprives us of many activities that we do to help maintain our mental health. This is especially relevant as summer approaches, as the activites that one would normally enjoy over the summer will no longer be feasible in quarantine, such as going out with friends or travelling. Staying home all day in an uncomfortably warm environment will likely have negative impacts on our mental health, and so we created Clear to help the user detect when their mental health is deteorating as well as advice to help them improve their mental health.
What it does
Clear is an app that tracks a user's mood by allowing the user to take an image of themselves, and then sending that image to Google's Vision API to detect the user's emotions. It then keeps track of these emotions
How I built it
We built clear using React Native + Expo. We had originally tried using Flutter, but the camera plugin was buggy and the lighting became terrible, which would be unacceptable for the Google Vision API. Thus, we switched to React Native and used Expo since I could run the Expo app on my iPhone without having to switch to MacOS.
The backend was built with Express and we used the Google Cloud Vision SDK for Node.js. We used Heroku to host the backend.
The front-end website was built using regular HTML and CSS. We also created some custom images for our website to make it look more professional. We used Domain.com to redirect the memorable URL https://aclearhead.space to the Heroku hosted version.
Challenges I ran into
We made the difficult decision to switch from Flutter to React Native + Expo 6 hours or so into the hackathon after struggling with getting the camera plugin to work. This was a minor setback, but we managed to continue the app and complete it just in time.
We also experienced challenges with getting the Google Cloud SDK to work well with Heroku. As the Google Cloud API expected a JSON file on disk (that contained sensitive data like our Google Cloud API Key), we needed to somehow create the file on Heroku but not commit it into the Git history. However, when we tried doing it the naïve way (by using fs.writeFileSync), we found that Heroku kept deleting the files every time the app would be built. In the end, we finally got it working using Heroku build packs.
Accomplishments that I'm proud of
We're proud of creating a working application even after the setback of starting late.
What I learned
We learned how to integrate our app with Google Cloud APIs, as well as learning about Heroku buildpacks.
What's next for Clear
Our initial idea involved taking images of the user automatically, so that the user wouldn't need to manually do it themselves. However, we quickly found out that due to security reasons, this isn't possible within mobile apps. We were going to also create a companion Electron app for taking images while the user is sitting at their desk, but after hours of struggle we couldn't get the webcam working consistently and thus decided to scrap the Electron app and return our focus back to the mobile app.
As a fun fact, it took a lot of thought to come up with this domain name. We originally believed that we couldn't find a clever domain name for our use case, but luckily while searching Google for "words that end in 'space'", one of our teammates found "headspace", which he remembered the meaning being related to having a clear mind. Sure enough, when he searched for the definition, it gave him:
a person's state of mind or mindset.
"if you're not in the right headspace for this stuff it's going to bore you, no matter how well it's done"
This definition aligned perfectly with mental health, but unfortunately, head.space was already taken (as both a domain and as an actual app name). We decided to continue brainstorming for a clever way to integrate a suffix head.space into our domain name, and we wanted to emphasize having a uncluttered and free headspace, which is extremely important especially in a quarantined summer, where you're likely to be sitting at home in a stuffy environment all day.
We also were searching for a word that would fit without the .space suffix, as "a right head" sounded a bit weird. We then stumbled across the word "clear," which can be used in the phrase "a clear head" (the ability to think clearly) as well in conjunction with "a clear headspace." With this, we now had a very memorable as well as a very clevel domain for our app, and you can visit it at https://aclearhead.space
GitHub Repo for Website: https://github.com/AbstractLion/ClearWebsite
Expo App: https://expo.io/@leonzalion/clear
GitHub Repo for Expo App: https://github.com/AbstractLion/ClearApp
GitHub Repo for Backend: https://github.com/AbstractLion/ClearBackend