Baby M's Gender Reveal is a full-stack celebration website built for Marvin & Keicy's upcoming bundle of joy. It combines intimate invite-only RSVPs, real-time gender prediction polling, and a heartfelt moderated guestbook — all wrapped in a playful, pastel-themed design complete with ambient music that greets every visitor the moment they land on the page.
Key Features
- Invite-Only RSVP System: Guests can only submit their attendance confirmation using a unique invite code — no anonymous walk-ins, keeping the event list personal and curated.
- Live Gender Prediction Poll: Visitors cast their vote for 👦 Boy or 👧 Girl and watch the results update in real time, building excitement before the big reveal.
- Moderated Guestbook: Anyone — invited guest or curious visitor — can leave a heartfelt message for Baby M or the parents. All submissions go through a moderation queue before appearing publicly on the site.
- Ambient Welcome Music: A cute, celebratory tune begins playing automatically when a visitor lands on the site, setting the perfect festive mood from the very first second.
- Countdown Timer: A live countdown clock ticks down to the exact moment of the gender reveal event, building anticipation for all guests.
- Responsive & Mobile-Friendly: Fully optimized across all screen sizes — guests can RSVP, vote, and leave messages seamlessly from their phones.
- Pastel Celebration Aesthetic: A soft, whimsical design with gender-neutral pastel tones that transitions playfully between pink and blue visual cues throughout the experience.
Feature Sections
🏠 Hero / Landing Section
The landing experience welcomes visitors with Marvin & Keicy's names, a warm announcement of Baby M's arrival, and the ambient background music that starts playing on load. The hero sets an immediately celebratory and intimate tone.
⏳ Countdown Timer
A live countdown is prominently displayed, showing the days, hours, minutes, and seconds remaining until the gender reveal event. This keeps anticipation alive for all invited guests leading up to the celebration.
💌 RSVP – Invite-Only Attendance
The RSVP section is protected behind a unique invite code system. Only guests who have received a physical or digital invitation with a valid code (e.g., MAEVE) can access and submit the RSVP form. This ensures:
- No anonymous or uninvited submissions
- Accurate headcount for the event organizers
- A secure, personalized experience for each invitee
Once the invite code is validated, guests fill in their attendance details and receive a confirmation message upon successful submission.
🩵🩷 Gender Prediction Poll
An interactive, real-time voting section where every site visitor — not just invited guests — can cast their prediction for whether Baby M will be a Boy or a Girl. The live poll tally updates instantly, showing the percentage split between Team Boy and Team Girl. This creates a fun, communal guessing game that keeps guests engaged well before the reveal.
📖 Guestbook – Messages for Baby M
A public-facing guestbook allows anyone who visits the site to write a personal message to Baby M or to Marvin & Keicy. Key characteristics of the guestbook:
- Open to all visitors — no invite code required to leave a message
- Moderation queue — all submitted messages are reviewed before they appear publicly, ensuring only appropriate and heartfelt messages are displayed
- Living keepsake — the approved messages create a beautiful, permanent digital memory book for the family
🎵 Ambient Background Music
A charming, looping tune plays automatically upon visiting the site. The music adds a celebratory warmth to the experience and complements the whimsical visual design, making the site feel more like a celebration than a static page.
Impact
- Created a meaningful digital space for family and friends to participate in one of life's most joyful milestones
- Ensured event integrity through invite-code-gated RSVPs, giving the parents full control over attendance
- Fostered community excitement with a live real-time poll that gets visitors talking and predicting
- Preserved heartfelt messages from loved ones in a moderated, permanent digital guestbook
- Delivered a polished, mobile-first experience accessible to guests of all ages and technical backgrounds
Tech Stack
Front-end:
Next.jsTypeScriptTailwind CSS
Back-end:
SupabasePostgreSQL
Screenshots
The following images walk through the full guest experience — from landing on the page to leaving a message for Baby M:
This website was lovingly crafted to celebrate the arrival of Baby M and preserve memories for Marvin & Keicy's growing family. 🍼