Shravana — learn anything by listening (Gemini writes it, ElevenLabs voices it)

This is a submission for the Weekend Challenge: Passion Edition

What I Built

I don't learn well by reading. I learn by listening — the ideas I actually keep are the ones someone talked me through, on a walk or a train, while my eyes and hands were busy. So I built the tool I always wanted.

Shravana turns anything you're curious about into a personal, listenable audio course. Type a topic — "how black holes work," "the basics of options trading," "watercolour fundamentals" — pick your level and how deep to go, and Shravana:

1. Composes a real course with Google's Gemini — a genuine learning arc where each episode builds on the last, each written as a ~1-minute spoken script.
2. Voices every episode with ElevenLabs, so you play it like a podcast made for one.
3. Renders the course as an audio-reactive constellation — each episode is a star; the playing one blooms with a halo driven by the real audio waveform.
4. Ends with a recap quiz (also Gemini) so the listening sticks.

The name is the idea. In the Indian tradition, learning begins with श्रवण (śravaṇa) — listening — before reflecting and absorbing. Shravana is also a nakshatra, the three stars of Aquila — which is why the whole interface is a constellation. That's the passion: the fastest way into a subject you love is to hear it.

Demo

🎬 Watch the narrated demo (with sound): demo.mp4 — a real walkthrough, with voice.

Ask → an instant, pre-generated demo → a course rendered as a constellation you listen to.

▶ Run it yourself in ~30 seconds:

git clone https://github.com/singhpratech/devto-WC-20260711
cd devto-WC-20260711 && npm install
cp .env.example .env    # add OpenRouter + ElevenLabs keys to compose your OWN topics
npm start               # → http://localhost:3000

The "▶ Try the instant demo" button plays 3 pre-generated courses — real Gemini scripts + real ElevenLabs audio — with no keys and no credits needed, so you get the complete experience (the constellation player + a real voice) immediately, no setup.

Code

singhpratech / devto-WC-20260711

🕉 Shravana — turn anything you're curious about into a listenable audio course. Composed by Google Gemini, voiced by ElevenLabs. A DEV Weekend Challenge (Passion Edition) entry.

श्रवण — “the act of listening.”
Turn anything you're curious about into a personal, listenable audio course.
Composed by Gemini. Voiced by ElevenLabs.

_{Ask → an instant, pre-generated demo → a course rendered as a constellation you listen to.}

---

What is Shravana?

Shravana turns learning into listening. Name anything you want to understand — “how black holes work,” “the basics of options trading,” “watercolour fundamentals” — and Shravana composes a short, structured course on it, then reads it to you episode by episode, like a podcast made for one.

In the Indian tradition, श्रवण (shravana) is the first of the three stages of learning — listening, then reflecting, then absorbing. Shravana is also a nakshatra: the lunar mansion of the three stars of Aquila. That's the whole identity of the app — a constellation you learn by ear — and it's why the course renders as a…

View on GitHub

No framework, no build step — a small Node/Express server + vanilla HTML/CSS/JS front-end, plus an installable PWA. API keys stay server-side.

How I Built It

Browser (canvas constellation + WebAudio visualizer)
   │  topic · level · length
   ▼
Express server  ← API keys live here, never in the browser
   ├─▶ Google Gemini (direct, responseSchema)  →  course + scripts (JSON)
   │     ⤷ falls back to OpenRouter→Gemini if quota-blocked
   └─▶ ElevenLabs text-to-speech               →  each episode (mp3, cached)

Gemini as an engine, not a chatbot. I don't ask Gemini for prose — I ask for a structure the app can render and play. It returns strict JSON (title → an ordered episodes[], each with a spoken script → takeaways) using Gemini's native responseSchema, a Google-API feature that guarantees the shape:

generationConfig: {
  responseMimeType: "application/json",
  responseSchema: COURSE_SCHEMA,   // OBJECT → episodes[] → { title, summary, script }
}

That JSON draws the constellation, sequences playback, and seeds the quiz. Swap espresso for the fall of the Roman Republic and you get a genuinely different, coherent syllabus.

ElevenLabs is the whole premise. My test: remove it and does the product still exist? No — "learn by listening" isn't a feature, it's the point. Every script is synthesized (eleven_multilingual_v2), episodes auto-advance, and the signature UI is driven by the actual audio: a WebAudio AnalyserNode on the stream powers the halo around the playing star. A hard-won gotcha: free ElevenLabs keys can't call "library" voices via the API (402 paid_plan_required), so Shravana defaults to the free-tier-safe Sarah voice and caches audio server-side.

A few decisions I'm happy with:

• JSON-as-engine — the front-end renders data, never parses prose; a one-shot repair-retry + scaled token budget keeps even 6-episode courses from truncating.
• The constellation is custom — a Catmull-rom thread through the episode-stars, an audio-reactive halo, a progress ring, and distinct heard/active states — all hand-drawn on <canvas>.
• Graceful degradation — no ElevenLabs key? It falls back to the browser's speech voice, so it never hard-breaks. The 3 bundled pre-generated courses always work with zero keys.

Prize Categories

• Best Use of Google AI — Gemini is the entire course-and-quiz engine, using native responseSchema structured output. Full transparency: this demo's Google AI Studio key is free-tier/no-billing, so live runs currently use the Gemini-via-OpenRouter fallback while the direct Google integration (geminiDirect() in server/index.js) is the preferred, code-complete path — either way it's Google's Gemini model doing every bit of the reasoning.
• Best Use of ElevenLabs — the voice is the product. The entire "learn by listening" experience, the auto-advancing episodes, and the audio-reactive constellation all exist because of ElevenLabs text-to-speech.