Sebastian Krüger
753ed17e4b
Implemented Phases 2-4 of the implementation plan: **Phase 2: Font Management System** - Created font loading service with caching - Added API route to list all 373 figlet fonts - Implemented font metadata types **Phase 3: Core Figlet Engine** - Built figlet.js wrapper service for ASCII art generation - Added async/sync rendering methods - Implemented debounced text updates (300ms) - Created utility functions (cn, debounce) **Phase 4: Main UI Components** - Built reusable UI primitives (Button, Input, Card) - Created TextInput component with character counter (100 char limit) - Implemented FontPreview with loading states - Added FontSelector with real-time search - Built main FigletConverter orchestrating all components **Features Implemented:** - Live preview with 300ms debounce - 373 fonts from xero/figlet-fonts collection - Fuzzy font search - Copy to clipboard - Download as .txt file - Responsive 3-column layout (mobile-friendly) - Character counter - Loading states - Empty states **Tech Stack:** - Next.js 16 App Router with Turbopack - React 19 with client components - TypeScript with strict types - Tailwind CSS 4 for styling - figlet.js for rendering - Font caching for performance The application is fully functional and ready for testing! 🤖 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