Learn English with Music

Listening is the best way to learn a new language

Comment

What Inspired Me

The inspiration for this project came from a personal and observed challenge: many English learners struggle with real-world listening comprehension. While grammar and vocabulary tools are abundant, it's rare to find platforms that focus on practical listening skills using modern, interactive methods. I wanted to create something that feels like a bridge between entertainment and education—where learners could listen, learn, and improve in a fun and effective way.

How I Built the Platform

The project is a full-stack web application built with the following technologies:

Frontend: React + TypeScript, styled with Tailwind CSS and bundled using Vite

Backend: Node.js with Express.js, serving RESTful APIs

Database: PostgreSQL, for storing user data, listening exercises, and progress

Hosting: Deployed on a Linux VPS using Nginx as a reverse proxy

Users can log in, choose from a variety of audio content (songs, podcasts, dialogues), listen, and answer comprehension questions. There's also a feature to slow down audio, see transcriptions, and translate difficult words.

What I Learned

This project taught me a lot about user-centered design and how to structure learning experiences for different skill levels. I also deepened my experience with:

Authentication flows using Supabase

Building real-time audio controls in React

Managing state and playback for long audio files

Writing SQL queries that optimize both performance and flexibility for filtering content by level or topic

Challenges I Faced

Audio player sync: Handling precise syncing between audio and transcript text (especially with Vite’s HMR) took trial and error.

Token-based authentication: Ensuring the Supabase session tokens worked smoothly with my Edge Functions was tricky, especially when handling session expiration.

Scaling media content: Designing the schema and storage system to manage dozens of audio clips and transcripts required careful planning.

Final Thoughts

This project reinforced my passion for building educational tools that are both practical and accessible. Seeing users engage with real audio and gain confidence in their listening skills is incredibly rewarding. I plan to continue iterating on this platform, adding speech recognition and live feedback in the future.

Built With

Share this project:

Updates