feat: initial project setup with Next.js 16 and Tailwind CSS 4
- Initialize Next.js 16 with React 19 and TypeScript 5 - Configure Tailwind CSS 4 with PostCSS - Set up static export for Docker deployment - Install figlet.js for ASCII art rendering - Add fuse.js for fuzzy search functionality - Create project structure (app/, components/, lib/, types/) - Add comprehensive README and IMPLEMENTATION_PLAN - Configure ESLint and TypeScript - Set up pnpm package management Tech stack matches units-ui project for consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
105
README.md
Normal file
105
README.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user