ASCIIArtist

A modern web application for generating ASCII art from text, built with Next.js 15 and Chakra UI v3.

Features

• 🎨 Canvas Size Selection: Choose from multiple canvas widths (40, 60, 80, 100 characters)
• 🌈 Color Mode: Toggle between B&W and Color ASCII character sets
• ✍️ Text Input: Easy-to-use textarea for entering text to convert
• 🖼️ Real-time Generation: Instant ASCII art generation with the click of a button
• 📱 Responsive Design: Clean, modern UI that adapts to different screen sizes

Screenshots

Initial UI

Generated ASCII Art (Medium 60, B&W)

Generated ASCII Art (Large 80, Color)

Tech Stack

• Next.js 15.5.6 - React framework with App Router
• React 19 RC - UI library
• Chakra UI v3.28.0 - Component library
• TypeScript - Type safety
• Emotion - CSS-in-JS styling

Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/BorDevTech/ASCIIArtist.git
cd ASCIIArtist

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

Build for Production

npm run build
npm start

Deploy to GitHub Pages

This project includes a GitHub Actions workflow that automatically deploys the application to GitHub Pages when you push to the main branch.

To enable GitHub Pages deployment:

1. Go to your repository's Settings → Pages
2. Under Source, select GitHub Actions
3. Push your code to the main branch
4. The workflow will automatically build and deploy your site

The site will be available at: https://<username>.github.io/<repository-name>/

You can also manually trigger the deployment from the Actions tab.

Usage

1. Select Canvas Size: Choose your desired width from the dropdown (Small, Medium, Large, or X-Large)
2. Choose Color Mode: Select between B&W or Color for different ASCII character sets
3. Enter Text: Type or paste your text into the textarea
4. Generate: Click the "Generate" button to create your ASCII art
5. View Result: Your ASCII art appears in the canvas section below

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Project Structure

ASCIIArtist/
├── app/
│   ├── layout.tsx       # Root layout with Chakra UI provider
│   ├── page.tsx         # Main page with ASCII art generator
│   └── providers.tsx    # Chakra UI provider configuration
├── .eslintrc.json       # ESLint configuration
├── .gitignore          # Git ignore rules
├── next.config.js      # Next.js configuration
├── package.json        # Dependencies and scripts
└── tsconfig.json       # TypeScript configuration

License

This project is open source and available under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.