BriskWalk
Event registration platform for PPI Malaysia's annual community charity walk. Designed in Figma, built with vanilla HTML/CSS/JS, multi-step form, client-side image compression, and a Google Sheets backend.
BriskWalk is the event registration platform I designed and built for PPI Malaysia's annual community charity walk, a single-page, mobile-first form that participants fill out on their phones to sign up, pay the registration fee, and upload proof of payment, all in one flow.
I designed the UI in Figma, then built it in vanilla HTML, CSS, and JavaScript — no framework, because the form does one job: collect a participant's details fast on a phone, on a slow connection, at a crowded booth.
Registration ran from 13 March – 3 May 2026 for the walk held at Dataran Putrajaya on 10 May 2026, with a flat RM15 registration fee redeemable for food and beverages at the event booth.
The registration form as participants saw it, plus the event identity it was built around.
Every participant uploads a payment proof screenshot before submitting. Rather than send the raw file straight to the backend, the form compresses it client-side using the Canvas API before upload:
FileReader and drawn onto an off-screen <canvas> element.canvas.toBlob(), typically cutting file size by 70-90% versus the original camera screenshot.The uploaded image is read via FileReader and drawn onto an off-screen <canvas> element.
Images wider than 1400px are downscaled to fit, since a payment screenshot never needs to be larger than that to stay legible.
The canvas exports to WebP at 78% quality via canvas.toBlob(), typically cutting file size by 70-90% versus the original camera screenshot.
The compressed blob is sent to the backend, keeping every submission fast even on weak mobile data.
There's no traditional server here, the whole backend runs on Google Apps Script, deployed as a web app endpoint that the registration form posts to directly.
- Participant details (name, university, WhatsApp number) are appended as a new row in a Google Sheet, giving the PPI Malaysia organizing team a live, shareable spreadsheet of registrations with zero extra tooling.
- The compressed payment proof image is uploaded straight into a Google Drive folder, named and linked back to its corresponding sheet row.
- This kept the entire project free to run and easy for non-technical committee members to check and verify payments without needing a dashboard or login.
The layout is split into two stacked sections so the form never feels overwhelming on a small screen: participant details first (name, university, WhatsApp number), then payment second (QR code, bank transfer details, and the upload field).