MindfulU

MindfulU Landing Page
MindfulU Meditation Page
MindfulU Resource Page with QR Code

Inspiration

As students, we’ve all heard it from friends, read it on social media or even experienced it ourselves: students in need of mental health support will book counselling appointments, only to be waitlisted for the foreseeable future without knowing alternatives. Or worse, they get overwhelmed by the process of finding a suitable mental health service for their needs, give up and deal with their struggles alone.

The search for the right mental health service can be daunting but it doesn’t need to be!

What it does

MindfulU centralizes information on mental health services offered by UBC, SFU, and other organizations. It assists students in finding, learning about, and using mental health resources through features like a chatbot, meditation mode, and an interactive services map.

How we built it

Before building, we designed the UI of the website first with Figma to visualize how the website should look like. The website is built with React and Twilio API for its core feature to connect users with the Twilio chatbot to connect them with the correct helpline. We also utilized many npm libraries to ensure the website has a smooth look to it. Lastly, we deployed the website using Vercel.

Challenges We ran into

We had a problem in making the website responsive for the smaller screens. As this is a hackathon, we were focusing on trying to implement the designs and critical features for laptop screen size.

Accomplishments that we're proud of

We are proud that we had the time to implement the core features that we wanted, especially implementing all the designs from Figma into React components and ensuring it fits in a laptop screen size.

What we learned

We learned that it's not only the tech stack and implementation of the project that matters but also the purpose and message that the project is trying to convey.