Skip to Content
All projectsSelected work 04

Music web app

3 minute read

Fogatero

A musician’s web app connecting community song discovery, instrument-specific chord reference, transposition and focused practice tools.

Music web app

Overview

The project at a glance

The problem Reading a chart, changing key, checking chord shapes and keeping time can mean switching between several tools while trying to play.

What I built A searchable community songbook with chart transposition, guitar and ukulele shapes, keyboard chord notes, auto-scroll, a practice timer, a metronome and an in-browser tuner.

What needed care The interface needs to stay readable while someone holds an instrument. The tuner analyses microphone audio locally, and public and private songbooks support different sharing needs.

What it makes possible Musicians can adapt a chart, practise and organise songs in one app, with interfaces in English and Spanish.

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

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
Live website screenshot · /en/songs · Dark mode · 5 October 2026

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
Live website screenshot · /en/chords · Dark mode · 5 October 2026
Live website screenshot · /en/chords?inst=ukulele · Dark mode · 5 October 2026

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
Live website screenshot · /en/songs/victor-jara/el-arado · Dark mode · 5 October 2026

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
Live website screenshot · /en/chords?inst=keyboard · Dark mode · 5 October 2026
Live website screenshot · /en/tuner · Dark mode · 5 October 2026

The result

Musicians can adapt a chart, practise and organise songs in one app, with interfaces in English and Spanish.

Good work starts with the right conversation.

Let's talk about your project

Gallery

The project in pictures

Music web app

A different challenge. The same care.

View all work
Foxgold landing page in dark mode with an illustrative portfolio workspace
Up next / Investment portfolio software

Foxgold

A private portfolio intelligence platform connecting Australian and US portfolio visibility, source-backed research, review workflows and dated reporting.

Discover the project