Project
Peak n Chill is an annual outdoor event in Switzerland. The site needed to handle two core flows: ticket purchasing via Stripe and a shared photo gallery where attendees could contribute and download images — building a collective point-of-view archive from the event.
The challenge was keeping the experience fast and lightweight while managing file uploads, payment webhooks, and a growing media library without a heavy CMS or framework overhead.
Features
- Stripe Checkout integration for ticket sales with webhook-based confirmation
- Drag-and-drop photo upload with server-side validation and compression
- POV gallery — attendees can browse, filter, and download all submitted photos
- Mobile-first layout optimised for on-site use during the event
- Admin panel for managing uploads and ticket entries
Technical Details
Built with no frontend framework — vanilla JavaScript handles all DOM interactions, the gallery masonry layout, and upload progress states. The backend is PHP, chosen for its simplicity and near-universal hosting support.
Stripe's Checkout Session API manages payments. On success, a webhook endpoint updates the database and triggers a confirmation email via SMTP. File uploads are validated server-side (type, size, dimensions) before being written to disk and registered in a lightweight SQLite store.
Upload flow
Client selects file
→ JS validates MIME + size before sending
→ PHP re-validates + resizes with GD
→ Stored in /uploads with a UUID filename
→ Entry written to SQLite
→ Gallery updates without page reloadGallery rendering
Photos are served from the API as a JSON array and rendered into a CSS-column masonry grid. Lazy loading is handled via IntersectionObserver to keep initial load fast even with hundreds of images.