A headshot of Joey.
  • react
  • bulma-css
  • openid-connect
  • mysql

Wedding website

Happily ever Hage 16x9

Instead of using a wedding website service like The Knot or Zola, I took the opportunity to use my React and front-end development knowledge to build one! Fortunately, my now-wife was very supportive and even helped mock up some designs because she enjoys graphic design. It was a fun project to work on together while we prepared for our nuptials.

The website itself was fairly simple although it got a little more involved when I decided to also use the website for RSVPs. My tech stack looked like this:

  • React single-page application

  • Digital Ocean server running Ubuntu

  • ExpressJS app for the API

  • MySQL database

I was also fortunate that we had already started creating our guest list of approximately 350 people using Google Sheets (about half family - my wife has a lot of cousins!). This allowed me to export the spreadsheet to a CSV and load it into MySQL once I built the tables. For simplicity, I created a tabled called invitation and a tabled called person, and each invitation could be associated with one or more people.

One of the great things about creating a database for this was that I could write scripts to query the database for different things like everyone who still hadn't RSVP'd or everyone who RSVP'd yes and send individual emails using the email service Mailgun. My best idea, I thought, was when I designed the RSVP page to check for a query parameter in the URL that strictly matched the format of a UUID, which was the primary key in the invitation table. From there, when I programmatically sent RSVP emails out, the link in each email was unique and when clicked, it would retrieve the RSVP information for that person when the page loaded so they didn't have to use the search bar and type in their name.

Everything was working great and I had a few friends do some beta testing for me. However, I quickly realized that my fiancée was going to want to check the status of RSVPs and she was definitely not going to SSH into my server. At that point, I added Auth0 to my tech stack and built another React app on a subdomain of the original site, portal.happilyeverhage.com. This is when I was first introduced to OpenID Connect. I then added some API endpoints to query the database for all invitations, allow searching for people, and calculate summary statistics. Then I added authentication checks for those API endpoints in my ExpressJS app so that even if someone discovered this subdomain and tried to curl the API directly, they wouldn't be able to access any information.

In the end, it was a very fun project, it worked great, and I learned about authentication using OpenID Connect.

Source code link

github.com