J&A Wedding Invitation

Overview

A password-gated digital wedding invitation for Jerome & Angela that handles guest RSVPs in real time — replacing paper reply cards with a live, filterable dashboard the couple can actually read and act on. A single-page, mobile-first site behind a 4-digit invite PIN, fully static with no backend server.

The Problem

Filipino weddings carry a large, formal guest list — principal sponsors, secondary sponsors, a full entourage — and traditionally rely on printed invitations with paper reply cards. That workflow is slow, easy to lose, and gives the couple no live view of who's coming, their meal choice, or dietary needs until reply cards trickle back by hand. The couple needed one private link, smart enough to collect RSVPs in a place they could act on.

The Solution

A single-page, mobile-first wedding site behind a 4-digit invite PIN. Guests tap the envelope to "open" the invitation, browse the story, schedule, venues, countdown, and full entourage, then RSVP directly. Every submission writes straight to Firebase Realtime Database and appears instantly on a private admin dashboard where the couple can filter by attendance, meal choice, or dietary requirements and export the whole list to CSV.

Key Features

• 4-digit PIN-gated entry, changeable by the couple from the dashboard
• Real-time RSVP capture (attendance, meal choice, dietary notes) with email-based prefill & edit
• Admin dashboard with SHA-256 login, 8 one-click filters, and CSV export for caterers
• Cinematic GSAP/ScrollTrigger experience: tap-to-open envelope, hero reveal, confetti, ambient music
• Full Filipino entourage layout with role/name/relationship hierarchy

Tech Stack & Why

• Vanilla HTML/CSS/JS — A one-time, content-driven site needs no framework; light and instantly loadable on guests' phones.
• Firebase Realtime Database — Live serverless data store; RSVPs hit the dashboard the instant a guest submits.
• Firebase Security Rules — The real backend: per-field validation, denied reads on the password hash, rejected unknown fields.
• GSAP 3.12 + ScrollTrigger — Reliable cross-device animation for the envelope open and scroll choreography.
• Web Crypto API — Hashes the admin password to SHA-256 in-browser; plaintext is never stored or sent.

Biggest Challenge

Securing a site that has no server. With a static frontend, anyone can read the JavaScript, so secrets and trust can't live in the client. The solution was to push all enforcement into Firebase Security Rules — strict per-field validation (email regex, PIN pattern, value whitelists, length caps, rejecting unknown fields) — and store the admin password only as a SHA-256 hash with reads denied. The client validates for friendliness; the database is what actually says no.

Results & Impact

• Replaces paper reply cards with one shareable link sent to every guest
• Real-time RSVPs land in a filterable dashboard with caterer-ready CSV export
• Runs at effectively zero hosting cost on Vercel's free static tier with automatic HTTPS
• ~4,500 lines of hand-written code — wedding date October 28, 2026

What I Learned

Security rules are a backend — a well-written ruleset can replace a whole serverless tier for a write-and-read app, but it demands schema discipline. Refactoring toward simplicity (removing an earlier Vercel Functions layer) made the project easier to reason about and deploy. What I'd do differently: move the invite-PIN check fully rules-side and add App Check or a CAPTCHA to harden the RSVP write against spam.