Project Overview

Design, development and fabrication of an interactive data visualization platform for Tearfund’s “Light Up The World” campaign, combining custom hardware with web applications to show real-time donation impact across 50 countries. The system features a dynamic world map that lights up with each donation, celebrating milestones through confetti animations, fireworks, and audio feedback to create an emotional connection between donors and global impact.

Technical Excellence

Custom hardware feature embedded microcomputers with game-show-style buttons on plinths, sending donation data via RESTful APIs. The Vue 3/TypeScript frontend uses Phoenix WebSocket channels for real-time updates across multiple installations.

Key features include efficient SVG world map rendering, Tween.js animations, and a FIFO queue system to manage celebration timing. The modular architecture uses state machines for complex UI transitions, with service workers providing offline resilience.

Integration & Impact

Phoenix LiveView provides remote administration for Tearfund staff to monitor all installations. The system tracks lives transformed and communities empowered, with progress visualizations making charitable impact tangible for donors at both local and global scales.

Thoughts and feelings

Working on something that facilitates positive change around the world was rewarding. The distributed, real-time system brought interesting technical challenges across hardware integration, network reliability, and user experience.

The hardware fabrication was particularly satisfying - designing and iterating custom electronics that integrated microcomputers with physical interfaces. Very proud of creating a platform that effectively visualized charitable impact while inspiring genuine connections between donors and communities.