Act Mindful

Home Page
Symptom Tags and Disorder Cards
Anxiety Disorder Page Video
Anxiety Disorder Page Information
Navbar Dropdown on the Depression Disorder Page
Funny Video accessible with the Funny Video button

Inspired

As college students, we noticed how many people are struggling with mental health disorders, so we want to figure out a way to help the community in having more information about the types of disorders and have necessary resources. As a result, we decided to create a mental health information website to foster a more caring and uplifting environment.

What it does

To begin, users are brought to the first initial home page. They are able to select using the provided tags, which symptoms they currently have or have seen from others. From the selected tags, more and more disorders with similar symptoms or symptoms that overlap are shown. After seeing the resulting disorders based on their selections, users are able to click on each disorder to learn more information on them. For instance, if I click on Anxiety disorder, it leads us to a page we created with a video and more information on Anxiety. If we wanted to choose PTSD, it would lead us to a website that can better explain the disorder. Lastly, to cheer people up, we wanted to include a funny video as seen by clicking this funny video button.

How we built it

For this project, we utilized HTML, CSS, and React. We used HTML and CSS to create each of our separate pages that listed information on each mental disorder. With HTML and CSS, we were able to use calming and cute colors on our website such as a pink theme as well as create fun and engaging icons such as this accordion that lists the information. Additionally, these tools helped us create a useful navbar to help users navigate through each of the pages as well as center and size our texts. We used React and CSS to create the tags that users could choose symptoms from our designated list. Moreover, we chose to use React due to the need for a dynamic number of cards and to hide or reveal based on those tags.

Challenges we ran into

Along the way, we ran into a few problems with how we wanted to design this idea and what to implement. After discussing as a team, we all agreed on tags with cards to select symptoms and return disorders correlating to the symptoms as well as some pages to hold information on our own website. We also ran into some issues connected our HTML files to our react one, but with the help of some amazing mentors, we were able to resolve this issue. Lastly, we bumped into a few issues on correlating sleep schedules especially as the hackathon neared its end and the tiredness took over.

Accomplishments that we're proud of

Having a working website with many cool aspects is something we are all truly proud of. Most of us were so new to react and front-end development at first, but I believe we all walked away with some new knowledge. It was a rough journey, but we are so glad to have been able to lean on each other along the way. We are all proud of each other for completing this hackathon this weekend.

What we learned

We learned a lot about front-end development through this hackathon. Additionally, since it was most of our first-times hacking at a 36-hour long hackathon, it was truly memorable to learn to work in a team that started out as strangers but grew to be friends through this event. Lastly, I think the most important aspect we all took away from this event was that learning is growing and we definitely learned so much about each other, tech, HackAtUCI, and almost importantly, ourselves.

What's next for Act Mindful

We were hoping to have time to implement some more aspects such as using some APIs. Possibly some generating memes to have a page full of funny images or videos to cheer people up. Another aspect we were hoping but not able to implement was a page for more resources, but I think we all may try to add that in if we have time in the near future. As we as a team are no longer new baby hackers, look forward to seeing us in future hackathons!