How vyk2rr/projectresonance works
This is a learning-focused browser music app for exploring piano sounds, chords, melodies, and ukulele chords. The main evidenced entry flow is the home route rendering a welcome page with playable piano variants; the shared piano component handles key playback and sequence playback. Separate pages provide ukulele strumming and fretboard diagrams. Chord palettes support chord selection and inversion, while sequence creation and AI-assisted jamming are distinct capabilities. The graph follows imports and calls shown in the supplied excerpts or source index; unsampled route wiring and feature internals are not inferred.
Main entry points: PianoBase.tsx Piano engine · ChordPalette.tsx Chord palette · pianos Piano sound variants · PianoSequenceCreator.tsx Sequence creator
Components 25
Pages and entry
- Home route
app/routes/Home.tsx - Piano welcome
app/welcome/welcome.tsx - Ukulele page
app/routes/UkulelePage.tsx - Ukulele chords page
app/routes/UkuleleChordsHomePage.tsx
Piano playback
- Piano engine
app/PianoBase/PianoBase.tsx - Music types
app/PianoBase/PianoBase.types.ts - Piano utilities
app/PianoBase/PianoBase.utils.ts - Piano observer
app/PianoObserver/PianoObserver.ts - Sequence dispatcher
app/ChordDispatcher/ChordDispatcher.ts - Piano sound variants
app/pianos - Mini dashboard
app/pianos/PianoMiniDashboard/PianoMiniDashboard.tsx
Chord and composition tools
- Chord palette
app/ChordPalette/ChordPalette.tsx - Chord generation
app/ChordPalette/ChordPalette.utils.tsx - Sequence creator
app/pianos/PianoSequenceCreator/PianoSequenceCreator.tsx - Melody player
app/pianos/PianoMelody/PianoMelody.tsx - Chord cheatsheet
app/pianos/PianoWithChordsCheatsheet/PianoWithChordsCheatsheet.tsx - Piano zap
app/pianos/PianoZap/PianoZap.tsx
Ukulele tools
- Ukulele strumming
app/ukulele/ukulele.tsx - Ukulele piano
app/pianos/PianoUkulele.tsx - Ukulele fretboard
app/UkuleleFretboard/UkuleleFretboard.tsx - Ukulele chord list
app/UkuleleChordsList/UkuleleChordsList.tsx
AI integration
- AI jamming
app/pianos/PianoJammingWithTheAI/PianoJammingWithTheAI.tsx - AI melody service
app/pianos/PianoJammingWithTheAI/PianoJammingWithTheAI.ai.service.ts - AI generation API
Other components
- Visitor
Connections 32
- Visitor → Home route: opens
app/routes/Home.tsx - Home route → Piano welcome: renders
app/routes/Home.tsx - Piano welcome → Piano engine: renders
app/welcome/welcome.tsx - Piano welcome → Piano sound variants: renders
app/welcome/welcome.tsx - Piano engine → Piano utilities: uses
app/PianoBase/PianoBase.tsx - Piano engine → Music types: uses types
app/PianoBase/PianoBase.tsx - Piano engine → Piano observer: notifies
app/PianoBase/PianoBase.tsx - Piano engine → Sequence dispatcher: uses events
app/PianoBase/PianoBase.tsx - Piano sound variants → Piano engine: wraps
app/pianos/PianoDryLeaf.tsx - Mini dashboard → Piano engine: uses
app/pianos/PianoMiniDashboard/PianoMiniDashboard.tsx - Mini dashboard → Piano observer: subscribes
app/pianos/PianoMiniDashboard/PianoMiniDashboard.tsx - Chord palette → Chord generation: generates chords
app/ChordPalette/ChordPalette.tsx - Chord palette → Music types: uses types
app/ChordPalette/ChordPalette.tsx - Sequence creator → Piano engine: uses
app/pianos/PianoSequenceCreator/PianoSequenceCreator.tsx - Sequence creator → Chord palette: renders
app/pianos/PianoSequenceCreator/PianoSequenceCreator.tsx - Sequence creator → Piano sound variants: uses variants
app/pianos/PianoSequenceCreator/PianoSequenceCreator.tsx - Melody player → Piano engine: uses
app/pianos/PianoMelody/PianoMelody.tsx - Melody player → Sequence dispatcher: uses events
app/pianos/PianoMelody/PianoMelody.tsx - Chord cheatsheet → Piano engine: uses
app/pianos/PianoWithChordsCheatsheet/PianoWithChordsCheatsheet.tsx - Chord cheatsheet → Chord palette: renders
app/pianos/PianoWithChordsCheatsheet/PianoWithChordsCheatsheet.tsx - Piano zap → Piano sound variants: uses variant
app/pianos/PianoZap/PianoZap.tsx - AI jamming → Piano engine: uses
app/pianos/PianoJammingWithTheAI/PianoJammingWithTheAI.tsx - AI jamming → Sequence dispatcher: uses events
app/pianos/PianoJammingWithTheAI/PianoJammingWithTheAI.tsx - AI jamming → AI melody service: requests melody
app/pianos/PianoJammingWithTheAI/PianoJammingWithTheAI.tsx - AI melody service → AI generation API: posts prompt
app/pianos/PianoJammingWithTheAI/PianoJammingWithTheAI.ai.service.ts - Visitor → Ukulele page: opens
app/routes/UkulelePage.tsx - Ukulele page → Ukulele strumming: renders
app/routes/UkulelePage.tsx - Ukulele strumming → Ukulele piano: renders
app/ukulele/ukulele.tsx - Ukulele strumming → Ukulele fretboard: renders
app/ukulele/ukulele.tsx - Visitor → Ukulele chords page: opens
app/routes/UkuleleChordsHomePage.tsx - Ukulele chords page → Ukulele chord list: renders
app/routes/UkuleleChordsHomePage.tsx - Ukulele chord list → Ukulele fretboard: renders
app/UkuleleChordsList/UkuleleChordsList.tsx