Sebastian Krüger
28428ed458
Implemented Phases 5-7 of the implementation plan with major UX enhancements:
**Dark Mode (Phase 9)**
- Added ThemeToggle component with localStorage persistence
- System preference detection
- Smooth theme transitions
- Moon/Sun icon toggle in header
**Fuzzy Search with Fuse.js (Phase 5)**
- Integrated Fuse.js for intelligent font search
- 30% threshold for flexible matching
- Search by font name and filename
- Clear button for search input
- Much better than simple string matching
**Favorites & Recent Fonts System (Phase 7)**
- localStorage-based favorites with heart icon toggle
- Auto-tracking of recently used fonts (max 10)
- Filter tabs: All / Favorites / Recent
- Favorite hearts visible on hover
- Red filled heart for favorited fonts
- Stats showing favorite and recent counts
**Shareable URLs (Phase 6)**
- Encode text + font in URL parameters
- Auto-load from URL on page load
- Share button copies URL to clipboard
- Clean URL updates without page reload
- Perfect for sharing ASCII art creations
**Enhanced Font Selector**
- 3-tab filter system (All/Favorites/Recent)
- Visual feedback for selected fonts
- Empty states for each filter
- Font count statistics
- Heart icon for quick favoriting
- Recent fonts sorted by usage order
**UX Improvements**
- Copy feedback ("Copied to clipboard! ✓")
- Share feedback ("URL copied to clipboard! ✓")
- Responsive button layout
- Better empty states
- Improved accessibility with aria-labels
**Tech Highlights**
- Client-side localStorage management
- URL encoding/decoding utilities
- React hooks for state management
- Fuse.js fuzzy search integration
- Theme persistence across sessions
The app now has professional-grade features rivaling any modern web app!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Figlet UI
A modern, feature-rich web UI for generating ASCII art text using figlet.js with 700+ fonts from the xero/figlet-fonts collection.
Features
- 700+ Figlet Fonts - Massive library from xero's curated collection
- Live Preview - Real-time rendering as you type
- Fuzzy Search - Quickly find fonts by name or style
- Visual Font Previews - See actual rendering in the selector
- Multiple Export Formats - Copy, download as text, PNG, or SVG
- Shareable URLs - Share your creations with encoded URLs
- Dark Mode - Eye-friendly interface
- Keyboard Shortcuts - Power user features
- Mobile Optimized - Works great on all devices
- Code Generation - Generate snippets for JS, Python, CLI
Tech Stack
- Next.js 16 - React framework with static export
- React 19 - Latest React with concurrent features
- TypeScript 5 - Type-safe development
- Tailwind CSS 4 - Modern utility-first CSS
- figlet.js - ASCII art rendering engine
- Fuse.js - Fuzzy search functionality
- Lucide React - Beautiful icon library
Development
Prerequisites
- Node.js 22+ (managed via nvm)
- pnpm (enabled via corepack)
Setup
# Install dependencies
pnpm install
# Run development server with Turbopack
pnpm dev
# Build for production (static export)
pnpm build
# Lint code
pnpm lint
The development server will be available at http://localhost:3000.
Docker Deployment
Build and run with Docker:
# Build Docker image
docker build -t figlet-ui .
# Run container
docker run -p 80:80 figlet-ui
The application will be available at http://localhost.
Project Structure
figlet-ui/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
├── lib/ # Utility functions and services
├── types/ # TypeScript type definitions
├── public/ # Static assets
├── Dockerfile # Multi-stage Docker build
├── nginx.conf # Nginx configuration for static serving
└── IMPLEMENTATION_PLAN.md # Detailed implementation roadmap
Why Figlet UI is Better Than TAAG
- 10x More Fonts: 700+ fonts vs ~300 on TAAG
- Modern UI/UX: Clean, responsive design with animations
- Better Search: Fuzzy search with visual previews
- More Export Options: PNG, SVG, code snippets, not just text
- Shareable Links: URL-encoded sharing
- Performance: Lazy loading, Web Workers for smooth experience
- Dark Mode: Built-in theme switching
- Keyboard Shortcuts: Power user efficiency
- Mobile First: Optimized for touch devices
License
MIT
Credits
- figlet.js by Patrick Gillespie
- xero/figlet-fonts - Curated font collection
- Original FIGlet project