Pixel Nation Generator

A Next.js application that generates pixel-art style maps of countries using dot patterns.

🚀 Features

• ⚡ Next.js 14 - For fast, server-side rendering and static site generation
• 🎨 Tailwind CSS - A utility-first CSS framework for rapid UI development
• 📏 ESLint - Pluggable JavaScript linter
• 🐶 Husky - Use git hooks with ease
• 🌍 TopoJSON - For handling geographical data
• 🎨 react-colorful - A tiny color picker component for React
• 🔍 Combobox - For easy country selection

🛠 Getting Started

1. Clone the repository:

   git clone https://github.com/your-username/pixel-nation-generator.git
   cd pixel-nation-generator

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 with your browser to see the result.

📁 Project Structure

├── app/
│   ├── layout.js
│   ├��─ page.js
│   └── globals.css
├── components/
│   └── ui/
├── lib/
├── public/
├── .husky/
├── .vscode/
└── [Configuration files]

🎯 Key Features in Action

1. Country Selection with Combobox

Use the combobox to easily search and select countries from a comprehensive list.

2. Customizable Dot Patterns

Adjust dot size and color to create unique pixel-art representations of countries.

3. Real-time Preview

See your changes instantly reflected in the country map preview.

🔧 Configuration

ESLint

The project uses a custom ESLint configuration. You can find and modify the rules in .eslintrc.json.

Tailwind CSS

Tailwind is configured in tailwind.config.js. You can extend the default configuration here.

📚 Learn More

To learn more about the technologies used in this project, check out the following resources:

• Next.js Documentation
• Tailwind CSS Documentation
• TopoJSON Documentation
• react-colorful Documentation

🤝 Contributing

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

📄 License

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