PROJECT LINK

TECH STACK


Platform	Web (browser)
Frontend	TypeScript, Vite, HTML/CSS
Showcasing	AI Assisted Development, Imperative AI Guidance, Music knowledge

CHORDLENS

A chord progression viewer and editor with Roman numeral analysis — built in under 12 hours using AI with imperative control (every prompt was precise, directive, and reviewed rather than passively accepted). Write chord progressions in standard notation (e.g. [C] [G] [Am] [F]) and the app instantly displays the Roman numeral analysis, key-aware chord names, and a Circle of Fifths reference.

FEATURES

Real-time chord parsing and Roman numeral conversion
Key transposition (up/down/reset) with visual key display
Circle of Fifths reference panel
Lyrics/chords toggle view
Saved songs with sidebar management
Copy to clipboard
Custom chord function rules legend

DEVELOPMENT

Built in under 12 hours using imperative AI guidance — every feature was directed through precise, declarative prompts with full human review before acceptance. Zero black-box generation; all logic was understood and validated before commit.

LIVE DEMO

↗ Open in new tab

How to use

Type chords in the Editor panel using [Chord] notation (e.g. [C] [G] [Am] [F])
The Viewer panel shows the Roman numeral analysis in real time
Use the Key dropdowns to set the song’s key and quality (Major/Minor)
Transpose up/down with the arrow buttons or reset to original key
Save songs with the sidebar for later editing
Toggle between chord-only and chord+lyrics view modes
Review the Rules panel for custom chord function definitions

Example

Input: [C] [G] [Am] [F] in key of C Major

Output: I V vi IV

Transpose up 2 semitones → [D] [A] [Bm] [G] with I V vi IV (numerals don’t change LOL)

Notes

Chords are parsed as root + quality (e.g. Cm7, G#dim, F#m7b5)
The Circle of Fifths updates dynamically based on the current key