Progressive Web App
True Vine Vocal
A progressive web app for vocal practice - live pitch detection, vocal-range mapping, interval and scale drills, speaking analysis, recording and progress tracking - built as a React and Vite PWA over a modular audio engine.
- React
- Vite
- TypeScript
- Zustand
- Framer Motion
- Tailwind CSS
Overview
True Vine Vocal is a practice companion for singers and speakers: private, daily vocal training, built to be installed on a phone. It listens through the microphone and gives feedback while you sing or speak: which note you are on and how many cents off, how stable a sustained note is, the lowest and highest notes you can reach and the voice type that implies, how you did against a target interval or scale, and for speaking, your pace, breathing, projection, resonance and depth. Sessions are scored and feed a progress view with streaks, a practice calendar and achievements. The client is React 18 with Vite and TypeScript, organised so that the audio work lives in its own layer - engine, bus and permissions, microphone management, pitch detection and smoothing, range detection, interval and scale engines, the speaking analysers, recording, playback and waveform analysis - and the interface consumes it through hooks. The visual direction was written down before the screens: darkness with soft neon life, a primary green, a glow system and motion rules, each in its own reference document. An Express API for accounts, sessions and recordings is scaffolded in the same workspace and is the next piece to build; a guest mode lets the app work without it.
Engineering highlights
- Every page is a lazy-loaded route behind one app shell, so the audio and chart code for a screen downloads only when that screen mounts
- An audio layer with its own module boundaries: core engine and bus, microphone management, pitch detection and smoothing, range detection and voice classification, interval and scale engines, five speaking analysers, recording, playback and FFT waveform analysis
- The same pitch signal shown five ways - note wheel, cents dial, tuner needle, stability graph and a live panel - each a component with a single job
- Built as a PWA from the start: web manifest, service-worker registration, install and update hooks, an offline badge and a battery-optimisation hook for long practice sessions
- Design direction documented ahead of the screens: brand colours, glow system, typography, motion and PWA install and offline behaviour, each in its own reference file