Live Note Taker

Live Note Taker: real-time lecture notes with VALSEA—stream partial & final transcript as you speak, save to folders, sign in with Google.

Comment

Inspiration

Taking notes during live classes, workshops, or calls is tiring: you either miss what’s being said or fall behind while typing. We wanted a flow that feels like “speak, watch the words appear, keep what matters”—fast enough for real sessions, not a batch upload demo. VALSEA real-time transcription was the right backbone for something that had to feel instant and useful in a hackathon timeframe.

What it does

  • Live transcription (RTT): Capture microphone audio in the browser, stream it over WebSocket to a VALSEA RTT proxy, and show partial and final transcript text as it arrives.
  • Save & organize: Sign in with Google (Supabase Auth), save sessions into folders, open them in a note editor, and manage folders (rename, delete) in a simple workspace.
  • After the session: Copy or download plaintext, clarify transcript via API when configured, and use optional VALSEA tools on saved notes (e.g. translate, format, sentiment)—behind server route handlers so keys stay private.
  • Polished app shell: Landing page, live tool, login, profile area; light/dark themes, responsive layout, i18n (vi, en, id, th, ms), loading states and accessible controls where it matters.

How we built it

  • Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS with design tokens and a neo-clay marketing style; next-intl for locales; next-themes for dark mode; loading.tsx skeletons and route transition feedback.
  • Live audio path: Web Audio API → downsample to PCM → WebSocket messages to the RTT proxy; strict session start/stop and error handling in a client panel component.
  • Backend & data: Supabase (Postgres + RLS) for folders and transcript sessions; Server Actions and Route Handlers for mutations and VALSEA REST calls; middleware chains next-intl with Supabase session refresh on the same response so redirects and cookies stay consistent.
  • Auth: Google OAuth with PKCE, server auth callback, and safe redirect (next) allowlisting to avoid open redirects.
  • Deploy story: App targets Vercel; RTT proxy and VALSEA_API_KEY are documented for split deployment (browser → wss proxy → VALSEA).

Challenges we ran into

  • Browser ↔ WebSocket RTT: Reliable session lifecycle (connect, ready, stream, stop), handling mic permissions and disconnects without leaking streams or leaving confusing UI states.
  • Middleware + i18n + Supabase: Ensuring locale redirects and session cookies are applied on one NextResponse—easy to break if the order or response object is wrong.
  • Production networking: Moving from ws:// locally to wss:// behind HTTPS, documenting env like NEXT_PUBLIC_VALSEA_RT_PROXY_URL for judges and deployers.
  • UI at the edges: Responsive header/navigation on narrow screens, dark-mode contrast on neo-style buttons and pills (specificity vs. Tailwind utilities), and long toolbar rows without horizontal layout breaks.

Accomplishments that we're proud of

  • A working end-to-end loop: live stream → transcript → save → folder → editor, not just a mock UI.
  • Serious frontend hygiene for a hackathon: i18n, a11y touches, loading/disabled states, and docs in-repo for architecture and env.
  • Security-minded defaults: API keys on the server, RLS for user data, and sanitized post-login redirects.
  • Regional relevance: first-class support for SEA locales alongside English, matching how students and teams actually work.

What we learned

  • Streaming ASR is product work: partial vs final copy, latency, and status copy matter as much as model quality.
  • Supabase + Next App Router patterns (server client, cookies, middleware) are powerful but easy to get subtly wrong without careful testing.
  • Design systems in the open: tokenizing landing vs app surfaces and fixing dark mode early saves painful one-off hacks later.
  • Documentation is part of the deliverable: clear README/docs helps judges, teammates, and your future self ship fixes under time pressure.

What's next for Live Note Taker

  • Hardening: automated tests for critical paths, stricter error boundaries, and observability (client/server logging) for RTT failures.
  • UX: optional pause, speaker diarization if the API supports it, better empty/error states, and offline-safe “draft” behavior where possible.
  • Collaboration: shared folders or read-only share links for classmates (with explicit privacy controls).
  • Mobile & PWA: tighter mobile capture UX and installable PWA for classroom use.
  • Deeper VALSEA: more editor tools wired to real workflows (summaries, action items, export to Markdown/PDF) once keys and quotas are production-ready.

Built With

  • next-intl
  • next-themes
  • next.js-16
  • node.js
  • react-19
  • supabase-(postgresql-+-auth-+-rls)
  • tailwind-css
  • typescript
  • valsea-api-(websocket-rtt-+-rest)
  • vercel
  • zod
Share this project:

Updates