Discover new illustrations regularly.

Go to website ↗ 🌓

• Drag & drop uploads with automatic processing and variant generation
• Multiple image variants automatically created (xxs, xs, sm, md, lg, original)
• Grid-based layout with draggable and resizable image positioning
• Image modal viewer with smooth navigation controls
• Statistics tracking for views, likes, and downloads
• Tagging system for advanced image organization
• Bulk operations for efficient image management

• Create and manage collections to organize related images
• Public/private visibility controls for collection sharing
• Collection cover images and rich metadata support
• Easy add/remove images from collections
• Collection analytics and performance tracking

• Secure authentication with session management
• Rich user profiles with biography, job, location, and social links
• Role-based access control (user/admin permissions)
• Personal galleries and collection management

• Fully responsive design optimized for all devices
• Dark/light theme support with smooth transitions
• View transitions and smooth animations
• Interactive click fireworks — a lightweight, full-screen fireworks animation plays when you click anywhere in the app. The effect is implemented in components/ClickFireworks.vue and uses the login page palette (cyan / blue / pink / fuchsia / yellow / amber).
• Customizable grid layout (draggable, resizable components)
• Modern component library with consistent design system
  • Component prefix used in this repo: UnaUI components are registered with the N prefix (e.g. NButton, NDialog, NInput) so the project uses PascalCase N* components across templates.
• Accessibility-first approach

• Edge deployment on Cloudflare Workers for global performance
• Automatic image optimization and CDN delivery
• Server-side rendering for optimal SEO
• Progressive enhancement with client-side interactivity

• Nuxt.js 4 - Vue.js framework with SSR/SSG capabilities
• UnaUI - Modern, accessible component library
• UnoCSS - Atomic CSS framework for rapid styling
• Pinia - Intuitive state management
• TypeScript - Full type safety and enhanced developer experience

• Cloudflare Workers edge platform - Application platform at the edge
• Cloudflare D1 - Distributed SQLite database at the edge
• Cloudflare R2 - Object storage for image assets
• Cloudflare KV - Key-value storage for caching and sessions
• Cloudflare Cache - Global edge caching for optimal performance

• Jimp - Server-side image manipulation
• Automatic variant generation in multiple optimized sizes
• Custom image provider for intelligent delivery
• Grid layout positioning system with persistence

• Wrangler - CLI for Cloudflare Workers development

The application uses a well-structured SQLite database with the following key tables:

• Core metadata: name, description, slug, pathname
• Grid positioning: x, y coordinates with width/height
• Statistics: views, likes, downloads tracking
• Variants: JSON array of generated image sizes
• User association: linked to user accounts

• Collection metadata: name, description, slug
• Visibility controls: public/private settings
• Cover image: customizable collection thumbnails
• Statistics: comprehensive analytics tracking

• Profile information: biography, job, location
• Authentication: secure password handling
• Social links: JSON array of social media profiles
• Role management: user/admin permissions

• Collection-Image relationships: many-to-many associations
• Positioning: custom ordering within collections

• Node.js (v16 or later)
• npm or yarn
• Cloudflare & NuxtHub account

1. Clone the repository:

git clone https://github.com/rootasjey/zimablue.git

2. Install dependencies:

cd zimablue
npm install

3. Configure environment variables:

cp .env.example .env

4. Run development server:

npm run dev

1. Build the application:

npm run build

2. Deploy to Cloudflare Workers:

npm run deploy

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.