All projectsSelected work / 04
Music web application
Fogatero
A musician’s web app connecting community song discovery, instrument-specific chord reference, transposition and focused practice tools.
The project at a glance2 minute read
- Sector
- Music / Creative tools
- My role
- Product designWeb applicationBrowser audio toolsCustom Software & Business Systems
- Technology
- Next.jsReactSupabaseWeb Audio
- Project
- Studio projectStrategy / design / development
01
The brief
Keep the music and the tools together
Playing from a digital chart often means moving between song search, chord reference and separate practice utilities. Fogatero brings those tasks into one musician-focused web app, with a public songbook and a consistent path from discovery to playing.
The homepage introduces the repertoire, instrument support and practice features in a dark interface. Songs, Chords and Tuner remain close at hand, while English and Spanish entry points make the same tools accessible to different audiences.
- Song discovery connected to practice
- Guitar, ukulele and keyboard support
- A consistent dark interface
- English and Spanish entry points
02
Discovery
Find a useful chart before you start playing
The songbook combines search with instrument, key and artist filters. Visitors can browse community arrangements, use artist links to narrow the repertoire, and see contributor context on the song cards.
Song detail pages bring the chosen arrangement into a reading view with musical controls alongside it. This makes discovery part of the playing journey: the visitor can find a song, inspect its arrangement and prepare the chart without moving to a separate utility.
- Search by song or artist
- Instrument and key filtering
- Community arrangement and contributor context
- A direct path from discovery to chart preparation
03
Chord reference
Match the reference to the instrument
The chord library changes its presentation with the instrument. Guitar and ukulele views show string diagrams and fingering, while the keyboard view presents chord notes and formulas. Search and chord-quality filters help musicians narrow the library to the shapes they need.
Chord cards include audible previews, connecting the visual reference with the sound. The shared structure keeps navigation familiar while allowing the musical information to change for each instrument.
- Instrument-specific chord presentation
- Search and chord-quality filters
- Audible chord previews
- Keyboard chord notes and formulas
04
Playing
Adapt the chart to the practice session
Song controls support transposition, adjustable text size and auto-scroll speed. A practice timer and metronome keep timing tools beside the chart, while focus mode supports a more concentrated reading experience.
The control panel groups those adjustments in one place so the chart can be adapted to the musician’s voice, reading distance and pace. Inline chord references provide another way to check a shape while working through an arrangement.
- Transposition and readable chart sizing
- Auto-scroll with adjustable speed
- Practice timing, metronome and focus mode
- Inline chord references beside the chart
05
Preparation
Move between reference and tuning
The tuner offers microphone-based pitch detection with a strobe-style display. Its settings expose reference-pitch calibration and guitar or ukulele visibility, making instrument preparation part of the same app as the repertoire.
Alongside the keyboard reference, these tools extend the experience beyond a static songbook. The result is a connected set of public musical tools for finding a chart, understanding its chords and preparing to play. The screenshots show the public interface; they do not represent a microphone accuracy test or private account workflow.
- Reference-pitch calibration
- Guitar and ukulele tuner settings
- Discovery, reference and practice in one app
- Strobe-style pitch feedback for instrument preparation
The result
Musicians can discover a chart, adapt it to their instrument and voice, and move into practice with chord reference, timing controls and a tuner in the same app.
Tell me what you’re trying to build or improve.
Let’s talk about your projectNext project
View all work
Up next / Portfolio intelligence
Foxgold
A private portfolio intelligence platform connecting Australian and US portfolio visibility, source-backed research, review workflows and dated reporting.
View the projectWork directly with me
Have something
in mind?
Start a project Share the problem, your timing and what you have in mind. I’ll reply by email with questions and a useful next step. We agree scope and costs before work begins.