Inspiration
Mental health is a major point of focus for our generation today, but we are also commonly surrounded by stigma and fear. Not only is recovery already hard, it is made a thousand times harder by the stigma that surrounds mental health. This often gives those suffering fear of seeking help. That’s why FirstStep is exactly what its name is - a way for someone, anyone, to take their first step towards recovery. Instead of having to scour the internet for hours looking for resources, ways to learn or fun, relaxing activities, the site has it all - easily accessible links for anyone to reach out, short pieces of information to learn, and distractions for when people are stressed, lost or just need a place to relax.
What it does
The site has a simple, muted aesthetic using relaxing colors and plant imagery. Most pages have a cute plant footer with randomly generating uplifting quotes to add a bit of positivity into the user’s experience.
In terms of the features, the site is relatively simple, but has several different features all aimed towards our mission - supporting and providing resources to the user. The resources page has links to different websites and Instagrams which are helpful for one in their recovery. As well, it has crisis phone numbers for a variety of different countries, to help anyone, anywhere.
The learn page has short and informative descriptions about some mental illnesses, as well as some quick ways for anyone to improve their mental health. This page is helpful for someone, and/or those around them, to learn about their own illness as well as ways to overcome it.
The vent page is styled like a diary, and it offers a space for the user to type out anything they need and then send it out into the void, where no one can read it. Sometimes we just need a place to vent out all of our feelings without fear that others will read it, and this is what the vent space offers.
The self-care page is a simple generator for different self-care ideas. All the user has to do is press the button and the page instantly gives the user as many suggestions as they need.
The chat page offers a way for the user to “chat” with someone, where they can ask for encouragement, jokes or just share their feelings. Because the chat is a chatbot currently, edge cases are unfortunately common, but we hope to make it a fully functioning chat in the future!
Our final feature is the quizzes page, which currently only features one short quiz. The user can just take this quiz if they ever need a quick action to get their mind off of anything. In the future, we hope to add more quizzes and a hub for the user to access thousands of other quizzes on the internet.
How we built it
We built FirstStep using HTML, CSS, and Javascript. We also utilized Replit to create our website, Figma to layout our wireframe, and Taskade to manage all of our responsibilities. As well, the majority of the graphics were hand-drawn, including the logo and the footer.
Challenges we ran into
Because half of our team was first-time coders and our whole team was quite new to coding in general, we had some trouble with building our project. We had to learn how to make some of the features, which was a struggle, but rewarding in the end. Also, fixing the bugs that came up in our site was quite a struggle, but with some teamwork and good old elbow grease, we managed to complete this project!
Accomplishments that we're proud of
As a team, we’re extremely proud of completing this project, with all these cool features, in this short timeframe and being able to showcase our final product. Some of the specific accomplishments we are proud of include the quiz page, the self-care page, the chat page, which were all relatively new concepts to our team. Overall, we’re super happy with our final product, which was one of the first major projects for some of our team members! :)
What we learned
We had to learn some new concepts to be able to complete this project, such as how to implement a chatbot, create a random generator, add animations to elements and mainly, how to create a good, fully functioning website! We learned a lot over this process, not only in the code aspect of things, but also in working as a team, mental health in general and a lot more. This experience was super cool and rewarding for our team!
What's next for FirstStep
We hope to make this website even better for future users, like making the chat a real-time chat using servers, adding more features that would offer support to the user and obviously, fixing any small bugs that may show up in the future.
Log in or sign up for Devpost to join the conversation.