Saving Trees With Free RSVP's

I got married in November 2017 and when planning the invites, we decided we didn't want to send out half a tree to each guest and decided to use our skills to make a website instead (my wife is a designer). The website has all the information about the venue, the day, the accommodation and a page for our guests to send their RSVP. As well as the reduction in paper, we felt our guests were more likely to RSVP quickly if they didn't have to physically post the RSVP back to us so it helps everyone out. We were very conscious not to go overboard on the site. We didn't want to spend months on it! It's a simple design with a simple implementation.

Initially I looked into existing services for the RSVP, and I very nearly used Rsvpify. It's a really great tool and reasonably priced. Our options for guests though are pretty straight forward, so I felt like the existing services were a bit overkill for what we needed. This is where I decided it might be fun to just build something myself.

I've used KnockoutJS a lot in the past and I knew this could help me create the RSVP form for people to fill in. It's been a while since I've used it, so I did need to dust off that part of my brain. Thankfully Knockout has greats docs and they helped jog my memory in a lot of places!

The RSVP page is pretty straightforward. I ask if they're a day or evening guest, then I ask for their email address and for that person to fill in the RSVP for their whole party. They then enter details for each guest in their party, answering some simple questions like are they attending, are they vegetarian, what's their favourite song. If they're a day guest, I also ask if they're interested in staying in a room at the venue. Knockout really helps with this conditional logic and also dynamically adding guests.

The bulk of the logic is in my view model which you can see here https://github.com/yellowbrickcode/wedding-web/blob/master/resources/scripts/ViewModel.js. All of the website code is on GitHub. Remember I did it in a weekend and my requirements were speed of development over perfect code, so don't judge me too harshly!

The next question was how do I get that information from the website, to me? I've been playing around with Azure Functions a lot recently so I decided that would be a good way to do it. I wrote a simple C# function that has a HTTP in binding that I POST to from the RSVP form. That accepts the JSON data from the website, and I use the Newtonsoft library to de-serialise it into a simple class I wrote that matches the structure of the JSON. I then use the SendGrid library to send 2 emails. One that will be sent to me to let me know the details of the RSVP, and another that will be sent to the email address given to let them know we've got their RSVP. These emails are sent using 2 SendGrid out bindings on the Function. I really can't express how quick it was to get this working. This is one of the many reasons I love to use Azure Functions and the simplicity of creating a SendGrid template and using the C# library to send it was a huge bonus. The official SendGrid C# library is on GitHub.

I got the RSVP part of the site working over the course of a weekend, spending most of Saturday and Sunday working on it (with quite a few breaks though). I refer to the RSVP's as "free" in the title, and in monetary terms they sort of are. I'm paying to host the site but I would have done that anyway, even if I had done the RSVP's through a third party service. The Azure Function is on the consumption plan and you get 1 million free executions a month. Thankfully I didn't have that many guests coming to my wedding! To try and avoid a bot filling in my form and submitting it so many times it would cost me money, I put in a really basic human check to answer a question to see the button. I considered using a proper captcha, but again it just felt like overkill for my requirements. For the emails, as I mentioned I'm using SendGrid. With my Azure account I get 25,000 free emails a month so again that more than covers my guest list.

As a project I really enjoyed working on it. I don't do much front end these days, so my behaviours are probably a bit out of date. I wanted to use it to get some more exposure to things like Grunt and SASS though. I definitely cut some corners in places. I used Bootstrap which was massive overkill for what I needed, but I know the library so it was quick and that was more important here. Overall it worked really well. Quite a few people used it on their mobiles, they all appreciated how easy it was for them to respond, and we had zero bugs reported which was pretty successful in my opinion!