1. Architecture Overview
WordCounter is built with Next.js, React, and TypeScript. It is compiled with static export mode, generating plain HTML, CSS, and optimized JavaScript assets.
Developer: Thyo Surya (https://github.com/thyosurya)
Framework: Next.js App Router
Rendering: Static Export (output: export)
Database: None (0 bytes server state)
Backend: None (100% Client-Side parsing)
2. Performance Budget
Web applications often carry bloat from heavy third-party bundles, analytics, and custom web fonts. WordCounter avoids external font downloads by prioritizing the operating system font stack (San Francisco, Segoe UI, Roboto).
- Target Largest Contentful Paint (LCP): less than 1.5 seconds
- Target Cumulative Layout Shift (CLS): less than 0.1
- No heavy component libraries or CSS animation dependencies
3. Client-Side Counting Algorithms
All text calculations execute directly on the user thread without network latency:
words = text.trim().split(/\s+/).filter(Boolean).length
charactersNoSpaces = text.replace(/\s+/g, "").length
readingTime = Math.ceil(words / 200)
4. Philosophy: Less UI
WordCounter is intentionally not an all-in-one writing platform. It exists to solve one question as fast as possible: How many words are in this text? We believe the best utilities respect user attention and machine resources.