Overtone App

Deployed as Overtone, this mobile-first drum-tuning companion was prototyped and designed in Figma, then coded in TypeScript/JavaScript, HTML, and CSS and hosted on Vercel. I built it to replace an older tuner that I stopped maintaining, with the goal of having something I trust for daily practice and gigs. The interface supports light and dark modes for studio and stage, and the app runs as a fast single-page experience so it feels instant on phones. An embedded test link is available in my portfolio so you can preview the live build below. At its core is a Hz mic pickup written in JavaScript using the Web Audio API that listens through the device mic and detects the fundamental in real time. A locking system holds the reading once the pitch stabilizes so fine adjustments are easy and the value does not jump around. A Settings page lets you dial in detection behavior with sensitivity, noise gate, averaging window, min and max Hz, A4 reference, and input device selection. You can create kits with named drums, sizes, targets, and saved last-locked values so moving around the kit is quick and consistent. The main tuner view keeps focus with a large frequency readout, note mapping, peak hold, clear Live and Locked states, and simple cues that work in noisy rooms. Continuous deploys keep the embedded demo current while I iterate on per-lug workflows and quick session presets.

Year

2025

Service

App Development

Category

UI/UX, Full Stack Development

Tool

TypeScript, React

Designed in

By

Alexander

© Copyright 2025

Designed in

By

Alexander

© Copyright 2025

Designed in

By

Alexander

© Copyright 2025