DWL
Back to selected work
Local-first workflowActive buildRecording/importReview workspaceLocal storage

Case study

Transcribble

A local-first recording and transcription workspace where the recording, transcript, review state, and exports live together.

Transcribble is an active local-first product build for recording or importing media, reviewing transcripts, preserving session state, and exporting transcript artifacts.

Snapshot

Role
Founder / Full-Stack Developer
Stack / tools
Next.js / React / TypeScript / Tailwind / IndexedDB / OPFS / Web Workers
Timeline / status
Current / Active build
Core users
People reviewing recordings, interviews, lectures, voice notes, or sensitive local media.
Problem class
Recording review, local media state, transcript cleanup, and export handoff.
Location
New York, New York

Problem

A transcript is only useful after it becomes reviewable. Recording tools, transcript files, bookmarks, edits, and exports often live in separate places.

It matters because the user is making an operational decision with incomplete context: People who need to review recordings, preserve context, clean up transcript artifacts, and keep sensitive media local where possible.

Product decision

The product judgment is that the recording is the document. The transcript, review marks, playback state, local storage, and exports all belong to the same workspace object so review work does not drift into scattered files.

  • Kept the public app honest: the empty state guides setup instead of pretending mature usage or scale.
  • Designed the workspace around the full review loop, not just transcript generation.
  • Kept recording/import, transcript, marks, review state, backup, and export actions attached to the same local workspace object.

What I did not build or claim

  • Not a cloud-first media library.
  • Not claiming perfect transcript accuracy or replacing human review.
  • Not overbuilding collaboration before the local review loop is strong.

System / workflow

  1. 01

    Capture

    Users record directly or import media into a local project workspace.

  2. 02

    Store

    Project metadata, media, marks, saved ranges, and transcript state persist locally.

  3. 03

    Review

    Playback, search, edits, marks, and saved ranges keep cleanup close to the recording.

  4. 04

    Export

    Transcript artifacts can leave the workspace as TXT, Markdown, SRT, or VTT.

Interface mapRecording document map
Modules
  • Record / import
  • Local workspace
  • Transcript review
  • Saved ranges
  • Exports
Workflow
  1. Capture
    microphone / file import
  2. Review
    transcript / marks / search
  3. Export
    txt / md / srt / vtt

Prototype flow

A recording workflow that keeps media, transcript state, saved ranges, and exports attached to one local workspace.

Local review workspace
  1. 01Record/importMedia intake

    A recording or local file becomes a project object instead of a loose upload.

    • microphone
    • file
    • duration
  2. 02Review transcriptTranscript pane

    Playback, search, marks, saved ranges, and transcript cleanup stay in the same workspace.

    • search
    • marks
    • ranges
  3. 03Preserve local stateWorkspace storage

    Project metadata and media state persist locally so review work survives reloads.

    • IndexedDB
    • OPFS
    • saved
  4. 04Export transcriptTXT / Markdown / SRT / VTT

    The reviewed transcript leaves the workspace in usable formats for the next workflow.

    • txt
    • md
    • srt
    • vtt
Modules
  • Record / import

    Starts from direct capture or local media import.

  • Transcript review

    Keeps playback, transcript, search, and edits together.

  • Local state

    Preserves project media, transcript marks, and saved ranges locally.

  • Exports

    Sends reviewed transcript artifacts out as common text formats.

Readout

The prototype presents the recording as the document, with local state as part of the product.

Active build; transcript quality and helper readiness remain visible user-facing states.

What shipped / what exists

  • A single-route workspace with recording, file import, local project storage, transcript review, playback, search, edit, marks, saved ranges, and exports.
  • A first-run setup/test flow that can create a bundled sample, verify playback, test export serialization, and read saved project/media back from local storage.
  • Browser-local transcription plus a localhost helper path for long or memory-risk media.

Architecture notes

  • Next.js App Router, React, TypeScript, and Tailwind.
  • IndexedDB and OPFS-backed local storage for project metadata, transcripts, marks, saved ranges, and media files.
  • Browser worker transcription with Hugging Face Transformers/WebGPU or WebAssembly fallback, plus a localhost helper using native ffmpeg/ffprobe and local model backends for larger media.

Evidence / proof

Open live siteBack to work

Live active build with recording/import, local project storage, transcript review, setup test, and TXT/Markdown/SRT/VTT exports.

  • Live public app at transcribble.dylanwlim.com.
  • Repo includes setup, helper check/start/install, browser smoke, test, typecheck, build, production audit, and dependency freshness scripts.
  • Product flows include microphone recording, drag-in/file import, review workspace, transcript search/editing, backup, and .txt/.md/.srt/.vtt exports.

Constraints

  • Active build/prototype; no accuracy, scale, or cloud-collaboration claims.
  • Local-first model keeps first-run setup and helper readiness visible.

Visual artifact

No real project screenshots are tracked in this repository. The interface map is used as an honest structural proof panel, not as a screenshot or invented metric.

Next steps

  • Make first-run helper readiness more legible for non-technical users.
  • Tighten the review queue around the most useful cleanup actions.
  • Improve cross-device handoff without weakening the local-first model.

Interested in similar product work?

Reach out for internships, product work, or focused collaborations.

Contact DylanBack to selected work