LearningSong

LearningSong transforms learning content into catchy songs that make key concepts easy to remember
Paste your article and optionally enrich it with a Google search
The app creates lyrics that connect the most important concepts
Choose the music style you prefer, in just 3–5 minutes, your full song is fully synthesized and ready to play
Let’s make learning more interesting by creating songs and understanding their meaning

Inspiration

We've all struggled to memorize dry educational content. Songs stick in our heads effortlessly—why not harness that for learning? LearningSong was born from the idea that AI could bridge the gap between boring study material and memorable musical experiences.

What it does

LearningSong transform the learning material into singable songs. It is a 3-page web app that:

Text Input Page: Users paste educational content (up to 10,000 words). Optional Google Search grounding enriches short queries.
Lyrics Editing Page: AI-generated lyrics appear for review and editing. Users select from 8 music styles (Pop, Rap, Folk, Electronic, Rock, Jazz, Children's, Classical).
Song Playback Page: Suno API generates two song variations. Users switch between versions, enjoy karaoke-style synchronized lyrics with word-level highlighting, and can adjust timing offset for perfect sync.

How we built it

We built LearningSong entirely through spec-driven development with Kiro, creating 10 comprehensive specs from project setup to E2E testing:

project-setup: Foundation—React/FastAPI architecture, Firebase integration, dev environment
page-a-text-input: Home page—text input, Google Search grounding toggle, rate limit display
page-b-lyrics-editing: Lyrics editor—AI-generated lyrics, 8 music style selection, song generation
page-c-song-playback: Playback page—audio player, basic lyrics display, song metadata
dual-song-selection: Dual variations—SongSwitcher component, variation storage, user preference persistence
timestamped-lyrics-sync: Karaoke sync—word-level highlighting, binary search for O(log n) lookup, auto-scroll
song-playback-improvements: Offset adjustment, song history, LRC export
page-b-debugging: Debugging pipeline issues and UI refinements
e2e-chrome-devtools-testing: End-to-end testing with Chrome DevTools MCP
implementation-analysis: Cross-cutting concerns and architecture review

Each spec followed the same rigorous structure: requirements.md (EARS-compliant acceptance criteria) → design.md (architecture, components, correctness properties) → tasks.md (implementation checklist). This systematic approach meant Kiro could implement complex features like dual-song selection (28 correctness properties) and timestamped lyrics sync with minimal back-and-forth—the specs caught edge cases before code was written.

The tech stack:

Frontend: React 19 + TypeScript, Vite, TailwindCSS + shadcn/ui, Zustand, TanStack Query
Backend: FastAPI (Python), LangChain/LangGraph for AI pipeline
External: Suno API (music generation), Firebase (auth, storage), Google Search API

Challenges we ran into

Lyrics timing sync: Suno's timestamped lyrics had consistent offset issues. We solved this with a user-adjustable offset slider (-2000ms to +2000ms).
Dual song handling: Suno generates 2 songs per request, but we initially only showed one. Building the SongSwitcher component required careful state management for audio player, lyrics sync, and user preferences.
E2E testing complexity: Testing a multi-page flow with WebSocket updates and audio playback required custom Chrome DevTools MCP integration.

Accomplishments that we're proud of

10 complete specs covering every major feature from project setup to E2E testing
Property-based testing with Hypothesis (Python) and fast-check (TypeScript) ensuring correctness across edge cases
Karaoke-style lyrics with word-level highlighting and smooth auto-scroll
Dual song selection letting users compare and choose their preferred AI-generated version

What we learned

Spec-driven development fundamentally changes how you build software. Writing requirements and correctness properties upfront forces you to think through edge cases before coding. Kiro's ability to implement from specs meant we spent more time designing and less time debugging.