A modern, accessible character counter application built with React, TypeScript, and Tailwind CSS v4. This project demonstrates clean architecture, real-time text analysis, and modern React patterns including the latest React 19 features.
- Real-time Text Analysis: Character, word, and sentence counting as you type
- Letter Density Visualization: Interactive bar chart showing letter frequency distribution
- Character Limit Mode: Set and track character limits with visual feedback
- Exclude Spaces Option: Toggle to count characters with or without spaces
- Reading Time Estimation: Automatic calculation based on average reading speed
- Dark Mode Support: Full dark/light theme with system preference detection
- Fully Responsive Design: Optimized for mobile (375px+), tablet (768px+), and desktop (1024px+)
- Persistent Theme: Theme preference saved to localStorage
- Accessible: WCAG compliant with proper ARIA labels and keyboard navigation
- React 19 - Latest React features without forwardRef
- TypeScript - Type-safe code with type definitions (not interfaces)
- Tailwind CSS v4 - CSS-based configuration with custom design tokens
- Vite - Lightning-fast build tool and dev server
- Bun - Fast JavaScript runtime and package manager
- ESLint - Code quality and consistency
- Prettier - Automatic code formatting
- clsx - Utility for constructing className strings conditionally
src/
├── components/ # React components
│ ├── CharacterLimitInput.tsx
│ ├── Checkbox.tsx
│ ├── Controls.tsx
│ ├── Header.tsx
│ ├── Icons.tsx
│ ├── LetterDensity.tsx
│ ├── ReadingTime.tsx
│ ├── StatCard.tsx
│ └── TextInput.tsx
├── context/ # React Context providers
│ ├── ThemeContext.ts
│ └── ThemeProvider.tsx
├── hooks/ # Custom React hooks
│ ├── useTextAnalysis.ts
│ └── useTheme.ts
├── assets/ # Images and fonts
│ ├── fonts/ # DM Sans font files
│ └── images/ # Icons and backgrounds
├── index.css # Global styles and Tailwind v4 config
├── App.tsx # Main app component
└── main.tsx # App entry point
- Type-First Development: All components use
type(notinterface) for props - Co-located Types: TypeScript types defined in the same file as components
- Named Exports: All components use named function declarations
- Composition Pattern: Small, focused components composed together
- CSS-Based Configuration: Design tokens defined in
@theme - Custom Utilities: Using
@utilitydirective for component classes - Design System: Consistent spacing, typography, and color scales
- Dark Mode: Class-based dark mode with custom color schemes
- No forwardRef: Refs passed as regular props
- Improved Performance: Leveraging React 19's optimizations
- Modern Patterns: Function declarations over arrow functions
- Node.js 18+
- Bun (recommended) or npm
- Clone the repository:
git clone https://github.com/lance0821/character-counter-project.git
cd character-counter-react- Install dependencies:
bun install- Start the development server:
bun run dev- Open your browser and navigate to
http://localhost:5173
bun run dev # Start development server
bun run build # Build for production
bun run lint # Run ESLint
bun run preview # Preview production build
bun run format # Format code with Prettier
bun run format:check # Check if code is formatted
bun run type-check # TypeScript type checking- Context API for global theme state
- Custom hooks for text analysis logic with memoization
- Local component state for UI controls
- localStorage for theme persistence
- Tailwind CSS v4 with CSS-based configuration
- Custom utility classes using
@utilitydirective - Design tokens in
@themefor consistency - Mobile-first responsive design
- Feature-based structure with clear separation
- TypeScript types co-located with components
- Custom hooks for business logic
- Figma-aligned design system
Main textarea component with error state handling and character limit feedback. Adapts to theme and provides visual feedback for limit exceeded state.
Interactive visualization component showing letter frequency distribution with expandable view and percentage calculations.
Reusable card component for displaying statistics with dynamic formatting and decorative patterns.
Composite component managing user preferences including space exclusion, character limits, and reading time display.
useTextAnalysis- Memoized text analysis calculationsuseTheme- Theme context access with error boundaries
- Mobile (<768px):
- Single column layout with 130px stat cards
- 40px font size for statistics
- 12px padding on text input
- Compact header with 18px logo text
- Tablet (768px-1024px):
- Three column grid for stat cards
- Hero text constrained to 510px width
- 64px font size for headings
- 32px padding for optimal reading
- Desktop (>1024px):
- Full-width three column grid
- Maximum content width of 7xl (80rem)
- Enhanced spacing and larger touch targets
- Adaptive typography using Tailwind v4 responsive utilities
- Memoized calculations in
useTextAnalysishook - Efficient re-renders with proper component composition
- Optimized bundle with Vite's tree-shaking
- Fast Refresh for instant development feedback
The useTextAnalysis hook provides real-time analysis including:
- Character counting (with/without spaces)
- Word boundary detection
- Sentence parsing with punctuation handling
- Letter frequency analysis for density visualization
- System preference detection
- Manual toggle override
- Persistent storage
- Smooth transitions
- Visual feedback when approaching limit
- Error state when exceeded
- Real-time remaining character count
- Customizable limit value
- Add copy to clipboard functionality
- Export analysis as PDF/CSV
- Multiple text comparison
- Language-specific analysis
- Keyboard shortcuts
- Text statistics history
- Custom reading speed settings
This project is open source and available under the MIT License.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
Lance Lewandowski
- GitHub: @lance0821
- LinkedIn: Lance Lewandowski
- Design inspired by Frontend Mentor challenges
- Built following modern React best practices
- Tailwind CSS v4 for next-generation styling
- DM Sans font for beautiful typography