Serene

• 

  wellness cards

• 

  homepage

• 

  dashboard

Inspiration

As a computer science student, I’ve seen firsthand how academic stress and daily life can impact mental well-being. I wanted to create a tool that makes it easier for students and anyone else to track their moods, express their thoughts, and get supportive feedback—all in a private, stigma-free space. The idea for Serene came from a desire to blend technology with empathy, making mental wellness more accessible and approachable.

What it does

Serene is a web app that helps users track their moods, journal their thoughts, and chat with an AI wellness companion. It provides a safe space to reflect, express, and monitor mental health over time. Users can log in securely, write journal entries, chat with an AI for support, and visualize their mood trends.

How I built it

I built Serene using Next.js 15+ and React 19 for a modern, fast user experience. Supabase handles authentication and data storage, ensuring privacy and security. The journaling feature uses Tiptap for rich text editing, and the UI is styled with Tailwind CSS and Radix UI for accessibility and responsiveness. The AI chat leverages a simple API route to simulate supportive conversations.

Challenges I ran into

One challenge was ensuring that client-side hooks like useSearchParams worked correctly with Next.js’s latest server components and Suspense requirements. I also had to carefully manage user data privacy, especially for sensitive journal entries and mood logs. Integrating all the UI components in a way that felt cohesive and calming was another interesting design challenge.

Accomplishments that we're proud of

We’re proud of creating a seamless, user-friendly experience that respects privacy and encourages self-care. The integration of journaling, mood tracking, and AI chat in one platform is something we’re especially happy with. Making the app accessible and visually soothing was also a key accomplishment.

What I learned

I learned a lot about the latest features in Next.js and React, especially around server components and Suspense. Working with Supabase taught us about secure authentication and real-time data handling. Most importantly, I learned how technology can be thoughtfully applied to support mental health.

What's next for Serene

Next, we’d like to add more personalized AI responses, deeper mood analytics, and optional integrations with professional mental health resources. We’re also interested in building a mobile app version and exploring ways to make Serene even more supportive and interactive for users.

Built With

• nextjs
• radixui
• react
• supabase
• tailwindcss
• tiptap