Blog

Celebrating the winners of Packathon 2024

Margaret Julian · Director of Product Marketing

Let's explore Packathon projects.

For each project, you'll get to meet the team, see what they built and why it stands out, and explore interactive demos / code snippets / Github repos that you can pick up and run with.

Swipe right on your favorite products (Grand prize)

Build custom products (Best use of Pack + Buy with Prime prize)

Reimagine Hydrogen: from storefronts to landing pages (Best use of Hydrogen prize)

Generate shopping content with AI (Most technically impressive)

Supercharge influencer funnels (Most innovative shopping experience)

Bring shopping to life in 3D (Most fun / best easter egg)

Honorable mentions

Huge thanks to our sponsors: Amazon Buy with Prime, Rebuy, Bear Group, Akantro, Fueled.io and Spacebox Digital!

Swipe right on your favorite products—a gamified, Tinder-inspired shopping experience, grand prize winner @ Packathon 2024

Swipe right on your favorite products (Grand prize)

Ditch the static quizzes and endless scrolling through static product category pages. We LOVED (and we know shoppers & merchants will too) this Tinder-inspired, gamified shopping experience that gives shoppers a quick, mobile-friendly way to find their favorite products.

Once shoppers swipe right on a series of products, it's easy to edit picks, and add them to cart in one click. Plus, there's tons of real estate for merchants to make curated product recommendations—with all the preference data shoppers just gave them. It's built with customizability in mind, so that merchants can swap out icons, logos, buttons, and curate product collections they want to feature.

How they built it:

The team created two sections in Pack:

A MatchExperience section for the selection of product collections that interest the user
An another MatchExperienceResults section for building a cart based on what the user liked or not from those collections

One the first page, the MatchExperience section will provide information for the page loader to get the products from the collection server side. As the user swipes for likes and dislikes this will save to localStorage. Once the user is done selecting their pickings, the page will navigate to the sectond results page.

On the second results page, the MatchExperienceResults section will read the local storage and display all the products the user has selects, and allows the user to select additional products they like. Then when the user adds to cart, it will add all the selected products to the cart.

Here's what the team shared about their approach:

“The first challenge we faced was to devise a solution that was as native as possible, avoiding the burden of third-party libraries. To achieve this, we decided to use only Frame Motion for the swipe animations of the cards. This approach reduced the project's weight and minimized the code to only what was strictly necessary. Another challenge we encountered was fetching the products. We took some time to understand the data flow so that we could manipulate it to suit our needs, making sure we understood the available data and its structure.”

Juan Willink

Founder @ Latech Factory

Why it stands out:

This project was creative, fun and functional, with a high level of polish and interactivity. We loved how it leans into mobile-first shopping and the flexibility of a custom storefront. It also opens the door for a lot of customization opportunities for merchants who want to make it their own.

Explore the project:

Note: This experience was optimized with mobile devices, so it is best viewed on a smartphone.

Meet the team:

Latech Factory is a web development agency that partners with a variety of businesses to create digital experiences - from ecommerce to SAAS and beyond. They entered Packathon with a team of two designers, two developers, and one product owner.

“Overall, we felt very comfortable during the development process. Since it was based on React, the main challenge was understanding how Hydrogen/Pack is structured, including how to route, fetch data, and where to declare our routes. However, once we got the hang of it, the development flowed smoothly, and having native integrations with Shopify significantly sped up the process. We really enjoyed it! Also, big props to all the participants who joined in and did an amazing job in record time! Hopefully, this is just the first of many events like this and helps the Hydrogen and Pack ecosystem grow. Super fun experience! 💯”

Andres Harvey

Founder @ Latech Factory

“I have been very excited about the energy I felt these last few days participating in Packathon! I hope that we continue to connect to conquer new projects and co-create new experiences that bring smiles to the world. Congratulations to all for what we have accomplished! 😍”

Juan Ignacio

Fullstack Developer @ Latech Factory

“I am very happy to have participated in the Packathon! It was a few days of high intensity and a lot of fun. My biggest takeaway is the importance of being creative while maintaining focus on the key functionalities of what you are looking to build. After all, time is limited and the goal is to reach the deadline with a robust product. :rocket: A special thank you to the Pack and Latech teams, who worked tirelessly on the organization and support of this great event. Excellent experience!”

Juan Cruz Bonina

Founder @ Latech Factory

Latech's advice for future Packathoners:

“Keep it simple. Often, teams make the mistake of aiming too high. For Packathon, it's crucial to focus on a simple yet effective idea that can be developed within the given timeframe. Simplicity doesn't equate to mediocrity. With good design, solid development, and enough time to test, you'll have a strong solution ready to deliver.”

Nehuen Odriozola

Designer @ Latech Factory

Build custom products in real-time (Best use of Pack + Buy with Prime prize)

Give shoppers full control to build their own custom products in real-time, step-by-step—and watch them come to life in three dimensions, compete with accessories. This powerful shopping experience simplifies a multi-step shopping process, and allows shoppers to customize multiple elements of a product, then add multiple elements to their cart in one click.

And it's not just great for shoppers—merchants get a ton of control over merchandising options—with the ability to swap out products, add / remove swatches, change button styling, font colors, and more.

How he built it:

Building on top of Pack's Hydrogen theme Blueprint, Joe created a custom component that guides shoppers through the process. One of the challenges he faced as he built were fetch limits.

“Using GraphQL is a great solution to improve the efficiency of the data pulled per request, making the requests more flexible than REST, however, it comes with an important change of paradigm regarding the limits of data we can pull, if now we can request only the data we need for each scenario, we are also limited by the query cost to ensure we are not just rebuilding our REST response through a different methodology. When working with this API, it is important to explore the GraphQL queries a bit deeper to better understand how to build complex queries or properly use the pagination system provided by the technology. Since I didn't have the opportunity to fully dig into the GraphQL details I had to resource to other pieces of information that were already provided, which is good, but, it also led to some nice improvements to be left out.”

Joe Gomez

Founder & CEO @ Romezis