A Secret Santa, from sign-up to the door

A web app for a student Secret Santa in Barcelona: sign-up, the organisers' desk, the draw, the emails with QR tickets, and the scanner at the door. Built for the four ESADE students who run it.

Design and full-stack build · 2026

  • React
  • TypeScript
  • Firebase
  • Resend
  • Vercel

The idea

Four MIE students at ESADE wanted a way to meet people that doesn’t feel like networking. Their answer is a Secret Santa. Everyone signs up with a photo and what they’re into, pays €10, and is matched with someone to buy a gift for, about €15. On 28 November everyone meets at a party with a DJ, swaps gifts, and finds out who had them.

They asked me for all of it: the page people sign up on, and everything the four of them need to run the season, from the first sign-up to the door.

How it’s built

  • React and TypeScript, Firebase for the data and the organisers’ Google sign-in, emails through Resend, on Vercel.
  • Every organiser action is written once, and runs the same against Firestore or, in the demo, the browser’s own storage.
  • Anyone can sign up, but only the organisers can read the list, and nobody can change a sign-up from a browser.
  • Email apps don’t show images embedded in the HTML, so the QR and the giftee’s photo are served as images, and only for a valid ticket.
  • The door reads QR codes with the browser’s own barcode reader where there is one, and with jsQR on iPhones.

The screens below come from its demo mode, which runs the whole season in one browser with made-up people and sends nothing.

Screen by screen

  1. Signing up

    Guests · until 22 Nov

    The page opens wrapped like a gift. One form asks for a photo, a name, a Gmail and up to five interests.

    • The landing page: Secret Santa, the date, DJ and drinks, €10 entry, Join the draw, and the days left to sign up.

      The event

      Date, entry, the gift budget and the sign-up deadline, counted down.

    • The sign-up form: a round photo (a drawing of Santa), first name Nico, surname Klaus, and the Gmail field.

      The form

      The photo is cropped and shrunk in the browser. The same Gmail can't sign up twice.

  2. The organisers' desk

    Organisers · until 22 Nov

    Everyone who signs up lands on the desk. Nobody is told they're in until an organiser has marked them paid.

    • The organisers' desk, People: 13 signed up, €100 paid in, 3 waiting to pay, each person with their code and a Mark paid button.

      People

      Searchable by name, email or code, with a CSV export. Mark paid sends the first email.

    • Email 1 open in a phone's mail app, from Secret Santa: You're in. We got your €10, with the code, when sign-ups close, the party and what to bring.

      Email 1: You're in

      Sent once, even if someone is marked paid twice.

  3. The draw

    Organisers, then guests · after 22 Nov

    Everyone who paid goes into one loop, each buying for the next, so nobody draws themselves and no two people have each other. Nothing is sent until an organiser has checked the pairs.

    • The Draw tab: Drawn by an organiser, 11 people matched, Undo the draw, and the list of who buys for whom, each with Change and Ticket.

      Check who has whom

      Any pair can be changed, and the draw undone, until the emails go. Late payers slot into the loop afterwards.

    • Email 2 open in a phone's mail app, from Secret Santa: You're Santa for, with the person's photo, name and interests, the gift budget, the party, and the start of Your ticket.

      Email 2: the match

      Who they're buying for, with photo and interests, and their QR ticket. The QR also opens a ticket page, in case the email gets lost.

  4. The night

    Organisers · 28 Nov

    Organisers scan tickets with their phone's camera, a few at once on the same list. Any QR that isn't a ticket is turned away, and guests without their phone are found by name.

    • The door: green, Welcome in, a drawing of Santa as the made-up guest Nico Klaus, Check it's their face.

      Welcome in

      The face comes up big, to match against the person at the door.

    • The door: amber, Already in since 21:04, the same Santa drawing, and a warning that it may be someone else's screenshot.

      Already in

      The same ticket twice is likely a shared screenshot.

secretsanta-bcn.com Back to Projects