Youthwell

Inspiration

Youthwell is inspired to help teens navigate emotional challenges. As students ourselves, we recognized our overwhelming and isolating mental health struggles can be, especially when conventional support is expensive, hard to access, and intimidating. These platforms are to clinical, which fail to relate to real world problems among teens. This led us to the creation of Youthwell, a place where teens can reflect, express themselves, and access support without fear of judgement.

What it does

YouthWell is a digital mental wellness platform built for teens, by teens, with a mission to make emotional support more accessible, relatable, and engaging. We recognized that existing solutions often feel too clinical or disconnected from the real experiences of young people. That’s why we created a space that meets teens where they are with interactive tools designed to support mental health in a safe, nonjudgmental, and empowering way.

The platform is built around five core features: mental health self assessments, guided journaling, coping toolkits, affirmation spinners, and AI powered chatbots. First, our Mental Health Self-Assessments provide teens with reflective quizzes that offer gentle insights and suggestions, helping users become more self-aware of their mental state. Next, our Guided Journals allow users to track their emotions and thoughts over time, giving them a private, structured space to unload and better understand their experiences. The Coping Toolkit includes a curated set of exercises, techniques, and activities that teens can access anytime they’re feeling overwhelmed, anxious, or emotionally stuck. For daily motivation, the Affirmation Spinner delivers randomized uplifting messages in a fun, gamified format, encouraging users to pause, reflect, and reset. Finally, our Landbot-powered conversational chatbot provides 24/7 support, simulating a warm and friendly conversation that offers coping advice and resource suggestions, all without judgment.

How we built it

YouthWell is built using React, TailwindCSS, Framer Motion, and Landbot’s API. We paid careful attention to UI/UX design, implementing animations and a soft visual style to create a calming and inviting user experience.

The YouthWell platform is built using React.js as the core framework, allowing for a responsive, modular, and dynamic user interface. Styling is handled with Tailwind CSS, which enables rapid development of visually consistent and mobile-friendly layouts. For animations and transitions throughout the site, we used Framer Motion which enhances the user experience with subtle, modern motion design. Tabs and structured UI elements are created using React Tabs, and icons across the site are provided through React Icons, giving the app a polished and informative visual flow.

Our core feature surrounding our AI chatbot is the integration of the Landbot API using a dynamic script which only loads when a user interacts with the page. The quizzes, journaling features, and form handling is processed through React's local state management, with all user inputs being read through on the clients side.

Challenges we ran into

One major challenge was implementing localStorage as our primary method of data persistence. While it ensured user privacy and avoided the need for accounts or databases, it required careful design to make sure data was stored securely, retrieved reliably, and didn’t break across sessions or devices. We also encountered difficulties embedding and customizing the Landbot chatbot to balance performance with interactivity, and ensuring it loaded only when needed without slowing down the site. Additionally, integrating smooth animations with Framer Motion introduced edge cases related to state management and component transitions. Ensuring mobile responsiveness across features like the confidence spinner and journaling interface required iterative UI/UX refinements.

Accomplishments that we're proud of

One of the features we’re most proud of is the AI-powered chatbot. We built the chatbot using Landbot’s API and customized its flow to simulate a kind, youth-friendly tone—capable of answering common questions, offering coping strategies, and guiding users through the platform without overwhelming them. On a more technical accomplishment, it loads dynamically to preserve performance and is embedded seamlessly into the site, ensuring it’s accessible from any page. What makes it truly special is its practical impact. Its easy to use and gentle guide helps reduce friction in usability and creates a sense of companionship.

What we learned

Through building YouthWell, we learned that designing for mental wellness is as much about empathy as it is about functionality. We realized how important it is to design for the audience, making their experience feel both trustworthy and comforting. Technically, we gained hands-on experience integrating front-end and back-end frameworks and effectively being able to design a user-friendly UI/UX. As a group of students who have just began their journey into the world of web development, this hackathon were filled with late nights collaborating and teaching each other along the way. We had to persevere, collaborate, fail, and adapt.

What's next for Youthwell

In the future, we’re focused on making YouthWell smarter, more adaptive, and more accessible. We're planning to integrate mood detection through sentiment analysis, allowing the platform to respond more intuitively to a user’s emotional state. We’re also exploring partnerships with school counselors, community clinics, and nonprofits to deliver tailored resource recommendations based on a user’s location, age, etc. A mobile-first app is a priority; we want to bring Youthwell directly into the hands of teens wherever and whenever they need. We want Youthwell to be a powerful, trusted companion that supports young people not just in times of need, but in their everyday emotional lives as well.