Project
Comprehensive ukulele learning app built from scratch to address gaps in existing iOS offerings. Combines chord visualization, music theory education, and real-time pitch detection into a single, cohesive learning tool for musicians.
Impact
End-to-end mobile product development from concept to TestFlight beta. Demonstrates ability to ship complete applications independently—handling everything from UI/UX design and native module integration to music theory implementation and beta testing coordination.
Tools
React Native, Expo SDK 54, native C++ (YIN algorithm), Swift (iOS), Kotlin (Android), AVFoundation, custom React components, Git, TestFlight.
Core Features
Chord Library
Complete database covering all 12 keys with multiple voicings per chord. Interactive fretboard displays notes, fret positions, or finger placements. Includes music theory breakdowns (formulas, intervals, voicing analysis) for each chord type.
Scale Explorer
24 scales (12 major, 12 natural minor) with diatonic chord progressions and Roman numeral analysis. Integrated with chord library—tap any scale degree to see the chord voicings.
Reverse Chord Lookup
Interactive fretboard where users tap to build chord shapes. Algorithm identifies exact and probable matches instantly. Tap suggested chords to see proper fingering, enabling self-guided learning of unfamiliar voicings.
Chromatic Tuner (In Development)
Real-time pitch detection using native C++ implementation of YIN algorithm. Provides <10ms latency with ±1 cent accuracy. Visual tuning indicator shows cent deviation, wrong string detection, and confidence meter.
Technical Highlights
Native Module Integration
Bridged React Native to C++ DSP code for professional-grade pitch detection. Configured CMakeLists.txt build system, implemented Swift/Kotlin wrappers, and created JavaScript hooks for seamless React integration.
Music Theory Data Architecture
Structured chord database supporting 100+ chord types across all keys. Each chord includes multiple voicings, finger positions, sounding notes, and theory metadata. Scale data includes diatonic progressions and interval explanations.
Algorithm Development
Implemented reverse chord lookup algorithm matching user-tapped fret positions against database. Handles exact matches and provides probable alternatives based on note similarity.
Performance Optimization
Memoized chord lookups to prevent redundant calculations. Efficient fretboard rendering with minimal re-renders. Background audio processing for tuner without blocking UI thread.
Audio Configuration
Tuned pitch detection parameters for ukulele-specific frequency range (80-1000 Hz). Configured 9000-sample buffer (~200ms) for low-frequency accuracy while maintaining real-time responsiveness.
Technology Stack
- Framework: React Native with Expo SDK 54
- Native Modules: C++ (YIN algorithm), Swift (iOS), Kotlin (Android)
- Audio: AVFoundation (iOS), AudioRecord (Android)
- State Management: React Hooks (useState, useEffect, useRef)
- Build Tools: Expo Application Services (EAS), CMake
- Testing: TestFlight beta distribution
Project Architecture
Modular component structure separating UI, data, and native code:
- components/ui/: Reusable React Native components
- components/ukulele/chords/: Chord database organized by root note (A.js, B.js, C.js, etc.)
- components/ukulele/musicData.js: Scale definitions and theory data
- modules/pitch-detection/: Native C++/Swift/Kotlin implementation
- hooks/usePitchDetection.js: JavaScript bridge to native audio processing
Development Process
Problem Statement
Existing ukulele apps lacked comprehensive chord libraries, were missing reverse lookup features, or had poor-quality tuners. Built UkeLabs to provide a professional, all-in-one learning tool.
Implementation Challenges
Native C++ integration required learning CMake build configuration, TurboModule architecture, and platform-specific audio APIs. Pitch detection algorithm needed careful parameter tuning for ukulele's re-entrant tuning (high G string). Beta testing revealed edge cases in chord matching algorithm requiring refinement.
Current Status
TestFlight beta with active user feedback. Chord library and reverse lookup fully functional. Tuner in final development stage—native C++ module operational, optimizing real-time UI updates.
Key Takeaways
- Full-Stack Mobile Development: Managed entire product lifecycle from design through beta deployment
- Native Module Expertise: Successfully integrated C++/Swift/Kotlin code into React Native application
- Algorithm Implementation: Translated academic research (YIN algorithm) into production code
- User-Centric Design: Iterating based on TestFlight feedback to refine features and UX
- Cross-Platform Considerations: Built architecture supporting both iOS and Android from single codebase
Acknowledgments
Pitch Detection: Based on Tuneo by DonBraulio for YIN algorithm implementation and TurboModule architecture.
YIN Algorithm: Cheveigné, A. de, & Kawahara, H. (2002). YIN, a fundamental frequency estimator for speech and music. The Journal of the Acoustical Society of America, 111(4), 1917-1930.