Play here today: https://www.ansariblueprints.com/cnsnnts/
The Problem
I love playing Wordsy with friends, (it’s a bit like Countdown). However carrying a board game everywhere isn’t exactly practical. I often just want to play a quick round on my phone over coffee, or while travelling. We need a digital solution, so I decided to build one!
Introducing Cnsnnts! (pronounced Consonants)
The Approach: AI-Assisted Rapid Prototyping
Rather than spending weeks on a side project, I wanted to see how quickly I could bring this idea to life using AI. Using Claude AI, I was able to rapidly prototype and iterate on a fully functional web-based version in just a few hours.
I kept the tech stack deliberately simple: vanilla HTML, JS, and CSS. No frameworks, build tools or dependencies. Just the fundamentals, which meant the app could run anywhere and deploy instantly!
The aim was for a lightweight web-app, that would allow me to play the classic word-game quickly with friends, while also making scoring easier than manually tallying up scores on the physical board game.
Development Journey
Initial Build
The first version came together quickly in less than an hour. Claude helped me scaffold out the core game logic, UI layout, and basic styling. Within the first session, I had:
- Letter board display
- Word input functionality for quick scoring
Basically everything you need to play! Generated by Claude and deployed to the web in 20 minutes!
Debugging the Scoring Algorithm
Of course, no first draft is perfect. I encountered bugs in the scoring algorithm that required manual debugging and fixes. Luckily my background in JS made this quite easy.
100% AI assistance accelerates development but it doesn’t eliminate the need for review and testing.
UI/UX Refinements
Once the core functionality worked, I focused on polish:
- Added an info popover using the HTML Popover API (no JavaScript required!) to display game rules
- Refined the styling and colour scheme with clean, responsive CSS
- Positioned UI elements for optimal iPad gameplay (scaling up to the device size so it’s nice and big for easily sharing)
Feature Expansion with Cursor
After a few months and playing many time with friends, i could see a few quality of life features that would quickly improve the game.
I switched to using Cursor to add more sophisticated features:
- Timer functionality: To add competitive pressure to each round
- Scoreboard: To track scores that were entered and easily see each rounds winner
These additions transformed the app from a simple prototype into a playable game, complete with some great quality of life features!
Key Learnings
1. AI as a rapid iteration tool
I still had to do a lot of CSS and JS debugging myself, but getting the overall structure in place using AI tools like Claude and Cursor dramatically reduced development time.
The AI handled the boilerplate and helped me iterate quickly on more exciting and interesting ideas.
2. Vanilla JS Still Has Its Place
In an era dominated by React, Vue, and Angular, building with vanilla technologies was refreshing. The app loads instantly, has zero dependencies, and will work for years without maintenance.
3. Side Projects Are Achievable in an Evening!
The barrier to building useful tools has never been lower. With AI assistance, you can go from idea to working prototype in a few minutes. This opens up opportunities to build custom solutions for personal problems rather than settling for existing tools that don’t quite fit.
Conclusion
This project reinforced something important: building useful software doesn’t require massive time investment or complex infrastructure. With the right tools and a clear goal, you can create meaningful applications in just a few hours.
Consonants now lives online, easily accessible wherever i am on iPad, iPhone and ready to be AirPlay-ed to a TV nearby! Ready for games night, travel, or whenever friends want to play. No board game required!
The best side projects solve your own problems. This one certainly solved mine.
Tech Stack: HTML, CSS, JavaScript
Development Time: ~6-8 hours across a few weekends
Tools Used: Claude AI, Cursor
Status: Deployed and actively used: https://www.ansariblueprints.com/cnsnnts/