People love swag! Swag (short for “stuff we all get”) are those promotional marketing items like water bottles, pens, t-shirts, etc. that are popular at conferences and events. Swag often generates as much excitement as the main conference sessions with attendees making swag acquisition their main priority. I’ve even seen fights over the last piece of premium swag.

At large conferences with hundreds of booths and thousands of promotional items, it’s easy for attendees to miss out on the best swag. It can also be hard to keep track of what swag you’ve already collected and what swag you still need to get. To solve these problems, as well as demonstrate how Algolia’s real-time search tools can be used for much more than just online shopping, we built the event support app, SwagSearch. 

It tackles issues that big conferences pose for the enthusiastic swag hunter. It surfaces swag hidden at hard to find booths and keeps track of the booths that you have already visited.

SwagSearch is a helpful product that:

• Makes discovery easy: Centralize all swag in one digital app so attendees know what’s available and where to find it.

• Has real-time updates: Let event staff and vendors add new items on the fly, ensuring up-to-date info on items that might go out of stock or appear mid-conference.

• Increases brand visibility: Give sponsors, vendors, and brands a chance to highlight their coolest items and attract attendees.

The vision

Let’s take a look at the app.

SwagSearch features a main search bar for quickly finding items. The navigation allows attendees to search for specific vendors, surface random items, or review the swag they’ve already collected.

The app also provides vendor information and location on a zoomable map. 

For favorited items, the app can display items that are visually similar.

For vendors, the intuitive dashboard makes it easy for them to upload photos, add, edit, and review items.

Our plan was to not only create a great app experience, but also showcase Algolia in the wild at the AWS Reinvent conference. 

To do this, we built SwagSearch under the following constraints:

• 45 days to build

• 1 main contributor

• 400+ companies to index

 

The tools

We used Next. js as the framework, as it is the perfect choice for quickly developing web applications.

• Server-side rendering (SSR) and static site generation (SSG): Allow for faster load times and improved SEO by pre-rendering pages.

• Built-in API routes/file-based routing: Simplifies backend tasks such as handling form submissions, user authentication, and real-time updates.

• Optimization: Such as code-splitting and link prefetching for faster and more responsive browsing.

• Handling image optimization: Automatic image optimization out of the box helps deliver responsive images faster, improving user experience.

• Easy data fetching: Easily generate content at build time or on every request.

• Caching: So the app doesn’t have to fetch new data every time someone visits the page.

Since we had only a few days to build the app, we felt it was best to stay in one environment using a single product. Algolia was used for everything from the dashboard to the application. This “octopus” architecture covers every aspect of the application:

• Backend: Uses a node script to get company info from the conference website.

• Frontend: Uses a mix of Algolia Search and InstantSearch (React and Hooks).

• Recommendations: Uses Algolia Recommend with the Looking Similar model

• Analytics: Uses metrics such as popular searches, no results, and click-through rates to see insights into what your users search for and select.

To build the search experience we needed at least six indexes:

Swag index
Contains all approved items ready for public display.

Companies index
Stores details of each vendor or booth (e.g., booth ID, brand name, location on the expo map).

Two companies virtual replicas

Indices for custom sorting and ranking strategies, like prioritizing the "most-favorited" swag items.

Looking Similar index
Powers the visual-recommendation feature. For example, if you’re viewing a skateboard, the app suggests other items that look like a skateboard.

Review index
Temporary holding place for newly added swag awaiting acceptance.
 

Building the application

The home page has three different carousels where you can browse swag. They’re all fetched server-side with different sorting capabilities and options for each. Additionally, the last row features random sorting to increase discovery and ensure all brands get some visibility. 

To fetch all these hits we use the Algolia browse method where it targets the Companies index and the browse parameters, hitsPerPage and attributesToRetrieve, to reduce load times and make the app faster.

export const fetchAlgoliaHits = async (
indexName: string,
params?: BrowseParams
) => {
try {
const { hits } = await algoliaClient.browse({
indexName,
browseParams: params || {
},
});
return hits;
} catch {
return [];
}
};

These functions are used to sort the hits on the server.

• sortedByDateSwag makes sure that the most recent swag appears first.

• sortedByFavoriteSwag sorts by favorite.

• sortedByRandomSwag generates a true or false value randomly appended to the array. It’s then sliced and sent directly to our application through the server-side page component. 

const sortedByDateSwag = [...validSwagItems].sort((a, b) => {
return new Date(b.added_on).getTime() - new Date(a.added_on).getTime();
});

const sortedByFavoritesSwag = [...validSwagItems].sort((a, b) => {
return b.favorite - a.favorite;
});

const sortedByRandomSwag = [...validSwagItems].sort(
() => 0.5 - Math.random()
);

const recentSwag = sortedByDateSwag.slice(0, 15);
const favoritedSwag = sortedByFavoritesSwag.slice(0, 15);
const randomSwag = sortedByRandomSwag.slice(0, 15);

In the application UI you can see the drop down that uses React InstantSearch with React Hooks. A single multi-index component is used to render both lists which we call federated search. The swag uses custom ranking based on the value of the favorite attribute.

On further inspection, you can see that the green square rectangle is actually the InstantSearch React component and contains two hidden views: the swag index on the left and the company index on the right.

Looking at the code, you can see how it works.

The InstantSearch contains a Configure component to pass AnalyticsTags and HitsPerPage. It then loads CustomHeroHits.

Inside CustomHeroHits is an Index component wrapped around CustomHits, which are actually the Companies hits. 

The Companies index uses IndexName value from the InstantSearch component. Then with React Hooks, useHits, it serves the hits to the Companies index.

Likewise, CustomHits inside the Index component targets the Swag index.

As you can see, the single component, CustomHits, uses React Hooks to serve two different types of results each with their own context.

Finally, the SwagSearch app uses Looking Similar, an AI recommendation model that surfaces items based on image similarities. It is easy to set it up in a few minutes as it doesn’t require any events.

What other event apps could you build with Algolia?

SwagSeach is a perfect example of how you can use Algolia to build real-time search solutions. It solves the problem of being overwhelmed by trying to find the best swag at large events 

With the right tools, building a real-time search platform in under two months is absolutely achievable. By leveraging Next.js for flexible rendering and Algolia for search, indexing, moderation, and recommendations, you can ship a user-friendly application that encourages exploration, captures analytics, and assists attendees at any event.

Whether it’s for conferences, ecommerce, or internal inventory, try creating your own SwagSearch-style discovery app. 

Watch my DevBit presentation on how Algolia’s platform can help event attendees discover and collect swag here.

To learn more about Algolia’s AI-powered real-time search solutions, contact our team for a demo.