Mental Health Alphabet

Front/home page
Alphabet page (before definition flip)
Alphabet page (after definition flip)
About us page
Support/contact page

Inspiration

Mental Health Alphabet was inspired by the impact the pandemic has on the population. Since it is the first pandemic in tens of years, everyone is trying to adapt to the new environment and ways of doing. For example, College and University students had to transition from in-person classes to online classes. Going from walking on school grounds everyday to staring at computer screens all day, we know for a fact that that transition had a negative impact on the students’ mental health. We decided to create this project to raise awareness on mental health.

What it does

Mental Health Alphabet is a web application that allows people to educate themselves about different types of mental health conditions. We made it in a fun interactive way to make people feel comfortable learning about that subject. Mental Health Alphabet provides resources from healthcare professionals for people in need, such as helplines and links to other websites. We also included a quiz that allows people to estimate their mental wellbeing.

How we built it

We built Mental Health Alphabet using HTML, CSS, Javascript and Python (Flask). We used Figma to get a rough draft of the layout of our webpage and used Procreate to draw images by hand. Throughout the process, we were actively communicating while live coding using Live Share.

Challenges we ran into

The biggest challenge we ran into while creating our project was certainly our lack of coding skills. Only one person from our team had major knowledge about HTML/CSS and Javascript. The other three members only knew Python and a little bit of Java. Because of that, the majority of the team had to learn new programming languages in a span of 36 hours.

Accomplishments that we're proud of

McHacks is three of our members’ first hackathon. We were constantly putting ourselves out of our comfort zone by coding in a language that we were unfamiliar with. Collaborating and dividing tasks were productive because each member was working on a development area that they were more skilled in. After finishing the easy part, it was time to learn how to code in a new language that three other students rarely used before. We were disoriented, however we got adapted to the new language very quickly and were able to write many lines of codes. With that, we are all proud of our first hackathon project.

What we learned

We have learned a lot about mental health conditions and stumbled upon very interesting information that we didn’t know prior to the hackathon, such as learning what kleptomania is. Since we had members who were fairly new to programming, as a team, we learned a lot about new web development languages. We also got familiarized with the connection between front-end and backend. This event allowed us to discover the use of more advanced features like integrating our code with frameworks and gave us a good insight on what we can achieve through coding.

What's next for Mental Health Alphabet

Mental Health Alphabet has a great future ahead. We plan on adding more words to our dictionary and more defined quizzes to make our website even more educative and interactive.