Echos AI Transcription Mobile App

• Running Heavy AI Locally: The Whisper model demanded immense compute power, initially causing app crashes. We had to carefully limit and throttle compute usage to maintain stability across a wide variance of mobile hardware.
• Platform Inconsistencies: Porting the Whisper model to React Native revealed bugs in third-party packages that had to be patched. Additionally, the audio service and background recording protocols work vastly differently across platforms. For example, Android requires a persistent foreground notification when recording and processing in the background, requiring platform-specific workarounds.
• The Audio Wave Animation: Creating a fluid, highly responsive audio wave that reacts to the speaker's volume was incredibly challenging. Microphone sensitivity varies wildly between different Android devices and iPhones. Some are too sensitive, others barely register. Balancing this to reduce background noise interference without over-engineering the solution took numerous feedback loops.

To strictly adhere to the "no human coding" constraint while managing a complex build, I broke the project down into hyper-specific tasks for Claude and architected the app in strictly defined layers.

1. First, we generated the main visual components based directly on the Figma designs.
2. Next, we built the underlying stores and services for state management and background processing.
3. Then, we stitched the screens and logic together.
4. Finally, we entered a refinement phase to polish animations, UX details, and device-specific quirks.

• Local AI Transcription: Real-time and file-based transcription running completely offline.
• Dynamic Audio Visualization: We utilized React Native Skia and React Native Reanimated to handle the complex, volume-responsive wave animations, ensuring high performance on the UI thread.
• Background Recording Engine: Custom implementations to keep the app recording and processing securely while minimized.
• Aqua Wallet Integration: A sleek, non-intrusive banner placed in the settings menu to drive downloads to the client's core product.

• We avoided over-engineering the microphone sensitivity normalizer, opting for a functional baseline that accommodates most devices rather than a bloated custom audio engine.

• Framework: React Native (Current Version) & Expo (heavily utilizing Expo ecosystem packages).
• State Management: Zustand for lightweight context and state handling.
• Component Management: Storybook for isolating and testing UI components.
• AI/Models: Whisper AI (Local binaries), VAD (Voice Activity Detection), Claude (AI Coding Agent).

Architecture Diagram (Conceptual): User Audio ➔ Platform-Specific Background Audio Service ➔ Local VAD ➔ Throttled On-Device Whisper Model ➔ Zustand State ➔ Encrypted Local File System

• Choosing to rely entirely on Expo packages wherever possible sped up development but occasionally required creative AI-generated solutions when platform-specific audio bugs arose.

• Before: A purely conceptual goal to test AI coding limits.
• After: A stable, production-ready application that is live on the App Store and Play Store, generating highly positive early feedback from users.

• Proved definitively that a solo contractor can act as a technical director to AI agents, successfully deploying a highly complex, hardware-intensive mobile app without writing the code manually.
• The Aqua Wallet promotion strategy is now live, and we are actively monitoring the conversion rates from the settings menu banner.

• AI Coding Acceleration: Relying on Claude was incredibly effective. The AI models actually improved noticeably during the few months of development, meaning our coding agent got smarter as the project progressed.
• Greenfield AI Projects: Starting an app entirely from scratch with an AI agent works phenomenally well. Because the AI built the architecture from day one, it understood the codebase far better than it would have if dealing with legacy code.

• Early Tech Stack Finalization: Vibe-coding the MVP in Flutter was great for speed, but switching to React Native post-MVP required heavy refactoring. In the future, definitively locking in the tech stack before generating the first component will save weeks of migration effort.

• The Zustand state management structures, the React Native Skia animation logic, and the Storybook component library are now modularized templates we can deploy for future madebyagents.com clients to slash UI development time.