Magic Coloring Book Generator

• 

  home page

• 

  create view

Inspiration We wanted to solve the problem of parents struggling to find personalized coloring books that match their children's specific interests by using AI to generate custom content instantly. What it does Magic Coloring Book Generator creates personalized coloring books with custom themes, generates up to 20 unique pages plus a cover, and provides instant PDF downloads alongside a gallery of pre-made books. How we built it We used React/TypeScript/TailwindCSS for the frontend, Node.js/Express for the backend, jsPDF for PDF generation, and Docker for containerization, all with in-memory storage for fast, stateless operations. Challenges we ran into We faced difficulties with browser-based PDF generation quality, maintaining consistent artistic styles across generated pages, optimizing performance for high-resolution images, and creating responsive designs that work across all devices. Accomplishments that we're proud of We created a seamless 30-second user flow from idea to downloadable PDF, built a comprehensive gallery with 30+ books and advanced filtering, and achieved professional print-quality output with full accessibility support. What we learned We gained valuable insights into user-centered design for diverse age groups, AI content generation and prompt engineering, browser PDF technology, React performance optimization, and the power of TypeScript for large applications. What's next for Magic Coloring Book Generator We plan to integrate real AI image generation APIs, add educational curriculum alignment, implement social features and user accounts, develop mobile apps, and partner with print-on-demand services for physical book delivery.

Built With

• react
• supabase
• tailwindcss
• typescript
• vite