Project

Subtitles

Next.js (TypeScript)
Django (Python)
WebSocket

a live transcription app used in real-world settings for English learners

subtitles image

This app is a listening support tool designed for English learners. It serves as a pair of “training wheels” in real-world situations—such as conferences, presentations, or meetings—where users may need help understanding spoken content.

Although many transcription and note-taking apps already exist, I aimed to create something simple, fast, and lightweight. The focus was on enabling users to start transcribing instantly and keep clean, minimal logs without unnecessary complexity or clutter.

Live | Frontend code (GitHub) | Backend code (GitHub) | API documentation

usage-01

Motivation

As an English second-language learner, I’ve always found the vocabulary and idioms spoken at tech conferences incredibly beautiful and inspiring. At the same time, there were many moments when understanding fast-paced or nuanced English was genuinely challenging.

Although I often used transcription apps, I found that many existing tools were packed with features I didn’t need. What I truly wanted was something simple—an app that supports English comprehension like movie subtitles, while keeping only a minimal log when necessary. A lightweight tool that functions almost like training wheels for real-world English.

Since such a tool didn’t exist, I decided to build it myself.

usage-02

Features

• Live transcription from device audio — Works with audio coming from smartphones, laptops, or other devices.

• User authentication — Includes sign-up, login, and logout functionality.

• Transcription history — Save, view, edit, and delete past transcriptions with custom titles.

usage-03

Application Design

Architecture

application diagram

ERD

application diagram

Technologies

Frontend

Next.js 15 (App Router, Route Handlers), Zustand, Shadcn

Backend

Django, Django Rest Framework, PostgreSQL

Infrastructure

Railway