Aura — Holistic Wellbeing & Mindfulness Companion

An interactive, glassmorphic React dashboard for UN SDG 3 featuring 4-7-8 deep breathing cycles, dynamic offline ambient sound mixes, mood logs with SVG analytics, and crisis helpline directories.

Comment

Inspiration

Aligned with United Nations Sustainable Development Goal 3 (Good Health and Well-being), we wanted to build a digital sanctuary for mental health and mindfulness. In a fast-paced world filled with digital noise, we set out to create Aura a serene, lightweight web app designed to help users ground themselves, track their emotional trends, and access crisis resources immediately, all without heavy external libraries or tracking scripts.

What it does

Aura provides five core mental health and wellness tools:

  • Dynamic Dashboard: Personalized time sensitive greetings, daily mindfulness quotes, and streak tracking.
  • Deep Breathing Helper: A guided 4-7-8 breathing cycle (Inhale, Hold, Exhale) with responsive scaling circles and synchronous Web Audio chime indicators.
  • Ambient Mixer: Custom nature sound blends (Rainfall, Forest Wind, Deep Brown Noise, Cosmic Pad) synthesized directly in-browser.
  • Mood Journal & SVG Trends: A daily reflection log that plots emotional scores onto a custom-rendered SVG line graph to help analyze psychological trends over time.
  • Habit Rituals: A progress checklist for daily healthy habits (hydration, digital detoxes, stretching).
  • Support Directory: A filterable crisis helpline registry filterable by country.

How we built it

Aura is built with:

  • Vite & React for modular rendering and high performance.
  • Vanilla CSS for premium, glassmorphic dark mode visuals and smooth animations.
  • Web Audio API to generate all ambient sounds and guided chimes dynamically offline.
  • HTML5 inline SVGs to programmatically calculate and draw analytics lines and gradient fills, bypassing large charting library overhead.

Challenges we ran into

Synthesizing authentic ambient sounds (like rain and wind) programmatically using standard oscillators and filters in the Web Audio API was a major challenge. We solved this by setting up complex audio node networks, mapping pink/white noise through low-frequency oscillators (LFOs) to modulate bandpass filter cutoff ranges, creating an organic, breathing nature sweep.

Accomplishments that we're proud of

  • Zero NPM Bloat: We built complex charts and multi-track audio mixers from scratch without installing heavy chart libraries or audio assets, keeping the production build size incredibly compact.
  • Clean Repo structure: Kept the codebase extremely clean and modular, allowing PresentMeApp to perfectly analyze and auto-generate our technical walkthrough presentation.
  • High Aesthetics: A state-of-the-art UI utilizing custom glassmorphism, glowing accents, and smooth breathing animations.

What we learned

We learned to harness the browser's raw capabilities using Web Audio nodes for analog synth-style soundscapes and drawing mathematical paths in SVGs with React states.

What's next for Aura Holistic Wellbeing & Mindfulness Companion

We plan to introduce local AI-powered reflective journaling insights, native mobile responsive layouts, and user-recordable custom soundscapes.

Built With

  • and-guided-breathing-animations.-web-audio-api:-browser-audio-context-api-used-to-programmatically-generate-rainfall
  • and-meditative-synth-pads.-html5-canvas/svg:-used-to-mathematically-draw-and-animate-the-responsive-mood-trend-line-chart-and-glow-gradients.-localstorage-(web-storage-api):-local-storage-used-to-persist-mood-logs
  • and-page-routing.-vite:-ultra-fast-build-tool-and-local-development-server.-css3-(vanilla):-glassmorphic-dark-styling
  • brown-noise
  • css3
  • forest-wind
  • git
  • github
  • html5
  • javascript
  • localstorage
  • react
  • state-synchronization
  • streaks
  • typography-configurations
  • vite
  • web-audio-api
Share this project:

Updates