Building a Wedding Website

Using Javascript, React, and Gatsby

Building a Wedding Website

Amidst the craziness of 2020, on top of the craziness of a career change, a job hunt (and adopting a puppy for good measure), I got married! For the health of our loved ones, my husband and I had a very small ceremony with only immediate family members, but we still wanted to include those friends and family that couldn’t join us in person. We decided we should make a wedding website to share our day with our friends and family. Since our needs were so specific, rather than using a wedding website service, I decided to code it myself!

Getting Started

Since we wanted our website up and running as soon as possible, and since I was splitting my attention between building the website and planning a wedding, I decided to start with a Gatsby starter. There aren’t any Gatsby starters specifically intended to be used as wedding websites, so while browsing the Gatsby starter library, I was looking for a starter that was minimal enough to allow me room for customization. Before starting, I knew the primary function of our website would be to direct our virtual guests to the livestream of our ceremony. We also wanted space to share details about the big day and stories about our relationship. We were also considering adopting the website after the ceremony to share wedding pictures with friends and family.

A screenshot of the original Gatsby starter template this project was built from - the heading reads "Welcome To Our Studio! It's nice to meet you" above a background image of everyday carry items such as headphones, a watch, sunglasses, and a wallet The original Gatsby starter

I ultimately chose the startbootstrap-agency starter from Thundermiracle. This starter was designed to be a business landing page, but I liked that it had a clean design that would look good in both mobile and desktop views; it had a call to action button that I could use to direct our virtual guests to the livestream, and the “portfolio” section looked like something I could adapt to display our wedding photos. As a bonus, the “about” section featured a timeline that I could use to share details of our relationship.

Adding Functionality

Upon selecting a starter, I first set to work reorganizing and deleting unnecessary sections and updating images and content within the preexisting framework. I also updated theme colors and fonts to match our aesthetic. In order to have a minimally viable product, I added a message at the top of the page, as well as a link to our livestream.

The MVP wedding website

Once I had a minimally viable product, I began building out additional features for the site. First, I added a countdown feature to the site. This was both a feature to build anticipation of the event, and a way to customize the display depending on when the user was accessing it. By using a countdown feature, which I implemented using the react-countdown library, I was able to build multiple versions of the page: one version for our page’s visitors in the days and weeks leading up to the event, another version for visitors on the day of the ceremony.

Using React Libraries to Optimize User Experience

A demo of the implementation of React libraries - clicking the wedding hashtag copies the text to the user's clipboard so they can use it on social media, and clicking the "add to calendar" button gives the user the option to create a calendar event in Apple, Google, Outlook, or Yahoo

Some of the additional features: copy-to-clipboard and add-to-calendar

After looking over the page I had built, my husband and I came up with some additional features that would make the page more useful for our guests. He had the great idea of adding an “add to calendar” button at the top of our page, to help our virtual guests remember to log on for the livestream. To do this, I utilized the react-add-to-calendar library, and customized the display to blend in with the rest of our page. I also reused the react countdown library so that I could display the add-to-calendar button leading up to the ceremony, but hide it once the day had arrived, as its functionality would no longer be useful at that time. On the day of the ceremony, the “add to calendar” button would be replaced by a “watch the ceremony” button.

Like any good millennial couple, we also had a wedding hashtag for our virtual guests to use if posting to social media. I turned all references to this hashtag into a clickable button that would copy the text to the user’s clipboard. To do this, I utilized the react copy-to-clipboard library, as well as the react toast-notifications library for an aesthetically pleasing way to alert the user to the action taken.

Challenges

What surprised me about this project was that the most challenging part of coding it was not adding new features, but rather tweaking existing ones. As a Gatsby starter, the code was written to allow for some superficial customization very easily. The text and images displayed on the page were intended to be replaced, so it was easy to find where to edit this information in the code.

The rest of the code was not written to be easy to navigate, but rather to allow a user to easily make those superficial changes, and have those changes automatically permeate throughout the code. I wanted to write user-friendly code that could potentially be used by others looking to make a similar wedding website, which ruled out the option of hard-coding my adjustments as a workaround to integrating them deeper into the code.

Some features that I anticipated being difficult to implement, like the countdown feature and time-sensitive displays, came down to a matter of carefully reading the documentation for various React libraries.

Other features that seemed much simpler in theory, like turning images into links in the “giving” section, were much more difficult. Because this change required making adjustments to existing code, I needed a comprehensive understanding of how that code worked. I realized in the process that the codebase relied often on mapping through arrays and passing props through many generations. Keeping a clear mental image of the data flow was difficult but crucial for making these deceptively simple tweaks to the website.

Next Steps

Now that the wedding ceremony has happened, the purpose of our wedding website has shifted slightly. Instead of directing our friends and family to the livestream of the ceremony, it will be a place to share photos, videos, and highlights from our wedding. I will add a gallery and/or carousel to highlight wedding photographs.

I will also be further cleaning up the code in order to make it as user-friendly as possible for future users who might want to use it as a template for their own wedding websites. Stay tuned for the final product!

Wedding website code

Gatsby starter