DEV Community

Cover image for How I Vibe-Coded a Fast Client-Side Word Counter Tool using AI
Vo Viet Hoang
Vo Viet Hoang

Posted on

How I Vibe-Coded a Fast Client-Side Word Counter Tool using AI

Hey DEV community! ๐Ÿ‘‹

I wanted to share a quick project I built using AI-assisted development (Vibe Coding): a lightweight, real-time Online Word Counter Tool.

As an SEO specialist, I often need quick text analysis (word count, reading time, character limits). Instead of using bloated third-party sites, I decided to build one using pure JS/PHP with AI guidance.

๐Ÿ’ก Key Features Built:

  • Real-time word, character, sentence, and paragraph counting.
  • Estimated reading & speaking time calculations.
  • Clean, fast, and 100% client-side text processing.

๐Ÿ› ๏ธ What I Learned (Vibe Coding Perspective):

  • Regex handling: Fine-tuning word breaking algorithms for edge cases (hyphenated words, special symbols, multi-language characters).
  • DOM performance: Ensuring smooth typing without lag when processing large documents (>10,000 words).

๐Ÿ”— Check it out & Feedback:

Iโ€™d love for you to try it out and let me know if you run into any bugs or have feature ideas!

๐Ÿ‘‰ Live Demo: Online Word Counter Tool

Online Word Counter Tool

Feedback on UI/UX or code optimization is warmly welcomed! What micro-tools are you guys building with AI lately?

Top comments (7)

Collapse
 
citedy profile image
Dmitry Sergeev •

did you run into any issues with the AI hallucinating the logic for the word count or did it nail it first try?

Collapse
 
hoangvibecode profile image
Vo Viet Hoang • • Edited

Yeah, I had to explicitly specify pure client-side JS! Once I set that constraint, it nailed the overall structure pretty quickly.

Collapse
 
hoangvibecode profile image
Vo Viet Hoang • • Edited

Exactly! It runs 100% client-side in the browser. Zero data sent to any server, no storage at allโ€”purely fast and private!

Collapse
 
citedy profile image
Dmitry Sergeev •

did you have to prompt it specifically for the client-side logic or did it just get the vibe right on the first try?

Collapse
 
hoangvibecode profile image
Vo Viet Hoang • • Edited

Took a few iterations! The main logic worked, but I had to tweak the prompts for edge cases and pure client-side JS.

Collapse
 
hoangvibecode profile image
Vo Viet Hoang •

Exactly! It runs 100% client-side in the browser. Zero data sent to any server, no storage at allโ€”purely fast and private!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.