Back to Projects

OAU-MATRIC

A web application that generates personalized matriculation congratulatory messages overlaid on user-uploaded images — built for OAU students celebrating a major academic milestone. No backend, no uploads to a server. Everything runs client-side using the Canvas API.

htmlcssjavascript
OAU-MATRIC

The Problem

Building an image manipulation tool that works entirely in the browser without any server infrastructure. The tool needed to feel instant — users upload a photo, see their personalized message overlaid immediately, and download the result. Handling different image sizes, aspect ratios, and text positioning across all of them cleanly required careful Canvas work.

The Solution

Used the HTML5 Canvas API to draw user-uploaded images and overlay customized congratulatory text directly in the browser. No file is ever sent to a server — everything happens locally, which makes it instant and free to run at any scale. Text positioning, font sizing, and layout adapt to the uploaded image dimensions. The output is downloadable directly from the browser as a clean image file ready to share.

// what I learned

Client-side image processing via Canvas is genuinely powerful and radically underused. This project taught me that not every feature needs a backend - and that choosing the right tool for the job sometimes means using platform APIs that most developers overlook. The zero- infrastructure approach also meant the app handled traffic from the entire OAU matric cohort without any scaling concerns.

Related Projects

All Projects -