ColorVerse is a web application that provides free, AI-generated coloring pages. Users can browse categories, view daily picks, and download or print high-quality coloring pages.
- Node.js (v14 or higher)
- npm (comes with Node.js)
-
Clone or download the project to your local machine
-
Install dependencies:
npm install
-
Start the development server:
npm start
-
Access the application:
- Local URL: http://localhost:3000
- Network URL: http://192.168.8.196:3000 (your local IP may vary)
After starting the server, you should see:
┌──────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://192.168.8.196:3000 │
│ │
└──────────────────────────────────────────────┘
If you're using Puppeteer for automated testing or screenshots:
-
Ensure the server is running (see steps above)
-
Use the correct URL format:
- ✅ Correct:
http://localhost:3000 - ❌ Avoid:
http://127.0.0.1:3000(may cause connection issues in containers)
- ✅ Correct:
-
Example Puppeteer usage: puppeteer_navigate Navigate to a URL { "url": "http://host.docker.internal:3000", "allowDangerous": true }
If you see "Connection refused" errors:
- Ensure the server is running (
npm start) - Check that port 3000 is not already in use
- Try refreshing the page after a few seconds
If images don't load:
- Check your internet connection (AI images require external API calls)
- Clear browser cache and refresh
- Check browser console for any CORS or network errors
- AI-Powered Image Generation: Utilizes the Pollinations AI API to create unique coloring pages from text prompts.
- Diverse Categories: Offers a wide range of categories such as animals, fantasy, mandalas, nature, and more.
- Seasonal Themes: Adapts to different seasons with themed content and color schemes.
- Theme Switching: Supports light, dark, and colorful themes for user preference.
- Daily Picks: Features a new, hand-selected coloring page each day.
- Lazy Loading: Images are loaded efficiently as users scroll, improving performance.
- Caching: Site data and image URLs are cached to ensure fast loading times and reduce API calls.
- Download & Print: Users can easily download images in JPG format or print directly from the browser.
- Share Functionality: Allows users to share coloring pages with others.
- Responsive Design: Works seamlessly on various devices.
- HTML, CSS, JavaScript
- Tailwind CSS for styling
- Font Awesome for icons
- Pollinations AI API for image generation
| Command | Description |
|---|---|
npm start |
Start development server on localhost:3000 |
npm test |
Run unit tests with Node's test runner |
npm install |
Install dependencies |
colorverse/
├── index.html # Main HTML file
├── app.js # Main application logic
├── package.json # Project configuration
├── README.md # This file
└── assets/ # Static assets (if any)
- DEVELOPMENT.md – codebase overview and testing notes
- POLLINATIONS_INTEGRATION.md – Pollinations API usage guide
- AI-APIDOCS.md – detailed API reference
Run all unit tests with:
npm testThe suite covers API fallbacks, theme handling, caching helpers, and more. Test files reside in the test/ directory.
This project leverages the following AI models:
- Gemini 2.5
- Claude Sonnet 3.7
This project can be extended to use the modified Claude Code Action with OAuth for GitHub Actions, allowing Claude Max subscribers to leverage their subscription for automated code assistance.
To set up Claude Code Action with OAuth:
-
Install the Claude GitHub app to your repository:
https://github.com/apps/claude -
Get your OAuth credentials from your Claude Max subscription:
- Make sure you are logged in with your Claude Max in Claude with
/login. - Find your
access token,refresh token, andexpires atin~/.claude/.credentials.json(Ubuntu) or by searching "claude -> show password" in KeyChain (macOS).
- Make sure you are logged in with your Claude Max in Claude with
-
Add the following secrets to your repository:
CLAUDE_ACCESS_TOKEN: Your Claude OAuth access tokenCLAUDE_REFRESH_TOKEN: Your Claude OAuth refresh tokenCLAUDE_EXPIRES_AT: The token expiration timestamp
-
Create a workflow file (e.g.,
.github/workflows/claude.yml) with the OAuth configuration:name: Claude PR Assistant on: issue_comment: types: [created] pull_request_review_comment: types: [created] issues: types: [opened, assigned] pull_request_review: types: [submitted] jobs: claude-code-action: if: | (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) || (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) || (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) || (github.event_name == 'issues' && contains(github.event.issue.body, '@claude')) runs-on: ubuntu-latest permissions: contents: read pull-requests: read issues: read id-token: write steps: - name: Checkout repository uses: actions/checkout@v4 with: fetch-depth: 1 - name: Run Claude PR Action uses: grll/claude-code-action@beta with: use_oauth: true claude_access_token: ${{ secrets.CLAUDE_ACCESS_TOKEN }} claude_refresh_token: ${{ secrets.CLAUDE_REFRESH_TOKEN }} claude_expires_at: ${{ secrets.CLAUDE_EXPIRES_AT }} timeout_minutes: "60" # Optional: add custom trigger phrase (default: @claude) # trigger_phrase: "/claude" # Optional: add assignee trigger for issues # assignee_trigger: "claude" # Optional: add custom environment variables (YAML format) # claude_env: | # NODE_ENV: test # DEBUG: true # API_URL: https://api.example.com # Optional: limit the number of conversation turns # max_turns: "5"
Strict Non-Commercial Use License
This code is strictly for personal and educational purposes only. Commercial use, including but not limited to selling, distributing, or incorporating this code into commercial products, is explicitly prohibited.
Note: This project is for educational and personal use. Please respect the terms of service of the Pollinations AI API and any included resources.