Curtis & Angelica

A wedding website & RSVP service

Curtis & Angelica is a web application developed to allow invited guests to easily respond to the wedding invitation, send a short note to the bride & groom, as well as change their RSVPs (if they need to) up until the specified RSVP deadline.

This web app also allows the bride & groom to see their guest list, review the status of the RSVPs, who have accepted, not responded or declined, all in a password-protected admin view.


Technology, Language & Libraries

HTML, CSS, LESS, JavaScript, Handlebars, Bootstrap, PHP, SQL, Google Maps API


Motivation

The bride & groom needed a convenient way to track their guest list and RSVPs for their wedding. Their invited guests are spread out in many different cities and countries and no doubt that sending RSVPs through the mail will be a slow process, and in this day and age, just outdated.

Features

Search

Guests can RSVP by searching for their first & last name or searching for anyone in their party. If their search is successful, it brings them to the next view, which is a list of guests in their party.

* For privacy reasons, note that all guest names and email addresses below are fictional.

Search by first name and last name
Search by first name and last name

The user can then select 'Accept' or 'Decline' for each guest in the party. Some guests will also have the option to add a plus one, if the bride & groom had allowed it. Each guest will also have the option to specify any dietary restrictions, which allows the bride & groom to plan their food options for their wedding reception.

RSVP for your party
RSVP for your party

rsvp note
Leave a note for the bride & groom
rsvp submit
RSVP submit confirmation
Admin View

The bride & groom can view the guest list, RSVP status, and messages from guests by accessing the password-protected admin view. This simple login uses a hash algorithm for a safe and secure authentication.

Admin view - login page
Admin view - login page

Guest List

Site admins will have access to see the guest list and responses, as well as a chart to visually see the percentage of guests who have accepted, not yet responded and declined. They will also have the ability to sort the list by first name, last name, group number, status and last modified date.

Site admins will also have the ability to download a .CSV file of the guest list.

* For privacy reasons, note that all guest names and email addresses below are fictional.

Admin view - guest list
Admin view - guest list

admin messages
Site admins can also access the notes and messages sent by their guests.
admin settings
Site admins can also update the RSVP deadline, should they wish to extend it, or make an earlier cut off.
Google Maps

I used the Google Maps API to mark the two key locations: the wedding ceremony and wedding reception. This allows out-of-town guests to easily plan their stay in the city, and find their way in between locations during the wedding day.

Google Maps with location markers for the wedding ceremony & reception
Google Maps with location markers for the wedding ceremony & reception

Responsive Design

mobile hero iphonex 2x mobile schedule iphonex 2x mobile rsvp iphonex 2x
tablet hero ipadair2 2x tablet schedule ipadair2 2x

Approach

Project Planning & Timeline

Like any other projects that I work on, I always start by making sure that I have a schedule and reasonable timeline that I can work with. I started this project on August 2017, shortly after the bride & groom had decided when their wedding date will be.

The bride & groom pretty much left it up to me to come up with the design and structure of the site, but keeping the following requirements in mind:

  • Have a platform for guests to accept or decline the wedding invitation
  • Have a convenient way for the bride & groom to keep track of the guest list & RSVP status
  • Open the RSVP to guests (i.e. Go Live) by end of October 2017
  • Auto close RSVPs by February 2018
Design

The bride & groom decided on a navy blue & gold theme for their wedding. Hence, it is only fitting to have this reflected on their web site. With this, I came up with the following colour palette to use throughout the site:

color palette

Implementation

As a developer, I always want to keep learning whether it's a new technology, a new library, language, or tool. And for me, learning goes far more than just reading documentation and manuals, or watching tutorial videos. I need to be hands-on (literally) and keep typing.

So I wanted to take this project as an opportunity to practice with a new language. This was my primary motivation for using PHP in this project. I've learned PHP a couple of years ago but have not had any chance to use it entirely to create something useful.

For the RSVP service, all guest information is stored in a MySQL database and I used PHP to query and update the data whenever a guest does a search query, or when they submit their response.

For front end, I used Handlebars to easily render the JSON data within the template.

Challenges

The main challenge for me is the short timeline. When I worked on this, I had a full time job in Vancouver. I started this project on August 2017 and the target Go Live was October 2017. That meant that I only had 3 calendar months to work on this web app.

More Challenges

To add more time restrictions, a week after I started this project, the company that I worked for sent me on a business trip to lead a project in London, UK. That definitely took more of my time throughout the couple of months that followed. Curtis & Angelica became my weekend project and I was running behind schedule. Luckily, the bride & groom were a little flexible and had agreed to push the launch to mid-November.

Retrospective

There are many improvements to be made and more features were planned, but due to the very short timeline, these were not implemented.

However, the project was successful overall. We launched the web site in November 2017 and it was up until May 2018 until the wedding was over.

Tracking

Below is a map of where this web site was accessed around the globe. Most site visitors are located within Canada, USA and Philippines.

map visitors
Site visitors around the world
map visitors ca usa
Site visitors in Canada and USA