-
-
Scala Mater Interactive
Inspiration
Scala Mater began as my original visual method and book for teaching music theory.
I created it after repeatedly observing the same problem: many guitarists learn chord shapes, scale patterns, and tablature as isolated pieces of information, but struggle to understand how notes, intervals, chords, harmonic functions, and modes belong to one connected musical structure.
Scala Mater uses the major scale as a generative framework. Within tonal harmony, its degrees produce intervals, diatonic chords, harmonic functions, modal centers, and pathways toward composition.
What existed before Build Week
Before OpenAI Build Week, Scala Mater existed as:
- An original music-teaching method.
- A book based on that method.
- A private V1 authoring tool created with Codex.
- An initial clean architectural foundation for V2.
V1 was a monolithic internal production tool used to generate the coordinated diagrams and visual material for the Scala Mater book. It successfully supported that production process, but it was not a finished educational product, a public web application, or the interactive experience submitted to this hackathon.
Its musical logic, visual rendering, interface behavior, and content-generation responsibilities had also become tightly coupled, making the application difficult to maintain and extend.
The initial V2 foundation represented an attempt to create a cleaner architecture, but it was still an early development base rather than the integrated and deployed prototype presented here.
What I built during Build Week
During OpenAI Build Week, I used GPT-5.6 and Codex to meaningfully extend, integrate, test, and stabilize Scala Mater V2 as a modular interactive prototype.
The Build Week work focused on turning the earlier internal authoring concept and initial V2 foundation into a working browser-based experience with coordinated musical representations, improved interface behavior, clearer component responsibilities, and a public testable deployment.
The submitted project is therefore not simply V1 published online. It is a modular evolution designed around interaction, learning, teaching, presentation, and future expansion.
What it does
Scala Mater Interactive is a browser-based visual workspace for exploring music through connected representations.
The current submitted prototype brings several musical views into one interface:
- Standard notation and tablature.
- A visual piano keyboard.
- A guitar fretboard.
- A piano-roll representation.
- Interactive note states and visual relationships.
- Controls for organizing and displaying the musical workspace.
- A presentation-oriented canvas that can be used while teaching, recording, or sharing a screen.
These representations form the visual and technical foundation of the broader Scala Mater learning model:
Major scale → diatonic chords → harmonic functions → modes
The objective is to help users understand that these subjects are not separate collections of diagrams. They are different views of the same underlying musical system.
Scala Mater is intended for three related audiences:
- Guitarists and music students who want to understand the theory behind the shapes and songs they play.
- Music teachers who need a clear visual environment for lessons and demonstrations.
- Digital music creators who produce educational videos, courses, presentations, and social media content.
The current interface is in Spanish and the application remains an actively developed prototype.
How I built it
Scala Mater V2 is built as a web application using React, TypeScript, Vite, SVG-based visualization, music-notation technologies, Git, GitHub, and Vercel.
During Build Week, I worked with Codex and GPT-5.6 to inspect the existing code, identify tightly coupled responsibilities, implement and refine modular components, connect musical representations, diagnose TypeScript and interface problems, improve visual consistency, test the project, document the work, and prepare the application for deployment.
The V2 architecture is being organized around clearer separation between:
- Musical domain logic.
- Scale, interval, chord, function, and modal concepts.
- Instrument and notation visualizations.
- Shared application state.
- User interaction and note behavior.
- Audio and playback responsibilities.
- Project-file and persistence responsibilities.
- Teaching and presentation features.
This separation is important because the same musical information must be represented consistently across a score, tablature, piano keyboard, guitar fretboard, and piano roll without duplicating the underlying theory inside every visual component.
Codex helped me explore unfamiliar technical areas, compare architectural alternatives, implement bounded changes, review TypeScript, diagnose integration problems, and iterate rapidly on the interface.
I remained responsible for the musical model, pedagogical sequence, visual direction, product decisions, testing priorities, and validation of the generated musical results. Codex accelerated the engineering process, but the musical and educational judgment remained mine.
The repository README and Git history document the distinction between the work that existed before Build Week and the meaningful extensions completed during the event.
Challenges I ran into
The central technical challenge was evolving a specialized but monolithic production tool without losing the musical behavior that had already been used to create the book.
This required identifying which parts represented reusable musical knowledge and separating them from rendering details, interface behavior, and authoring-specific code.
Another challenge was maintaining consistent musical state and visual behavior across several representations. A note displayed on a keyboard, guitar fretboard, staff, tablature, or piano roll must represent the same musical information even though every instrument uses a different visual language.
A further challenge was transforming a tool originally designed for one author into an interface that students, teachers, and digital creators could eventually understand and operate directly.
The musical challenge was preserving the relationships between scales, chords, functions, and modes without turning the application into an overcrowded theory chart.
Modes presented a particular conceptual difficulty. A mode is not established simply by highlighting the same notes from a different starting point. A useful learning system must also communicate tonal center, characteristic degrees, supporting harmony, and musical context.
Finally, deploying the project introduced practical challenges involving Git configuration, private repository access, browser routing, and Vercel deployment. Resolving these issues was part of turning the local prototype into a working submission that judges can test.
Accomplishments that I am proud of
I am proud that a musician without a traditional software-development background was able to use Codex to create specialized technology around a real educational problem.
The first stage of Scala Mater produced the coordinated visual system used in a music theory book.
During Build Week, the project entered a different stage: transforming internal authoring technology into the foundation of a modular, learner-facing, browser-based experience.
The submitted V2 prototype demonstrates that several musical representations can coexist inside one structured visual workspace while sharing the same educational direction.
I am also proud that the project does not hide its history. The method, book, V1 tool, and initial V2 foundation are identified as prior work, while the integration, extension, stabilization, testing, documentation, and deployment completed during Build Week are presented as the new work being judged.
Most importantly, Scala Mater connects subjects that are commonly taught separately into one continuous conceptual pathway:
Major scale → diatonic chords → harmonic functions → modes
What I learned
I learned that a tool originally created to produce educational material can evolve into part of the educational experience itself.
I also learned why modular architecture matters for a project built around specialized domain knowledge. Musical rules should not remain trapped inside individual interface components or illustrations. They need to exist as reusable logic capable of supporting different instruments, visualizations, and teaching contexts.
Working effectively with Codex requires more than requesting code. The strongest results came from combining musical expertise, clear product decisions, bounded technical tasks, continuous testing, and careful correction of assumptions.
I learned that I do not need to become a conventional software engineer before experimenting with software. My role is to understand the musical problem, define what the product must communicate, evaluate whether the result is musically correct, and use AI-assisted development to turn that knowledge into a working system.
I also learned the importance of distinguishing a product vision from the exact functionality of a current prototype. Scala Mater Interactive is already testable, but it is also the foundation for a much broader learning platform.
What's next
The next stages of Scala Mater Interactive could include:
- Guided lessons and exercises.
- A bilingual Spanish and English interface.
- Deeper interactive exploration of scales, chords, harmonic functions, and modes.
- Additional instrument views.
- Improved audio and playback behavior.
- Exportable teaching graphics.
- MIDI integration.
- Saving and reopening musical projects.
- Teacher-focused presentation tools.
- Learning paths for natural minor, harmonic minor, melodic minor, modal interchange, modulation, and composition.
The long-term goal is to develop Scala Mater into a broader visual system for learning, teaching, presenting, and creating music.
Log in or sign up for Devpost to join the conversation.