arborea

Breathing exercises are proven to reduce stress and improve focus, but most apps overcomplicate them. You don't need meditation music libraries, achievement systems, or social features - you just need clear guidance on when to breathe in, hold, and breathe out.

Arborea is a minimalist breathing app I built, focused entirely on the practice itself.

live project

• Arborea Breathe - Minimalist breathing app

the concept

Breathing exercises follow simple patterns: inhale for 4 seconds, hold for 4 seconds, exhale for 4 seconds. Despite this simplicity, most apps add unnecessary features that distract from the actual practice.

Arborea strips everything away except what matters:

• Visual animations that expand and contract with your breath
• Gentle audio cues for timing
• White noise that shifts between ears to guide alternate nostril breathing
• Haptic feedback (vibration) for eyes-closed practice

The name "Arborea" comes from trees - natural symbols of breathing, converting CO2 to oxygen.

visual design

The main interface is an animated circle that grows during inhalation and shrinks during exhalation. This simple metaphor makes timing intuitive without requiring you to count or watch a timer.

The circle's animation is mathematically timed to match the breath pattern, with smooth transitions that feel natural. The ring around the circle fills during holds, providing clear visual feedback for retention periods.

Different exercises use different color gradients, making each practice visually distinct and helping you quickly identify which exercise you're doing.

audio implementation

Sound design was important. We implemented:

• White noise generator with smooth volume fades during breathing
• Stereo panning for alternate nostril breathing exercises
• Voice guidance with pre-recorded audio cues
• Smooth mixing between noise and voice

The white noise serves dual purposes: it masks ambient sound for focus, and its volume changes provide an additional timing cue. When practicing alternate nostril breathing, the noise shifts between left and right channels, guiding which nostril to focus on.

haptic feedback

For meditation practitioners who close their eyes, we added vibration patterns that correspond to breathing phases. Your phone gently vibrates at transitions, allowing you to follow the exercise without visual or audio cues.

This was technically challenging - the Web Vibration API has inconsistent support and behavior across devices, requiring extensive testing to find patterns that felt natural rather than jarring.

technical architecture

Built as a PWA using:

• Angular with standalone components and signals
• Nx monorepo for managing multiple apps
• Firebase for authentication and data storage
• TanStack Query for state management
• Service Workers for offline support and push notifications

The Angular signals API allowed reactive animations without complicated state management. When the practice service updates the current item, the UI automatically responds with appropriate animations.

exercise structure

Each exercise is defined as blocks of breathing items:

{
  repetitions: 3,
  items: [
    { text: "Breathe in", duration: 4, animation: "in" },
    { text: "Hold", duration: 4, animation: "hold" },
    { text: "Breathe out", duration: 4, animation: "out" }
  ]
}

This structure makes it trivial to add new exercises or modify existing patterns without changing code.

notifications

We implemented daily reminder notifications using Firebase Cloud Messaging. Users can set their preferred practice time, and the app sends gentle reminders.

The timezone handling was tricky - storing reminder times in UTC while displaying them in local time required careful conversion to avoid scheduling notifications at the wrong hour.

practice logging

The app tracks completed sessions, building a practice history. This creates accountability without gamification - you can see your consistency without chasing badges or streaks.

The exercise log service stores timestamps and exercise IDs, allowing users to see patterns in their practice over time.

offline capability

As a PWA, Arborea works completely offline once installed. All exercises, audio files, and animations are cached locally. This is important for a meditation app - you need reliability regardless of network conditions.

design process

This project required careful attention to design and UX. Building a meditation app taught me the value of understanding both aesthetics and functionality.

The focus on animation timing, color choices, and interaction details was necessary to create a polished experience.

lessons learned

Building Arborea reinforced several principles:

1. Simplicity requires discipline - Every feature we considered was evaluated against "does this help the practice?"
2. Multi-sensory feedback is powerful - Combining visual, audio, and haptic cues creates a reliable experience
3. Audio programming is tricky - Smooth volume transitions and stereo positioning require careful implementation
4. PWAs are underrated - The installable, offline-first nature makes this feel like a native app

reflection

Arborea demonstrates that you don't need complicated features to create value. By focusing on the main experience - guiding breath - we created something that feels polished and purposeful.

The app serves its intended audience: people who want to practice breathing exercises without distraction, whether during a stressful workday or before sleep.

Sometimes the best product is the one that does less, but does it exceptionally well.