I built a free printable coloring pages website for kids, powered by AI generation.
The Fun Part:
Almost all the code was generated by Windsurf with Claude Sonnet 4.5. This was an interesting experiment - I never thought I could actually pull this off. It's fascinating to see what's possible with AI-assisted development today.
Background:
As a parent, I noticed my kids love coloring, but most online resources are either low quality or require paid subscriptions. So I built this using AI to provide high-quality coloring pages for free to all parents.
Core Features:
- AI-generated high-quality line art (powered by Google Gemini)
- 50+ themed categories (animals, holidays, nature, etc.)
- Age-appropriate content (3-12 years) with difficulty levels
- One-click PDF download, print-ready
- Multi-language support (English, Chinese, etc.)
- User favorites and browsing history
Tech Stack:
- Next.js 16 + React 19
- Drizzle ORM + PostgreSQL
- MeiliSearch for search
- Cloudflare R2 for image storage
- Google Gemini AI for content and category generation
- Tailwind CSS + shadcn/ui
Interesting Challenges:
1. AI category consistency - Built a "memory system" to make AI reuse existing categories instead of creating duplicates
2. Image optimization - Using Next.js Image optimization with preloading strategy, LCP < 1.5s
3. SEO - Implemented structured data and multilingual sitemaps, now indexed 500+ pages on Google
Future Plans:
- Custom AI generation from user prompts (text-to-coloring-page)
- Image upload to generate coloring pages (image-to-coloring-page)
- User upload and sharing features
Feel free to try it out and share your feedback! I'd especially love to hear suggestions on technical implementation and product direction.
The source code is not open-sourced yet, but happy to discuss technical details.
I built a free printable coloring pages website for kids, powered by AI generation.
The Fun Part: Almost all the code was generated by Windsurf with Claude Sonnet 4.5. This was an interesting experiment - I never thought I could actually pull this off. It's fascinating to see what's possible with AI-assisted development today.
Background: As a parent, I noticed my kids love coloring, but most online resources are either low quality or require paid subscriptions. So I built this using AI to provide high-quality coloring pages for free to all parents.
Core Features: - AI-generated high-quality line art (powered by Google Gemini) - 50+ themed categories (animals, holidays, nature, etc.) - Age-appropriate content (3-12 years) with difficulty levels - One-click PDF download, print-ready - Multi-language support (English, Chinese, etc.) - User favorites and browsing history
Tech Stack: - Next.js 16 + React 19 - Drizzle ORM + PostgreSQL - MeiliSearch for search - Cloudflare R2 for image storage - Google Gemini AI for content and category generation - Tailwind CSS + shadcn/ui
Interesting Challenges: 1. AI category consistency - Built a "memory system" to make AI reuse existing categories instead of creating duplicates 2. Image optimization - Using Next.js Image optimization with preloading strategy, LCP < 1.5s 3. SEO - Implemented structured data and multilingual sitemaps, now indexed 500+ pages on Google
Future Plans: - Custom AI generation from user prompts (text-to-coloring-page) - Image upload to generate coloring pages (image-to-coloring-page) - User upload and sharing features
Feel free to try it out and share your feedback! I'd especially love to hear suggestions on technical implementation and product direction.
The source code is not open-sourced yet, but happy to discuss technical details.