Goalimpact

The players' directory page is a key element in the Goalimpact offering, as it allows users to browse through the various players present on the app and subscribe to them.

To avoid overwhelming users, we decided to present the data as a filterable table on desktop and a list of cards on mobile.

Table columns can be customized by users if they are only interested in certain columns.

Making the data instantly searchable and filterable was a challenge since we started with more than 200,000 players.

To solve the performance issue, we decided to add an Algolia layer between the browser and the database.

The result is a blazingly fast search engine that makes it so easy to find any player in milliseconds.

All filters and search queries are also persisted in the URL, which makes it handy to bookmark a certain query or share it with others.

We chose to use Supabase as our hosted database solution.

Supabase provided us with a robust and easy-to-use platform that allowed us to quickly set up and manage the database for the project.

Additionally, we also chose to implement magic link authentication for user login and signup. This approach offers a simple and secure way for users to access their accounts and eliminates the need for traditional username and password combinations.

To support Goalimpact's tiered pricing model, we implemented Stripe as the payment gateway.

Stripe's API allowed us to easily create different pricing tiers and subscription plans.

We also added custom logic on top of Stripe's API to handle the pricing changes that occur after the first billing cycle. This allowed us to accurately calculate the subscription cost based on the number of players subscribed, and ensure a seamless and user-friendly experience for our customers.

To incentivise users to subscribe, we made it possible for the Goalimpact team to create coupons and provide 5 players for free upon subscription.

Additionally, Stripe's built-in features such as recurring payments and automatic invoicing, helped us to automate the billing process and avoid any confusion for the users.

To provide objective and seamless metrics to rate players, each player page shows graphs that show their scoring impact in various forms.

We also show forecast charts to estimate the future impact of players, making it possible to detect talented players from a young age.

To make the charts as easy as possible to understand, we separated them into categories and made it possible to control what metrics are shown on them.

The entire website and dashboard content is managed from Sanity headless CMS.

This makes it possible for the Goalimpact team to create pages by themselves in minutes and live-preview them before publishing.

Marketing pages have a few videos in hero sections or in the body explaining the platform.

We integrated MUX with Sanity to upload videos in any size and have them automatically load fast regardless of the user's device.

All pages have the required SEO fields to increase their chances of ranking. The fields are also validated based on SEO best practices.

The sitemap of the website is generated and updated automatically.

We also made it possible for the Goalimpact team to generate branded Open Graph (OG) images for each page.

Goalimpact has analytics tracking in place and is also GDPR-compliant. Yet, notice how there's no cookie banner that pops up when you visit it for the first time.

That's because we use a cookie-less GDPR-friendly tracking solution called Fathom instead of Google Analytics.

Fathom is also much simpler to use than Google Analytics, and you can control whether your dashboard is private or public.

Here's the dashboard from another project, Tinloof Store, to give you an idea of how it looks like:

We're very proud of the Google page speed score of the new website.

The score is almost 100 on desktop and around 90 on slow mobile devices, which is great considering the homepage hero is a high-quality video.

We took some screenshots to compare the performance of the site with the previous Squarespace version, which didn't even have a video and did not nearly have the same amount of content.