Group Sentimental

The home screen
The journalling page
The hobby tracking page
The statistics dashboard

Our team is a group of 4th-year students at UBC, we hope you enjoy the project!

Inspiration 💭

After humans begin living in small, isolated space pods in the absence of human interaction and other essential stimuli, there will undoubtedly be significant negative mental health effects. Our project will serve as a tool for maintaining psychological resilience, offering a blend of companionship and self-discovery on their solitary space journey.

What it does 🎮

The website allows for journalling, hobby tracking, and mood tracking. Your mood is derived from a sentiment analysis AI which is passed off to ML to give you personalized insights and mood statistics/predictions.

First, the user is prompted to enter their name for a more personalized experience.

They are then taken to the "hobbies" page, where they can add and delete hobbies. They can also keep track of how many days they have been following them in a row.

Next, the "journal" page is shown, and the user can input how they feel during the day. The color of the screen will change while writing reflecting the emotional result output by our sentimental analysis AI.

Finally, statistics are shown on your historical usage of this mood tracker website, and predictions are made on your future emotional state with machine learning.

How we built it 🧱

We built the front end using Next.js, a React framework and Tailwind CSS. Data is stored locally with browser APIs to respect the privacy of journal entries. The code is written in Typescript.

Challenges we ran into 🤔

Originally we were going to use GitHub codespaces for the dev environment, but we had to pivot away to use our local machines. We also originally were going to save data on Firebase but decided it might be questionable for users to upload intimate data on the cloud.

Accomplishments that we're proud of 🙌

We are very proud of the front-end UI since none of us have used Next.js or Tailwind before.

What we learned 💡

We saw the most knowledge gained for Typescript, NextJS, React and Tailwind. We came into the hackathon not fully grasping these technologies but we all learned their best use cases and how we could leverage them to build our application. We also learned new pieces of knowledge from services such as Codespaces and Live Share.

What's next for Group Sentimental 🔮

We would like the website to be hosted so it can be viewed and used anywhere. We also want to have more statistical analysis for more insights and even more interesting graphs. The final improvement we currently want to make is to have keywords be stored with the sentiment of the overall statement to allow users to see what words make them the most happy or unhappy.

Built With

github
next.js
react
tailwind
typescript

Submitted to

BCHacks 5.0
- Winner 2nd Place

Created by

I worked on the front-end and the browser API, and some of the machine learning / AI

Beck Corkle
I mostly worked on the UI and helped create the overall theme, styling and layout of all the pages. Learned how to set up and use a component library as well using tailwind. I learned a lot more about next.js, typescript and web development in general.

Abhinav Thota
I worked on keeping data in localstorage for new and old journals, fixes to UI, and the graphs that live update! I had to learn several technologies that I have never worked with before such as Typescript and NextJS!

KaelPearson pearson
I worked on integrating the text editor, visualising the sentiment analysis as you type, the graphs, and the colour picker for happiness/unhappiness to help accommodate users who are colour blind or come from different cultural backgrounds (e.g. red can be positive in some Asian countries). I got to learn and utilize Next.js and npm at a whole new level, which was really exciting

Adam Fipke