My vibe coding experience with SAT word list app
I built a SAT vocabulary practice app for students. Not because I wanted to teach others, but because I needed it for my kids, and every other app out there was either bloated, gamified, or stuck in 2010. I just wanted a minimalist interface that showed me tough words, let me guess the meaning, and told me if I was right—with minimal delay, no clutter, no noise.
So, I decided to vibe code it. I've had web development experience - just me, a list of features, and a ton of documentation and APIs to wade through. Tried a few: Claude, V0, Manus, ChatGPT and ofcourse Replit. Screenshots (not in order) below.
First version
I wanted the app to be interactive: a screen that shows a word with four multiple-choice options. Tapping on the right answer should give you more than just a "correct" message. I needed context. Meaning, pronunciation, synonyms, antonyms, simple and complex sentence examples, and some way to track progress. Plus, buttons to move between words, and a save-progress feature so students could stop and pick up where they left off.I fed these ideas into AI and within a mins, the first version was up. The frontend was a simple web page with buttons, cards, and animations—all working well. The backend? Still needed work.
The gamification
I wanted to make it feel engaging. So after each correct answer, there was a pop-up showing the word's meaning, with a “Say Out Loud” button for pronunciation. Plus, a list of synonyms and antonyms to expand the user’s vocabulary, and sentence examples that ranged from basic to complex. I wanted to make sure that the learning process felt progressive.It took a while to get everything integrated, mainly because the app needed to call multiple APIs to fetch data for each word: synonyms, antonyms, usage examples. Claude kept giving me outdated or incorrect endpoints. I spent hours fixing these, testing each API call, and making sure I wasn’t throttled by rate limits. This wasn’t just code—it was a battle of configuration.
Saving progress
The user experience also needed to track progress: a “1/20” indicator that tells you how many words you’ve worked through. I had to implement local storage for session progress and syncing it with the backend so that a user could log in and pick up where they left off.I also added the ability to see lists of wrongly or correctly answered words. Initially, I wanted to use a database like Supabase, but ended up keeping it simple with local storage and a quick backend integration for now.
CSV download/upload
A feature I thought would be useful: allowing users to download their word list (in CSV format) so they could import it into other apps or study offline. It was a bit more complicated than I expected—mainly because formatting the CSV correctly while retaining the word’s metadata (synonyms, antonyms, examples) took a few tries. But once that worked, I added an upload feature too. The app now supports importing custom word lists, which felt like a small win.
The backend & deployment hell
Once the app worked locally, I hit the familiar deployment snags. Vercel’s build process wasn’t as smooth as it should have been. I had linting errors. Environment variables that didn’t get pushed. Some files missing. Then I had to fix CORS issues when fetching data. None of these problems were major, but together, they slowed things down.
I also ran into issues with Supabase. I had planned to use it to track user data (word progress, session history), but when I tried to integrate it, I kept getting rate-limited. So I took a step back and simplified the approach. For now, I’m storing the word data and user progress in a local file on the server. It's not ideal for scaling, but it's functional for a personal project.
