An interactive map of Ukraine with more than one million pixels, where every purchased pixel reveals a fragment of the illustration and turns into a donation.
A fundraising platform built around an interactive, cartoon-style map of Ukraine divided into more than a million pixels. Each pixel can be "purchased." Once paid for, it uncovers a fragment of a large illustration and adds the contribution to the campaign total. The map zooms almost like Google Maps: visitors move into a specific area, discover local characters, landmarks, and details, find "their" spot, and buy more pixels to uncover more of the image. At the end of the flow, the donor picks which Ukrainian fund will receive the contribution.
A Ukrainian volunteer initiative aiming to raise a sizable amount — on the order of one to two million dollars — for several charities by drawing people in through a simple, game-like mechanic. Donations had to be accessible to users from many countries, campaign progress had to be visible at a glance, and donors had to be free to choose the fund they wanted to support. The product needed the act of "unlocking one more pixel" to feel rewarding enough on its own to drive a second, third, and fourth contribution.
A million-plus pixels on a single canvas
The system had to work with a single ~100 MB illustration while still allowing zoom down to individual characters and local objects.
High resolution and performance
The platform had to render a highly detailed image with smooth zoom and pan without ever asking the browser to load the full source file.
Map behavior on par with familiar map products
Zoom, drag, and movement inertia on desktop and mobile had to feel as fluid as a mainstream mapping service — anything less would break the metaphor.
Mapping pixels to donations
The backend had to know precisely which pixels were sold and which were available, and prevent conflicts when several donors went for the same area at the same moment.
Backend image processing
A single large image had to be turned into a pyramid of tiles for different zoom levels, with size and quality balanced, and the whole pipeline had to be controllable and repeatable.
A simple user journey
Visitors from many countries had to grasp, in seconds, how to "buy a pixel" and where the money goes.
We built a headless solution: an interactive React map on the frontend and a Node.js backend pipeline that slices the source illustration into tiles, tracks pixel states, and processes payments. All map logic, payment handling, and routing of donations to specific funds lives on the server; the frontend works as a thin client that renders the map and drives the donation flow.
Donation scenarios
We defined the core flows: anonymous map browsing, selecting a pixel or cluster, calculating the amount, choosing a fund, confirming the donation, and returning to the map with its new state. For each flow we identified the minimum required fields, the places a user could realistically slip up, and the safeguards needed against interrupted or stuck payments.
Architecture of the map engine
We set the tile storage format, the coordinate scheme, and the data model for pixel states. The map engine was built as a standalone module responsible only for tile generation and delivery, fully decoupled from the payment layer. The source illustration can be replaced and new zoom levels can be added without touching the donation logic.
Frontend implementation of the interactive map
The React interface sits on top of the map API as a presentation layer: the map canvas itself, overlays for sold and available areas, and modals for amount and fund selection. Input handling — click, zoom, drag, inertia — is isolated in dedicated services on the frontend, which keeps the UI clean and easy to extend.
Backend for pixel purchases and payments
The Node.js backend includes dedicated services for price calculation, pixel reservation, payment-provider callbacks, and map-state updates. Every operation is written to PostgreSQL with transaction logs separated from state tables, so the full history can be reconstructed even after a partial failure. A Redis-backed reservation layer holds short-lived locks on the pixels a donor is in the middle of buying, which keeps concurrent purchases from colliding.
Content management
Directus serves as the single content source: region names and descriptions, the charity list, campaign copy, minimum contribution amounts. The collection structure was designed so the marketing and volunteer teams could launch new campaigns or rotate funds without ever touching the codebase.
Infrastructure and performance
Services are packaged into Docker containers, with separate resource pools for tile rendering and the transactional API. Static tiles sit behind a CDN; the API caches frequently requested data — popular regions, hot states — with controlled TTLs. Infrastructure monitoring covers the spikes that come with media coverage and lets the platform scale up on demand.
Monitoring and support
We set up separate staging and production environments, structured logging for the events that matter most (payment errors, timeouts, abnormal request patterns), backend health checks, and baseline analytics dashboards for donation volume, traffic load, and error rate.
In the first stage, we worked through the basics with the client team: what the project should feel like, the fundraising target, how many pixels the map should hold, and how regions should map to specific charities. We reviewed adjacent reference products, broke them down into simple mechanics, and defined which user actions absolutely had to ship in version one and which could move into later iterations. The output was a short scenario-and-constraints document that took the place of a heavy traditional specification.
+2 Resource
After launch, the donation process became transparent, visually engaging, and easy to follow for an international audience. Instead of a static page with payment details, the client now has a product that lives well in media, on stage, and across social channels — a campaign that visibly comes alive with every new contribution. The team can see how the map fills in, which regions and charities pull the strongest interest, and plan the next wave from real data rather than intuition.
the interactive map and pixel-unlocking animation lifted the share of visitors who actually donated
the map filling in pixel by pixel gives donors and the team a way to see campaign progress without complex reports
payment processing, contribution recording, and fund routing are all automated, freeing volunteers from reconciliation work
the tile-based architecture and caching layer keep the platform stable through media-driven traffic waves
the headless setup with Directus lets the team launch new goals, funds, or visual themes without touching the platform's core
Or send us a message and we'll get back to you within 15 minutes during business hours