Moody

Inspiration

The color theme and the music are inspired by a video game called Omori where the main character faces depression and goes on adventures with his friends to fight his inner demons. Our website aims at improving the mental state of our users, and it encourages users who experience similar mental health issues to relieve their anxiousness and leave it on the pages with us

What it does

We have 3 main features for our website. Our feelings quiz offers a variety of questions to determine our user’s mood, specifically looking out for signs of depression or relating issues. This information is recorded in our second feature, which is the Mood Trend. This feature showcases the user’s mood daily, monthly,...etc to see how one’s mood is changed over time Having a journal log readily available for users when they log in offers them to write about their worries, and potentially leaves them in a better mood after they visit the site.

How I built it

We used Figma to design our website in the demo Then we implemented our website using HTML and CSS for our frontend look We also tried using react.js for the backend components of our website There was the usage of Procreate for animations and designs, and iMovie to put everything together for the demo video.

Challenges I ran into

Our team faced multiple adversities within the duration of this competition, in part because it was all of our first times joining a competition as such. Initially, our team started off with 4 team members, Tasnim (Tasnim#9773), Rajib (rajib.khan#0837), Satyam(satyam2003#7531), and I. We got along well and were able to discuss the important factors of the projects as well as agree on the division of the workload. Satyam and I were put on the frontend aspect of our project, which included designing prototypes, and building the HTML and CSS part of the website, while Tasnim and Rajib agreed on working on the backend and developing the UI for our website. We had occasional meetings with each other to give checkpoints and check progress. However, Rajib messaged all of us saying that his code broke and that he thinks we should work on this project after the competition for better results. As for Tasnim, no team members were able to reach her the entirety of the night. So by 12 PM on Saturday, our group was down to two active members, Satyam and I. Because we had little to no experience with react.js, we had lots of difficulties picking up Tasnim and Rajib’s tasks of building a UI at such late notice. Satyam and I had meetings after this to rediscuss our responsibilities and decided that the most personable track was to complete the demo video, which was my responsibility, and Satyam would continue his frontend development. A more technical approach of issues we faced consisted of not knowing how to store our user’s data after they’ve entered their information into the system. I think that requires the connection between the back and front end, something we had issues with establishing. We also had issues with transferring our design from Figma to HTML and CSS codes with usable and interactive buttons and redirections.

Accomplishments that I'm proud of

I was not familiar with Figma at the beginning of the competition but in the end, was able to incorporate that EDI into the project for a smoother web design experience. Satyam and I are proud of our entire project as it reflects our potential to excel when put under hard circumstances and faced with many challenges. We were able to learn and implement IDEs we’ve never heard of before, languages that we have no experience with..etc In the end, there was nothing that we weren’t proud of during the competition.

What I learned

I learned to use Figma and how to create animations for the demo video. I also learned to implement the designs from Figma to HTML and CSS, though there are still lots left to learn, I now know more than I did before! Satyam learned about how local storage works and even learned some new concepts of CSS like how to create a wave and how to create an attractive border-radius. Overall, there was good team chemistry, and Satyam and I were open and versatile with this project. We both have learned a lot from this experience and are going to pursue this project after the competition and am thankful for this opportunity! I hope to join again next Hackathon!

What's next for Moody

In terms of features, I think Moody would come up with a feature to connect with people or friends of similar mood trends or issues to help them form alliances, ameliorating their mental health issues. We would definitely continue this project outside of this competition in hopes of helping others around the world who are battling with their inner thoughts every day.

Built With

• css
• figma
• html
• imovie
• intellij-idea
• procreate
• react
• vscode