Web Development

How we built the dynamic tickets feature for Builder Accelerate

March 6, 2024

Written By Vishwas Gopinath

On March 13th, we will host Builder Accelerate, an AI launch event focused on leveraging AI to convert designs into code with your design system. As part of the registration experience, we’ve introduced a feature which allows the generation of a personalized event ticket based on the user's domain. For example, twitch.com will produce a ticket infused with Twitch's brand colors:

In this blog post, I’ll break down this feature using React for the frontend and Express for the backend (though it was originally built with Qwik). We will focus primarily on the concept without diving too deeply into the specifics of frameworks being used. You can find the source code on my GitHub repo.

If you're someone who learns best through visual content, check out the video tutorial.

Setting up your project

We'll start by setting up a React application using Vite and a Node.js Express server. The goal is to create an API endpoint in Express that returns necessary ticket information based on a given domain, focusing primarily on brand colors.

The Express server

First, let's dive into the Express server setup. We'll use the express and cors packages to create a basic server:

Our server runs on port 3000, and visiting localhost:3000 displays a "Hello World" message.

Generating primary and palette colors

We introduce a /ticket route that takes a domain as a query parameter. We then construct the URL to fetch the favicon associated with the domain. Google provides a convenient URL format to retrieve a site's favicon:

Using the colorthief package, we extract the primary color and a palette of colors from the favicon:

Here, primaryColorRGB holds the RGB values of the dominant color, and paletteRGB contains an array of colors representing the favicon's color palette.

Generating the secondary color

The secondary color is chosen to provide a good contrast with the primary color.

Define a function to calculate the distance between two colors in RGB space. This helps in finding a color in the palette that is most dissimilar to the primary color:

Iterate through the palette to find the color that is furthest away from the primary color:

Call this function with the primary color and the palette to determine the secondary color:

Determining if a color is dark or light

To ensure the text on the ticket is readable regardless of the background color, we need to determine whether the color is dark or light. Implement a function to check the luminance of a color:

1. Calculate relative luminance: The luminance of a color is a measure of the intensity of the light that it emits. Use the following function to calculate it:

2. Apply the function: Use this function to determine if the primary and secondary colors are dark or light. This information is crucial for setting the text color on the ticket for optimal readability:

Now that all the ticket information has been calculated, return the domain, the favicon URL, the primary color in both RGB and hex formats, the secondary color in both RGB and hex formats, and whether the two colors are dark.

If you navigate to localhost:3000/ticket?domain=builder.io, you should see the API returning the ticket information.

Connecting the React frontend

In the React frontend, create an input field to accept the domain and a button to generate the ticket. The frontend communicates with the Express backend to fetch and display the ticket information. I’ve taken the good-enough-is-fine approach to writing the React code. Here’s the most basic code to get it working:

The ticket component

Create a Ticket component in React to display the ticket and use the fetched color data to dynamically style the ticket based on the input domain's brand colors:

With TailwindCSS, remember that dynamic class names that aren't composed properly won't be compiled. You can address this in a clean way, but for simplicity, I've chosen to use the style attribute.

We add extra zeros to the start of the ticket number to ensure it's 7 digits long using the padStart method on a string.

Conclusion

This feature is a great addition to event registration processes, adding a personalized touch for attendees. Experiment with the code, adapt it to your needs, and integrate it into your projects to see how dynamic ticket generation can elevate your user experience.

Introducing Visual Copilot: a new AI model to convert Figma designs to high quality code in a click.

No setup needed. 100% free. Supports all popular frameworks.