Overview
We developed Brave Pink Hero Green, a purpose-driven web application designed to serve as a central hub for digital solidarity during a significant social movement in Indonesia. The primary goal was to provide a fast, secure, and accessible tool for users to create customized profile pictures, enabling them to visually express their support online.
The Solution
The project aimed to not only provide a utility but also to build a sense of community and quantify the movement's digital footprint through a high-performance, secure platform.
Key Features
- Client-Side Image Processing: To guarantee user privacy and speed, we utilized the HTML5 Canvas API. All image filtering, color adjustments, and text overlays are processed 100% in the user's browser—no personal images are ever uploaded to a server.
- Advanced Customization: Users have granular control over their profile pictures with sliders for color intensity, brightness, contrast, and saturation.
- Live Social Proof: Integrated with a Supabase (PostgreSQL) database to track every photo generated in real-time. This live counter visualizes the movement's growth and encourages participation.
- Secure Architecture: While image processing is client-side, the counter logic is protected. All database interactions are funneled through secure Next.js API Routes to prevent fraudulent count inflation.
Technology Stack
- Frontend: Next.js 15 (App Router), React, TypeScript
- Styling: Tailwind CSS
- Backend: Next.js API Routes, Supabase (PostgreSQL)
- Core Tech: HTML5 Canvas API for image manipulation
Outcomes
The result is a fast, secure, and highly engaging platform that successfully supported a significant social movement. It demonstrates the power of modern web technology to foster community and drive real-world impact, delivering a production-ready application that is both technically robust and thoughtfully designed.