Dynamic Guest List Management

Couples have full control over their guest list through a dedicated admin dashboard. Each invited party is displayed in a sortable table, with detailed fields including guest names, party size, RSVP status, and contact information.

I implemented a search and filter system to allow couples to quickly locate guests or narrow down the view by RSVP status (e.g., Attending, Declined, No Response). This makes it easy to plan seating or follow up with those who haven’t responded.

To support both manual entry and bulk uploading, I added the ability to import guest data from a CSV file. The system parses the file, validates each entry, and populates the dashboard accordingly. Couples can also export their full guest list to CSV, providing a reliable backup and a simple way to share data with vendors.

All create, read, update, and delete (CRUD) actions are handled through Next.js API routes and persist to MongoDB, while React state management keeps the UI responsive and real-time.

Custom RSVP Flow

Guests receive a personalized invitation that includes a unique QR code linking directly to the RSVP page. Upon arriving at the page, they are prompted to search for their party by entering any name associated with their group.

Once a party is selected, the app checks their RSVP status. If they have not yet responded, a dynamic RSVP form is displayed. This form automatically adjusts based on the number of guests in the party, allowing each individual to indicate whether they’re attending, choose meal preferences, and leave optional notes (such as dietary needs, song requests, or accessibility requests).

If the party has already submitted an RSVP, they’re taken to a confirmation page summarizing their responses. From there, they can click an "Edit RSVP" button to make changes if needed — a feature designed with flexibility and real-world use in mind.

I handled conditional rendering, form state, and dynamic field generation using React, with all data stored and retrieved via Next.js API routes and MongoDB. Form validation ensures required fields are completed before submission, and success/failure feedback is clearly communicated to the guest.

This flow not only simplifies the RSVP process for guests, but also ensures accurate, structured data for the couple’s planning needs.

Conditional Logic & Input Validation

To create a smooth, scalable RSVP experience for guests of all types, I implemented robust conditional rendering and custom validation logic throughout the RSVP flow.

The forms dynamically adjusts based on user input:

• If Decline is selected in the admin edit form, all unnecessary fields (meal choices, etc.) are hidden to reduce friction.
• If Attending is selected, additional fields appear.
• When adding guests, the user has the option to add a Plus One or include children in the party. Adding either dynamically generates additional input fields, each with its own validation logic and attendance tracking.

Each member of the party can be RSVP’d individually. The system ensures that required fields are completed for every attendee before submission is allowed. To prevent incorrect or partial data, the form includes:

• Real-time validation and visual feedback for required fields
• Conditional disabling of the submit button until the form is valid
• Input sanitization to prevent injection and formatting issues

All form responses are immediately stored in MongoDB and reflected in the admin dashboard. A post-submission confirmation screen summarizes responses, with an “Edit RSVP” option in case guests need to make changes later.

These features were implemented using controlled components in React, ensuring that all form logic is centralized, reusable, and easy to maintain.