Team who can't speak Cantonese good and what to do other cool things too like mess with UI constraints, including adding really long strings to break UI

Cantonese Tone Master is a frontend-first Progressive Web App that helps learners practice and improve Cantonese tones through interactive speaking drills.

At a high level, the project does this:

Guides learners through tone and word practice flows.
Captures microphone input and extracts pitch and pronunciation features in-browser.
Compares learner speech against reference contours with scoring algorithms.
Shows immediate visual and numeric feedback to help correction.
Stores learning progress and practice data locally.
Supports installable PWA behavior for a mobile-friendly, app-like experience.
Tech direction:

Monorepo with pnpm workspaces.
React + Vite + TypeScript frontend.
Modular packages for audio processing, scoring, shared contracts, data, and UI.
Privacy-conscious MVP approach where raw audio is not persisted, only derived features and scores.
We included Gemini powered coach to help provide personal guidance

I worked on the tone generation first before the hackathon