https://github.com/sujalxplores/pixel-nation
Create vibrant pixel-art maps of countries using customizable dot patterns. Built with Next.js 14 and Tailwind CSS.
https://github.com/sujalxplores/pixel-nation
dataviz geography interactivemap nextjs14 pixelart
Last synced: 4 months ago
JSON representation
Create vibrant pixel-art maps of countries using customizable dot patterns. Built with Next.js 14 and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/sujalxplores/pixel-nation
- Owner: SujalXplores
- Created: 2024-10-13T17:40:29.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-15T06:30:15.000Z (over 1 year ago)
- Last Synced: 2025-04-06T02:15:59.563Z (about 1 year ago)
- Topics: dataviz, geography, interactivemap, nextjs14, pixelart
- Language: JavaScript
- Homepage: https://pixel-nation.vercel.app
- Size: 75.2 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/your-username/pixel-nation-generator.git
cd pixel-nation-generator
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](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](https://nextjs.org/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [TopoJSON Documentation](https://github.com/topojson/topojson)
- [react-colorful Documentation](https://github.com/omgovich/react-colorful)
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
This project is open source and available under the [MIT License](LICENSE).