Idara

Idara's home screen

Inspiration

As university students in Nigeria, we live the lecture struggle every single day. Professors talk fast, slides fly by, and by the time you look up from scribbling notes, you've already missed the next key point. We watched classmates record lectures on their phones — only to never revisit those hour-long recordings.

The breaking point came when a teammate failed to capture a critical derivation during a signals & systems lecture. He had the recording, but no time to re-listen to 90 minutes of audio. We thought: What if AI could do the heavy lifting — transcribe, summarize, and even visualize — so students could focus on actually learning?

We also wanted something that works in Africa's reality: unreliable internet, no budget for premium tools, and diverse learning needs. That's how Idara was born — the Yoruba word for "management" — because students deserve a tool that manages their learning, not the other way around.

What We Learned

On-device AI is real and powerful. Running Whisper Tiny (quantized ONNX) entirely in-browser via Web Workers was a revelation. Zero server calls, zero latency concerns, full offline capability — and it actually works well.
Prompt engineering is an art. Getting Gemini 2.5 Flash to consistently produce structured, exam-ready notes with 7 distinct sections required dozens of prompt iterations. Small wording changes caused dramatic output differences.
Veo 2 is incredibly capable but requires careful prompt crafting to produce educationally meaningful animations rather than generic visuals.
IndexedDB + Dexie.js is a legitimate offline database for storing lectures, audio blobs, transcripts, notes, and even generated videos — no backend needed.
PWAs are underrated. With a manifest and service worker, our web app installs like a native app and launches offline.

How We Built It

We built Idara as a modern React 19 + Vite 7 single-page application styled with Tailwind CSS 3.4, designed from day one as an offline-first Progressive Web App.

The pipeline works in 4 stages:

Record — The MediaRecorder API captures audio while the Web Audio API drives a real-time Canvas waveform visualization.
Transcribe — Audio chunks (5-second segments) are streamed to a dedicated Web Worker running Whisper Tiny (ONNX quantized q8) via @huggingface/transformers.js. Transcription happens 100% on-device — no internet required.
Generate Notes — The full transcript is sent to Google Gemini 2.5 Flash with a carefully engineered prompt that produces structured study materials: Executive Summary, Key Concepts, Formulas, Definitions, 10 Practice Questions, Quick Review Points, and Study Tips.
Generate Videos — Gemini extracts the 3 most "visual" concepts from the notes as structured JSON. Each concept description is sent to Google Veo 2, which generates 5-second animated educational videos.

State management uses Zustand 5 with localStorage persistence. Storage uses Dexie.js 4 wrapping IndexedDB for all persistent data — lectures, audio blobs, transcripts, notes, concepts, and videos.

The entire application is serverless — the only cloud calls are to Gemini and Veo APIs. Everything else runs in the browser.

Challenges We Faced

Whisper model loading time. The initial download of the ONNX model (~40MB) is slow on poor connections. We had to implement clear loading states and progress indicators so users don't think the app is broken.
Web Worker communication. Streaming audio chunks to a Web Worker and receiving partial transcriptions back required careful message protocol design. Debugging workers is harder than regular code — no easy breakpoints.
CORS with Veo 2. The Veo API doesn't support browser-origin requests, so we had to set up a Vite dev proxy and configure Vercel rewrites for production.
Audio chunking artifacts. Splitting audio into 5-second segments for real-time transcription sometimes cuts words mid-syllable, causing transcription errors at chunk boundaries. We implemented overlap strategies to mitigate this.
Gemini output consistency. Getting Gemini to always return well-structured Markdown with all 7 sections — and separately return valid JSON for concept extraction — required extensive prompt engineering and output validation.
IndexedDB storage limits. Storing audio blobs locally can fill up storage fast. We had to be mindful of blob sizes and implement proper cleanup.