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.
🎀 The Story Behind the Celebration
The arrival of a first child is a milestone like no other. For Marvin & Keicy, the journey to "Baby M" deserved a digital space that felt as warm and inviting as their home. I built this site to bridge the distance between family and friends, allowing everyone to participate in the excitement of the gender reveal.
The "Invite-Only" RSVP system wasn't just about security; it was about ensuring the event felt intimate and personal. The moderated guestbook has since become a living keepsake—a digital time capsule of the love and well-wishes Baby M received before even entering the world.
✨ 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 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
🩵🩷 Gender Prediction Poll
An interactive, real-time voting section where every site visitor can cast their prediction. The live poll tally updates instantly, showing the percentage split between Team Boy and Team Girl.
📖 Guestbook – Messages for Baby M
A public-facing guestbook allows anyone who visits the site to write a personal message. All submitted messages are reviewed before they appear publicly, ensuring only appropriate and heartfelt messages are displayed.
🛠️ Tech Stack
Front-end:
Next.jsTypeScriptTailwind CSS
Back-end:
SupabasePostgreSQL(Moderation Queue logic)
📸 Screenshots
The following images walk through the full guest experience:
This website was lovingly crafted to celebrate the arrival of Baby M and preserve memories for Marvin & Keicy's growing family. 🍼