MindBridge

This is a quiet place where teenagers can connect to themselves to check on their mental state, monitor their mood, identify patterns, and use science-based tools to manage stress and anxiety.

Comment

Inspiration

Mental health among teenagers is at an all-time low, but none of the apps available today are fun, simple, or don't make you create an account just to test drive them. We aimed to create an application that a teenager could open in their mobile device within 30 seconds, check-in, and log-out immediately, with no extra hassle, friction or data collection.

Inspiration is simple — what if your mood journal worked just like your text messages but was much more useful for you?

What it does

MindBridge is an offline first private app for teenagers' mental wellbeing. On a daily basis, the user completes a quick mood-check by picking up his current mood and optionally adding information about his current energy levels, stress, sleep quality, anxiety levels, motivation, and how comfortable he feels around others. Over time, the app reveals valuable insights, such as what kinds of days are usually more difficult, what activities correlate with better moods, and streaks of the activity.

The Toolkit provides instant access to scientifically-proven exercises that can help deal with any situation - breathing patterns, 5-4-3-2-1 grounding techniques, body scan meditation, focus boosters, sleep routine, and panic support. Each of those can be completed in 2–5 minutes, without any registration and internet connection needed.

The Journal allows you to write freely, express your gratitude and reflect on various questions. By default, all information is stored on your device; you have an option of Firebase cloud sync for backup purposes.

How we built it

  • React 19 with a hash-based SPA router (no need for any server)
  • Tailwind CSS with a custom design-system token layer (CSS variables for light/dark modes)
  • Recharts library for visualizing mood trends and dimensions
  • Firebase Auth + Firestore as a cloud sync layer (optional)
  • Vite to speed up development process and optimize final bundle
  • All insights analysis happens on the frontend, instantly and privately

All data is stored in the localStorage of the device, with clear data abstraction to facilitate future replacement of it with IndexedDB or other remote database.

Challenges we ran into

  • Silent stall of Firebase Authentication — in some environments, onAuthStateChanged handler will never fire (private browsing, invalid IndexedDB permissions, unauthorized domains). It led to the appearance of a permanent white screen. We managed to solve it by implementing a timeout of 2.5 seconds to fallback to local profiles.
  • Ad blockers blocking our insight engine — the local analysis file was called analytics.js, which ad blockers flagged. Renaming it to insights-engine.js solved the issue for good.
  • Token design missing — the entire Tailwind color system is connected with CSS variables (like --c-brand, --c-surface, etc.). However, they weren't defined at all, leading to a situation where each button rendered invisible text only. Adding a proper design-system base layer solved all problems with button and surface styling.

Accomplishments that we're proud of

  • No sign up required — fully functional right away
  • Instant insights calculations happening locally in the browser
  • The toolkit modal interface feels genuinely polished — animated SVG countdown rings, step dots, completion screens
  • Built-in dark mode, reduced motion support and accessible focus

What we learned

Naming plays a huge role (lesson with analytics.js). Building offline-first app from the very beginning turns out to be way easier than implementing it afterwards. And the hardest thing in the wellness app is not its features — it's the first 10 seconds which should provide enough sense of security so that teenager would be eager to return tomorrow.

What's next for MindBridge

  • Push notifications reminders (PWA + Web Push)
  • Parent/Guardian interface with shared insights and options to give consent
  • Therapist integration mode with summary exportation for each session
  • Additional toolkit exercises contributed by the community
  • Native iOS/Android app wrapper with Capacitor

Built With

Share this project:

Updates

Submission history