O Aplikaci Fretty

Příběh za aplikací Fretty

Ahoj všem!

S vývojem aplikace Fretty jsem začal přibližně v roce 2015. Důvod byl celkem praktický: pracoval jsem jako učitel kytary a potřeboval jsem online interaktivní nástroj pro vizualizaci hudební teorie na hmatníku, který by dětem i začátečníkům pomohl lépe pochopit kytarové základy.

Jako webový vývojář jsem v tom uviděl příležitost vytvořit si vlastní aplikaci a prozkoumat hudební teorii z analytického a matematického pohledu. Zároveň pro mě psaní kódu pro tuto kytarovou aplikaci sloužilo jako praktické prostředí pro učení moderního programování.

Jak se říká, „všechno je vždy ve vývoji“. V roce 2021 jsem kód aplikace důkladně uložil do repozitáře na Bitbucketu, abych ji připravil na další fázi vývoje.

Spravovat a modernizovat plnohodnotnou aplikaci jako samostatný vývojář (solo developer) je velká výzva, ale krok za krokem ji posouvám dále. Děkuji za vaši podporu a pochopení!

Hlavní funkce a možnosti

Vizualizace hmatníku: Mapování tónů, akordů, stupnic a harmonických struktur přímo na interaktivním virtuálním hmatníku.
Interaktivní přizpůsobení: Nastavení čísel pražců, viditelnosti těla kytary, základních tónů (Chord Root), typů a přípon akordů i přepínání vizuálních barevných témat.
Diagramy akordů a notace: Generování vlastních akordových diagramů (přes SVGuitar / Chordic) a práce s notovým zápisem či formátem MusicXML (přes OpenSheetMusicDisplay).
Zvukové přehrávání: Možnost přehrát označené tóny a akordová aranžmá přímo v prohlížeči.

Architektura a technologie

Next.js & React 19: Přechod z původního prostředí Webpack / Create React App na moderní Next.js s Turbopackem a React 19.
Stavový management v Zustand: Kompletní refaktorování na lehký a rychlý Zustand store (useFretStore) pro svižné a oddělené UI.
Client-First & Statický export: Konfigurace pro statický export (output: 'export'), která zajišťuje vysoký výkon a plnou přenositelnost.
Vektorové rozhraní (SVG & <foreignObject>): Dynamické mapování souřadnic s responzivní rotací pro mobilní i desktopové obrazovky.
NPM balíček (@wind177/fretty): Publikováno jako samostatná knihovna, která se na webu guitar-poet.com načítá dynamicky bez SSR, aby se předešlo chybám při hydrataci.

Vize do budoucna: EdTech a robotika

Fretty je navržena s důrazem na hudební vzdělávání. Součástí dlouhodobé vize je propojení webové aplikace s fyzickým kytarovým robotem Frettym – hardwarovým a AI modulem, který by v budoucnu ukazoval a fyzicky přehrával akordy dětem při výuce hudební výchovy.