Serenity - Mental Health Companion

Blending proven mindfulness with cutting-edge, generative AI to create a supportive and engaging digital space for mental well-being

Comment

Inspiration Life can be busy and stressful, and taking care of our minds is really important. We noticed that many mental health apps were complicated or cost money, which made it hard for people to use them. We wanted to make something different: a free, friendly, and easy-to-use website called "Serenity." Our goal was to create a calm, private space that feels more like a helpful friend than a medical app.

What It Does Serenity is a website with tools to help you feel better. Since it's a single-page app, it works fast without needing to reload. Here's what you can do:

Mood Journal: Write about your day, and the app will give you an idea of your mood. Everything you write is saved securely on your own computer.

Mindful Moments AI: Get new ideas for calming thoughts and positive sayings from our friendly AI. You can choose a theme like 'Calm' or 'Focus.'

Mindfulness Exercises: Try simple, guided exercises like deep breathing or a body scan to help you relax and feel grounded.

Help Resources: If you need to talk to a professional, we have a list of helpful resources and emergency phone numbers.

Serenity Chatbot: A simple chatbot you can talk to. It can listen and suggest things to do in the app.

Your Profile: A private page where you can see how many journal entries you've written and how many exercises you've tried.

How We Built It We built Serenity using the basic building blocks of the web. This means we didn't use any big, complicated frameworks, which keeps the app fast and simple.

The Basics: We used HTML for the structure, CSS for the design, and JavaScript to make everything work.

Looks & Animations: We used modern CSS to make the app look good on any device. For the smooth animations, like the floating brain, we used a simple tool called Anime.js.

Saving Your Data: To keep your information private, we used localStorage, which saves your journal entries and login status right in your web browser. Nothing is sent to a server.

Icons & Text: We used Font Awesome for the icons and Google Fonts to make the text look clean and friendly.

Problems We Solved Making a big app with just the basics had a few challenges:

Keeping Track of Everything: Without special tools, it was a challenge to make sure all the parts of the app were working together and that the information (like your journal entries) was always correct.

Making it Feel Like a Real App: We wanted it to feel like you were moving between different pages, even though it's all one single page. We wrote special code to show and hide different sections smoothly.

Getting the Design Right: It was very important that the app felt calm and was easy to use. We worked hard to choose the right colors, text styles, and layout. Making the animated backgrounds pretty but not distracting was also a fun challenge.

What We're Proud Of We are very proud that we built a beautiful, working app using just the essential web technologies. It shows that you don't always need fancy tools to create something great. We love how all the features work together smoothly, and we think the fun details, like the animated cards and the special mouse cursor, make Serenity feel special.

What We Learned This project taught us so much about what's possible with just JavaScript. We learned how to build a large app from scratch, how to manage its data, and how to make it feel like a professional product. It also reminded us how important good design is, especially for an app about well-being.

What's Next for Serenity We have a lot of exciting ideas for the future:

Sign In Anywhere: We want to add secure accounts so you can sign in and see your journal on any computer or phone.

Smarter AI: We plan to connect our AI to a real AI model (like Gemini) to give you even better and more creative mindfulness ideas.

More Things to Do: We'd like to add audio meditations, helpful articles, and programs like a "7-Day Gratitude Challenge."

Connecting with Others: We're thinking about adding a safe way for users to share positive thoughts with each other, if they choose to.

See Your Progress: We want to add cool charts and graphs to help you see your mood patterns over time.

Built With

Share this project:

Updates