BreatheADE

• 

  BreatheADE - Helping the world breathe better, one breath at a time

Inspiration

The inspiration behind BreatheADE stems from the growing recognition of breathwork as a powerful tool for mental and physical well-being. In an increasingly demanding world, many individuals struggle with stress, anxiety, sleep disturbances, and a lack of focus. While numerous apps exist, we identified a need for a comprehensive, personalized, and science-backed platform that empowers users to take control of their breathwork journey without feeling pressured by gamification or rigid programs. We aimed to create an intuitive and beautiful application that makes the profound benefits of conscious breathing accessible to everyone, fostering a sense of calm, clarity, and vitality.

What it does

BreatheADE is a comprehensive breathwork application designed to help users improve their well-being through guided breathing exercises. It offers:

Guided Breathing Sessions: Users can choose from a curated library of science-backed breathing patterns categorized for specific needs: Calm, Sleep, Focus, Energy, and Recovery. Custom Breathing Pattern Creator: A unique feature allowing users to design their own personalized breathing exercises by setting precise inhale, hold, exhale, and hold-after-exhale durations, as well as the number of cycles. Personalized Audio Guidance: Sessions can be customized with gentle chimes and clear voice guidance, enabling users to practice with their eyes closed for a more immersive experience. Progress Tracking & Mood Analytics: The app tracks completed sessions, total practice time, and identifies favorite practice types. Users can rate their mood before and after sessions to visualize the impact of different breathing techniques on their well-being, providing meaningful insights without relying on punitive streak tracking. User Authentication & Subscriptions: Secure user accounts allow for data persistence across devices. Cross-Platform Accessibility: Built as a web application, BreatheADE is also wrapped with Capacitor to provide a seamless native app experience on iOS and Android devices.

How we built it

BreatheADE was built using a modern and robust technology stack to ensure a performant, scalable, and maintainable application:

Frontend: The user interface is developed with React 18 and TypeScript, providing a strong type system and component-based architecture. Styling: Tailwind CSS is used for rapid and consistent styling, enabling a highly customizable and responsive design across all devices. Icons: Lucide React provides a comprehensive and customizable icon set, maintaining a consistent visual language throughout the application. Backend & Database: Supabase serves as the backend, providing a PostgreSQL database for data storage (user preferences, sessions, custom patterns, feedback, subscriptions), user authentication, and serverless Edge Functions. Payments: Stripe is integrated for subscription management, with checkout and customer portal sessions handled securely via Supabase Edge Functions to process payments and manage user subscriptions. Mobile Deployment: Capacitor is utilized to wrap the web application into native iOS and Android applications, allowing for access to device-specific features like the status bar and keyboard management. Build Tooling: Vite is used for fast development and optimized production builds. Testing: Vitest and React Testing Library are employed for unit and integration testing, ensuring the reliability and correctness of components and hooks. The application architecture involves the React frontend communicating directly with Supabase for data operations and authentication. For sensitive operations like Stripe payments and user account deletion, dedicated Supabase Edge Functions are invoked, ensuring secure and efficient server-side logic.

Challenges we ran into

Web Audio API & Browser Policies: A significant challenge was reliably managing audio playback (chimes and voice guidance) across different browsers and mobile devices. Browsers often have strict autoplay policies, requiring explicit user interaction to initialize the AudioContext. Ensuring smooth transitions between audio cues and preventing audio from being cut off or failing to play required careful implementation of AudioContext initialization and audio preloading. Supabase Row-Level Security (RLS): Implementing robust RLS policies for each table (user_preferences, user_sessions, custom_breathing_patterns, user_subscriptions, user_feedback) was crucial to ensure that users could only access and modify their own data. This involved careful crafting and testing of SELECT, INSERT, UPDATE, and DELETE policies. Dynamic Form Handling for Custom Patterns: Creating a flexible and intuitive form for custom breathing patterns (CustomPracticeConfig.tsx) that allows users to define precise timings (inhale, hold, exhale, hold after exhale) and cycles, while also handling input validation and ensuring a smooth user experience on mobile devices (e.g., numeric keyboard input), required thoughtful state management and input parsing. Stripe Webhook Integration: Setting up and securely handling Stripe webhooks within Supabase Edge Functions was complex. This involved verifying webhook signatures, parsing event payloads, and updating the user_subscriptions table in real-time to reflect changes in subscription status (e.g., checkout.session.completed, customer.subscription.updated, invoice.payment_failed). Capacitor-Specific Behaviors: Adapting the web application for a native mobile environment using Capacitor involved addressing platform-specific nuances, such as managing the status bar, keyboard behavior, and ensuring consistent UI/UX across iOS and Android.

Accomplishments that we're proud of

We are particularly proud of several key accomplishments in BreatheADE:

Seamless User Experience: Despite the underlying complexity, the application provides a fluid and intuitive user experience, from creating custom patterns to tracking progress and engaging in guided sessions. Robust Audio System: Successfully implementing a reliable audio system that includes gentle chimes and clear voice guidance, overcoming browser autoplay restrictions and ensuring a consistent experience across devices. Comprehensive Customization: The custom breathing pattern creator is a powerful feature that truly empowers users to tailor their practice, moving beyond a "one-size-fits-all" approach. Meaningful Progress Tracking: The mood analytics and progress cards offer valuable insights into how different breathing practices impact a user's well-being, fostering a positive and non-judgmental approach to self-improvement. Secure & Scalable Backend: Leveraging Supabase for authentication, data storage, and Edge Functions provides a secure and scalable foundation for the application, capable of handling user data and sensitive operations like payments. Production-Ready Design: The application features a clean, modern, and responsive design built with Tailwind CSS, ensuring a professional and engaging aesthetic.

What we learned

Throughout the development of BreatheADE, we gained valuable insights and deepened our understanding in several areas of software user interface and software development. The most important thing we learned is the power of Bolt to accelerate the software development process and add to our creativity.

What's next for BreatheADE

The future of BreatheADE is exciting, with several key areas for expansion to enhance the features of the program and develop native IOS and Android apps.

Built With

• bolt