# Figlet UI

A modern, feature-rich web UI for generating ASCII art text using figlet.js with 700+ fonts from the [xero/figlet-fonts](https://github.com/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](https://nextjs.org/) - React framework with static export
- [React 19](https://react.dev/) - Latest React with concurrent features
- [TypeScript 5](https://www.typescriptlang.org/) - Type-safe development
- [Tailwind CSS 4](https://tailwindcss.com/) - Modern utility-first CSS
- [figlet.js](https://github.com/patorjk/figlet.js) - ASCII art rendering engine
- [Fuse.js](https://fusejs.io/) - Fuzzy search functionality
- [Lucide React](https://lucide.dev/) - Beautiful icon library

## Development

### Prerequisites

- Node.js 22+ (managed via nvm)
- pnpm (enabled via corepack)

### Setup

```bash
# 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](http://localhost:3000).

## Docker Deployment

Build and run with Docker:

```bash
# 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](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](https://github.com/patorjk/figlet.js) by Patrick Gillespie
- [xero/figlet-fonts](https://github.com/xero/figlet-fonts) - Curated font collection
- Original [FIGlet](http://www.figlet.org/) project