I LOVE MY LAND

I ❤ ML was built around a single observation: during national holidays and sporting events, people flood social media with flag-overlaid profile pictures — but the tools to make them are either clunky desktop apps or low-quality web generators with no customisation. This project aimed to fix that with a fast, polished, browser-native experience.

The core of the app is a Canvas-based compositing engine. When a user uploads a photo or pulls in their GitHub avatar, the engine renders their image alongside a choice of frame styles — full overlays, corner badges, circular borders, and flag-waved backgrounds — all computed client-side with no round-trip to a server. The result downloads instantly as a full-resolution PNG.

The GitHub integration was a deliberate convenience feature. Rather than forcing users to save and re-upload their current profile picture, a username lookup hits the GitHub API and fetches the avatar directly. One field, one click, and the image is loaded into the editor ready to frame.

Frame styles are defined as composable layers — each style is a set of canvas draw instructions that sit on top of the base image. Adding a new flag or overlay variant means writing a new layer definition, not touching the rendering pipeline. This kept the codebase clean as the number of supported styles grew.

Performance was a priority from the start. All compositing runs on the main thread using the Canvas 2D API with careful attention to draw order and layer caching, so even large uploaded images preview and export without lag on mid-range mobile hardware.

Tech Stack

Next.js, TypeScript, Tailwind CSS, HTML Canvas API, GitHub REST API, Vercel