A professional pixel art editor built with React and TailwindCSS featuring:

• Canvas Drawing: Click and drag to draw pixels
• Color Palette: Built-in color picker with preset colors
• Tools: Brush, eraser, fill bucket, eyedropper
• Grid System: Customizable canvas size (8x8 to 64x64)
• Theme Support: Automatic light/dark mode based on system preference
• Export Options: Save as PNG or SVG
• Responsive Design: Works on desktop and mobile devices

├── frontend/
│   ├── index.html          # Main HTML template
│   ├── index.tsx           # React entry point
│   ├── components/
│   │   ├── App.tsx         # Main application component
│   │   ├── Canvas.tsx      # Drawing canvas component
│   │   ├── Toolbar.tsx     # Tools and controls
│   │   ├── ColorPalette.tsx # Color selection
│   │   └── ExportPanel.tsx # Export functionality
│   └── utils/
│       ├── canvas.ts       # Canvas utilities
│       └── export.ts       # Export utilities
├── backend/
│   └── index.ts            # Static file server
└── shared/
    └── types.ts            # Shared TypeScript types

1. Select a tool from the toolbar
2. Choose a color from the palette
3. Click or drag on the canvas to draw
4. Use the export panel to save your artwork
5. Adjust canvas size and grid settings as needed

The app uses:

• React 18.2.0 with TypeScript
• TailwindCSS for styling
• HTML5 Canvas for drawing
• System media queries for theme detection