Back in 2015, I wasn’t a developer (and still now). I had no formal training in coding. But I loved language learning tools, and I came across a neat pronunciation tool on a CD-ROM that came with the Oxford Advanced Learner’s Dictionary 9th Edition. I didn’t know it then, but trying to tinker with that app would kickstart my journey into programming — one that would eventually lead to building iSpeakerReact, a modern, open-source language learning tool powered by React and Electron.
This post is a reflection on that journey — the mistakes, the revamps, and the little wins that kept me going.
How it began
Before iSpeakerReact got its current name, it was just called iSpeaker.
The tool originally started from the version on the CD-ROM of the Oxford Advanced Learner's Dictionary 9th edition in 2015.
The original app, made by Oxford University Press, came with a variety of pronunciation features. It was built with AngularJS and jQuery, and relied heavily on Node.js.
At that point, I didn't really know how to code — but I wanted to run the app in a browser. That meant tweaking the code, removing the recording features, and trying to make it work in the browser. It was buggy, broken on mobile, and very limited... but it worked. Kind of.
That was my first real hands-on experience working with someone else’s code.
The first revamp
In 2023, I decided to modernize the interface. I used Bootstrap 5, which helped the app feel much more polished and responsive — and I even added dark mode support for the first time.
While the UI looked cleaner, the core was still using AngularJS, which was deprecated in 2022. It felt like putting a new coat of paint on an unstable foundation. So I decided to rethink things from scratch.
Lesson learned: Just because something works doesn’t mean it’s maintainable. Foundations matter.
Rethinking the app
I looked into modern Angular first, but the learning curve was steep — way steeper than I expected, especially coming from just hacking around with JavaScript.
Then I gave Vue a try. But I struggled to even get a basic homepage working. I spent days trying to combine Bootstrap with Vue, and just ended up frustrated. (I did not know there was a Bootstrap framework for Vue back then 🤦♂️🤦♂️.)
Eventually, I gave up on Vue too.
The second revamp
In March 2024, I got access to ChatGPT. I asked it to help me build the app using React, and that was a game changer. I used Create React App and finally got a basic structure working — including the recording feature I had not thought about years earlier.
But things weren’t smooth sailing: on iOS 16, audio playback broke entirely after a refresh. I spent a month trying to fix it, then got burned out. And due to my busy schedule, I forgot about that for 5 months.
When I returned, I learned that Create React App was in the process of being deprecated. I switched to Vite — and, wow, it turned out to be faster, simpler, and a better fit for the project.
By September 6, 2024, the React-based version of the app was merged into the main branch. That was a huge milestone for me.
Electron support
To make the app work offline, I added Electron support. Previously, I had bundled the entire app with videos and audio, which made it over 3GB. Now, I trimmed that down to around 700MB by allowing users to manually download media when needed.
I also automated the build and release process on GitHub Releases. It wasn’t easy — waiting for 15-minute just to see failed builds was painful — but eventually, I got it working. I could just build for myself, but in the long term, it would be tedious, and of course some people would be skeptical of my binary 🤷♂️🤷♂️.
Lesson learned: Automating releases is a pain, but it’s worth it for trust and reproducibility.
Localization support
The initial React version had everything hardcoded in English. To support other languages, I added localization support.
At first, I used Crowdin. But they suddenly suspended the project without notice. That forced me to move to Weblate, which turned out to be a much better fit — open-source, GitHub-integrated, and very generous for small projects.
The third revamp
While Bootstrap helped me build a functional UI, it started to feel restrictive. So I rebuilt the design using Tailwind CSS and daisyUI.
I chose green as the primary color — it felt calm, accessible, and different from the generic blues/purples of most Bootstrap apps.
Tailwind gave me the freedom I wanted. daisyUI gave me structure when I needed it. This combo helped me create a design system that felt like mine.
The Word section
I started adding features the original app never had. The first was the Word section, which helps learners practice stress and syllables using words from the Oxford 3000™ and 5000™ lists.
It supports real-time syllable highlighting and slow mode playback — tools I wish I had as a learner.
Final thoughts
Building iSpeakerReact has been more than just a coding project — it’s been a journey of learning, rebuilding, burning out, and trying again.
I never had formal training, but I had curiosity, persistence, and help from tools like ChatGPT, Claude, and open-source communities.
If you’re just getting started, I hope this story reminds you: you don’t need a degree to build something real. You just need to start, keep learning, and not be afraid to try (and fail).
Failure is always an option — persistence decides what comes next.
I’m still working on the app, fixing bugs, improving features, and exploring what’s next. If you’d like to follow along — or contribute — you can find it on GitHub ↗.
Top comments (0)