Inspiration
Mental and physical health are an integral part of our lives and it can be difficult to manage. During the pandemic, this problem grew as it was hard to connect with others. Connections allowed us to talk with others about personal things or meet-up with someone to go to the gym, but all of that became harder and as we are starting to overcome the pandemic, we need a way to get out of this situation. Some of us have also gone through the experience of losing friends/family due to mental health and suicide. Our experiences drove us to create a safe and welcoming environment to connect people around the world, so they can have their feelings heard by a supportive community. The purpose of Breathable Minds is to provide a safe and welcoming community where users can interact with each other and work on their mental and physical wellbeing. Our platform also protects the identity of the users, so they can post without any pressure or hesitation which allows them to be more willing to reach out to the community and receive support.
Background info
There are three categories of users: standard, anonymous, and verified. Standard users have access to everything and may use the web app as designed. Anonymous users can post messages while maintaining their privacy. Verified users are medical professionals that are verified, so they can provide input and feedback to other users.
What it does
Breathable Minds is a web application that serves as a platform for users to connect with others as a way to improve their mental and physical wellbeing. The web app has three main pages: community feed, resources, and match-up.
The community feed serves as a place for users to talk about their problems, progress, feelings, etc. When creating a post, the user has access to a few customization features: anonymity, hashtags, color, and type of message. The anonymity feature allows the user to remain anonymous when posting. The hashtag features lets other users know what the post is about. The color represents the mood the user may be feeling and when compared with other posts, it presents a visual representation of the community. The user also has the option to either type the message or use an audio recording. Other users can like upvote, bookmark, or comment on the post. Verified users can comment on the post and provide input/feedback (ex. An anonymous user talking about a problem; a verified user can provide feedback and steps the other user can take). These features for this page allow the community to be built upon a foundation of support and positivity.
The resources page contains articles, videos, and links pertaining mental and physical well-being. Every week, this page will have a theme associated with a color as a way to highlight certain issues and raise awareness (ex. Green color = relieving anxiety). The user can use the search bar or the filter options to narrow down what they are looking for. They also have the option to post other resources they may have found.
The match-up page is a place for users to connect with others. The page displays a list of upcoming events such as online group talks and info programs. Users can also create their own events which allows them to connect with others. A user may post an event saying they would want to go to a gym at X time. Another user can view the event and meet-up with them for the event. Maintaining physical health can be a difficult task and many people prefer to have someone to do it with which is the main purpose of this page.
How we built it
We used Figma to display the designs and prototyping. It contains all the details on what the web app would look like from the user’s perspective. We also integrated some interactive features to give a basic idea of how a user would navigate through the pages.
The front-end development was done using JavaScript, HTML, and in-line CSS through Visual Studio. Included in the code is also React for the UI of the web app. All of the code and related documentation were all uploaded onto our GitHub repository.
Challenges we ran into
Some initial challenges were setting up the environment to work with like Visual Studio and GitHub and we had to figure out what kind of features the application would have and how they would be integrated. Throughout the whole process, there were a lot of things the team did not know about like using React or Figma, so we had to learn it along the way while working on the project.
Things we learned
This was our first hackathon, so there were a lot of things we learned. One of the main things we realized was the amount of dedication and energy that would be needed to put into a hackathon to develop a solution. While some of us knew some background knowledge, we had to help each other understand how to use certain applications like Figma or how to import libraries for front-end development. There was also a lot to learn through all the different events that were hosted throughout the day.
Accomplishments we are proud of
For all of us, this was our first hackathon and not all of us knew each other. Despite this, we all worked together very well to develop a solution that we are proud of. No matter the outcome of the competition, we are proud to have completed this project because it was a fun experience and we learned a lot of new things.
Moving forward with Breathable Minds
The first step would be to implement all of the parts into a fully functional web application. Before the web app would be opened to the public, it would have to go through a lot of testing. We would need to check the efficiency of the profanity filter, maintain credible information in the resources page, and monitor posts from users. We would also have to develop a verification method for medical professional users. Although there are many steps that would need to be taken before the web app can be used, Breathable Minds has a lot of potential currently and even after the pandemic is long over.
Log in or sign up for Devpost to join the conversation.