SereneSpace

A wellness, mindfulness and meditation app, that helps users manage their emotions.

Comment

Inspiration

We each uniquely deal with one problem, and that is stress. Many times we don't have people or resources that can help us deal with our stress or the causes of it. Therefore we wanted to make this possible with a personal therapy like webapp.

What it does

SereneSpace Lite is a minimal mental wellness platform that allows users to sign up, log in securely, and track their mood through daily entries. After logging in, users can access a protected dashboard where they can submit and view their personal mood ratings. Each mood entry is stored in a structured JSON format to allow flexible and insightful future analysis or visualization.

How we built it

We used Next.js with React for the frontend, and Supabase for backend services including authentication and database management. Supabase handles user sign-up, login, and storage of user-specific data such as mood ratings. The app uses server-side route handlers to ensure user sessions are authenticated before allowing access to protected pages. Folder structure follows modern separation of concerns with /src/app managing routes and layout, and a separate backend directory for logic. Custom hooks and utility functions handle user sessions and error states.

Challenges we ran into

We faced several challenges during development, particularly with integrating Supabase Auth. Ensuring proper session handling and route protection required extensive debugging, as we encountered issues like 500 errors and misconfigured triggers. Persisting mood data across sessions also proved difficult at first, due to inconsistencies in JSON schema handling and database syncing. Additionally, implementing secure UI access control required careful adjustments to dynamic layouts and middleware to reliably restrict content to authenticated users.

Accomplishments that we're proud of

We created a protected and dynamic user dashboard that adapts based on login state. It was clean and well structured UI.

What we learned

We learned how to effectively integrate Supabase Auth into a Next.js project while ensuring full route protection, which deepened our understanding of secure authentication flows. Working with environment variables and middleware showed us how critical they are for creating dynamic and protected app behavior. We also discovered that structuring data in JSON provides a scalable and flexible way to manage subjective inputs like mood ratings. Finally, troubleshooting backend APIs and Supabase triggers helped us develop patience and gain a stronger grasp of server-side logic and debugging practices.

What's next for SereneSpace Lite

Next, we plan to enhance the user experience by adding data visualizations for mood tracking over time using libraries like Chart.js or Recharts. We also aim to support mood-based journaling, allowing users to add personal notes to each entry for deeper reflection. To encourage consistent engagement, we’ll implement reminder notifications through services like Pushover or email. Expanding authentication options—such as OAuth or Google Login—will make onboarding easier, and ultimately, we intend to polish the app and deploy it to production for real-world use.

Built With

Share this project:

Updates