Doodle This

Random Art Reference Generator | Quick Creative Inspiration

Get inspired with a random reference doodle or illustration to spark your creativity. Perfect for artists, students, or anyone looking for quick art ideas.

Doodle This - Random Art Reference Generator | Quick Creative Inspiration

✨ Features

• Random Art Discovery: Each visit displays a randomly selected doodle or illustration
• Artist Attribution: Proper credit and licensing information for all artwork
• Interactive Viewing: Zoom and pan functionality for detailed artwork examination
• Responsive Design: Optimized for all devices and screen sizes
• SEO Optimized: Enhanced for search engine visibility and social media sharing
• Accessibility First: Built with screen readers and keyboard navigation in mind

🎨 About the Art Collection

This gallery showcases doodles and illustrations from various artists, each with:

• Proper artist attribution and links to their profiles
• Clear licensing information (Creative Commons, etc.)
• High-quality artwork suitable for inspiration and study
• Diverse artistic styles and subjects

🛠️ Tech Stack

• React 19.1.1 - Modern React with concurrent features
• TypeScript 5.8.3 - Type-safe development
• Tailwind CSS 4.1.11 - Utility-first styling
• Vite 7.1.12 - Fast development and building
• React Zoom Pan Pinch - Interactive image viewing
• React Icons - Consistent iconography

🚀 Getting Started

1. Clone the repository

   git clone <repository-url>
   cd doodle-this

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

📜 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run serve - Preview production build
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues
• npm run type-check - Run TypeScript compiler check

🔍 SEO Features

This application is optimized for search engines with:

• Meta Tags: Comprehensive meta descriptions, keywords, and Open Graph tags
• Structured Data: JSON-LD markup for artwork and artist information
• Semantic HTML: Proper heading hierarchy and ARIA labels
• Sitemap: XML sitemap for search engine discovery
• Robots.txt: Search engine crawling guidelines
• Social Media: Twitter Card and Open Graph support

📁 Project Structure

├── src/
│   ├── App.tsx              # Main application component
│   ├── main.tsx             # React application entry point
│   ├── index.css            # Global styles
│   ├── doodles.json         # Artist and artwork data
│   └── assets/              # Images and static assets
├── public/
│   ├── robots.txt           # Search engine crawling rules
│   └── sitemap.xml          # Site structure for search engines
├── index.html               # HTML template with SEO meta tags
└── package.json             # Dependencies and scripts

🎯 How It Works

1. Data Loading: Artwork information is loaded from doodles.json
2. Random Selection: A random artwork is selected on each page load/refresh
3. Attribution Display: Artist information and licensing details are shown
4. Interactive Viewing: Users can zoom and pan to examine artwork details
5. SEO Enhancement: Each artwork generates structured data for search engines

🤝 Contributing

Contribute as an Artist

If you'd like to share your artwork for this project, please open an issue.
Include your artist name, a link to your website or portfolio, links to your pieces, and the license under which you’re sharing them.

Note: vector images with transparency work best for this app.

Contribute as a Developer

Notice something that could be improved?
Found a bug or have an idea for a new feature?
Do it! Just do it!

📄 License

This project is licensed under the MIT License. Individual artworks retain their original licenses as specified in the attribution information.

👨‍💻 Author

Created and maintained by JGEsteves

---

Discover new art every day with Doodle This - where creativity meets proper attribution.