VoiceGym - Vocal Recovery Studio

Inspiration

VoiceGym was born from the daily struggle of teachers, singers, and content creators who push their voices to the limit. A scratchy morning, a hoarse afternoon —i wanted to build a gentle, pocket‑sized companion that turns vocal recovery from a forgotten afterthought into a simple, feel‑good daily habit. No clinical tools, no overwhelming charts — just a supportive space to care for the voice that works so hard.

What it does

VoiceGym is a fully client‑side web app that helps you recover from minor vocal fatigue through three playful, interactive tools: A real‑time audio visualizer that shows pitch and volume stability during warm‑ups. A custom routine builder that creates a 5‑minute hydration & steaming schedule based on your strain and severity. A hydration counter with a liquid‑filled SVG wave that fills up as you log your daily fluid intake. All without any sign‑up or backend — just open and start caring for your voice.

How we built it

I scaffolded the project with Vite + React for a fast development experience. A multi‑step form stepper with React state generates timed routines. Routing is handled with React Router 7, and the entire app is deployed as a static site on Cloudflare Pages.

Challenges we ran into

Pitch detection accuracy: Simple autocorrelation works, but background noise and unvoiced sounds required smoothing and stability‑score logic to avoid confusing visual feedback.

Cloudflare deployment lock‑file sync: The build used npm ci strictly, and an outdated package‑lock.json caused a frustrating mismatch. Learning to keep the lock file perfectly aligned with package.json was key.

Accomplishments that we're proud of

Built a complete, polished app that genuinely addresses vocal health — something many people need but few tools serve casually. Integrated real‑time audio analysis without any external libraries, keeping the bundle lightweight. Designed an entirely client‑side experience that respects user privacy and works instantly, no accounts needed. Delivered a joyful UI: the liquid wave, the gentle warm‑up feedback — it feels encouraging, not clinical. Successfully deployed a Vite‑React app on Cloudflare after wrestling with build configs.

What we learned

The Web Audio API is powerful but requires thoughtful UX (permission prompts, start buttons). Cloudflare’s build environment differs from local dev — always test your lock file and build command before assuming it will work. The value of a supportive, gamified design: small touches like streaks and wave animations turn a utility into a habit.

What's next for VoiceGym

Daily streaks and achievements to motivate consistency. A voice journal where users log how their voice feels daily, creating self‑awareness over time. A guided breathing exercise with an animated circle for vocal cord relaxation. An educational tips library covering hydration, steam inhalation, and posture.

Built With

• css
• cursor
• html
• javascript
• react
• vite