Live Event Photo Submission & Display System

The Challenge: For a recent live event, our client needed an engaging, real-time solution to capture and showcase audience photos in a dynamic, on-screen presentation. The goal was to enable attendees to quickly upload or capture event-themed photos on their mobile devices, have those submissions moderated in near‑real time, and then display the approved images on large screens during the live event. The project had to be lightweight, user‑friendly, and support both vertical and horizontal photo orientations while delivering smooth transitions and countdown animations between slides.

Tech Stack:

• Next.js 15 (App Router):

  Provided a robust framework for building a single‑page web app with both frontend and backend API routes.

• Tailwind CSS:

  Enabled rapid, responsive, and visually polished styling, including custom animations and gradient backgrounds.

• Firebase Firestore & Storage:

  Offered real‑time database capabilities and secure, cost‑effective storage for image files. This unified ecosystem minimized overhead, allowing for live updates and simplified management of submissions.

The Solution: Our solution was built as a single‑page application featuring three core components:

1. Submission Interface: A mobile-optimized form allowed event participants to either capture or upload their photos. An optional caption field enabled users to add context or hashtags, and clear consent text ensured that submitted photos could be showcased during the event.

2. Admin Moderation Panel: A secure, basic‑authentication protected panel enabled quick, real‑time moderation. Moderators could review incoming submissions and approve or reject them instantly. Approved photos were then updated in the Firestore database, triggering immediate display updates via real‑time listeners.

3. Live Display Interface: Designed for a 16:9 aspect ratio display, this interface cycled through approved images with a visually engaging fade‑in effect and a custom countdown circle that animated over the 7.5‑second slide duration. The design features a modern gradient background, with the event title “Easter at Saint Helen” (adjusted to reflect the live event context) positioned at the top left of the screen. Captions appeared seamlessly within the image card when provided.

By leveraging a unified tech stack and real‑time data updates, we delivered a polished and scalable solution that transformed the live event experience. This system not only enhanced audience engagement but also streamlined the process of content moderation and display, ensuring that every approved photo contributed to a vibrant, dynamic live event atmosphere.