Building a Product Discovery Platform with Real-time Analytics using the Dub API

Product discovery platforms like Product Hunt and Betalist have become popular destinations for tech enthusiasts to discover new tools and resources. Every day, thousands of new products are submitted to these platforms, which in turn generates millions of outbound clicks to the products' websites.

Usually, these platforms rely on product analytics tools like Segment, Amplitude, or Mixpanel to track these clicks and other user interactions. However, there are several limitations with these tools:

1. Latency: These tools are more suited for generating data reports for internal use and are not optimized for user-facing analytics. As a result, their APIs have painstakingly slow response times.
2. No real-time support: Most analytics tools have a delay of a few minutes to a few hours before the data is available via their API.
3. Poor DX: These tools are generally not developer friendly – poor documentation, little to no code samples, and lack of support for modern frameworks like React or TypeScript.

In this article, we'll show you how you can leverage Dub's API to integrate real-time user-facing analytics into your products – using OSS Gallery as a real-world example.

What is OSS Gallery?

OSS Gallery is a crowdsourced list of the best open-source projects on the web. It's a platform for you to discover new open-source tools, libraries, and resources that can help you build better software.

We built OSS Gallery to showcase the capabilities of Dub's API for building real-time user-facing analytics. With Dub's API, we were able to track outgoing clicks from OSS Gallery to a project's GitHub repository + website and display those clicks in real-time on the project page.

Here's an example of how this works on our very own OSS Gallery page:

As you can see, clicks to our website are tracked and displayed in real-time in a nice time-series chart. This provides users with instant feedback on the popularity of a project and helps developers understand how their projects are being discovered.

How we built OSS Gallery

Here's a high-level overview of the tech stack we used:

1. Dub's TypeScript SDK: Link creation, click tracking, and real-time analytics.
2. Tremor: Beautiful time-series charts
3. Next.js: Server Actions + Form Actions (zero API routes)
4. Vercel: Serverless Postgres + Deployment

The codebase is fully open-source as well – feel free to take a look at our implementation:

Part 1: Get your Dub API key

To get started, you'll need to sign up for a Dub account and create a workspace.

Then, generate a Dub API key and save it in your .env file as DUB_API_KEY.

Part 2: Programmatically creating and editing links

With your Dub API key, you can now start creating and editing links programmatically via the Dub API. Here's a simple example using Dub's TypeScript SDK:

const { shortLink } = await dub.links.create({
  url: "https://github.com/dubinc/dub",
  // here, we pass the unique link ID from our database as the external ID
  // to let us easily update / retrieve analytics for the link later
  externalId: "lnk_xxxxxxxxxxxx",
});
 
console.log(shortLink); // https://go.oss.gallery/kj23naD

You might've noticed that we're passing an externalId to the dub.links.create method. This is a unique identifier that you can use to associate the generated short link with an entity inside your database – in our case, a project's link on OSS Gallery.

By setting the externalId, we can then easily update the link or retrieve analytics for it (more on this in Part 3).

Let's take a look at how we can edit the link using the dub.links.update method:

// updating the link's URL using the link's unique ID from our database
await dub.links.update(`ext_${link.id}`, {
  url: "https://github.com/dubinc/dub-node",
});

As you can see here, we are passing the link's unique ID from our database as the external ID to the dub.links.update method. This allows us to update the link's URL whenever the user updates it in their project settings.

Part 3: Tracking clicks and displaying real-time analytics

Now that we've created and edited links programmatically, the next step is to track clicks and display real-time analytics on the project page.

Thanks to the Dub API, all clicks to the short link are automatically tracked and stored in Dub's database. All we need to do is retrieve these analytics using the dub.analytics.retrieve method:

const data = await dub.analytics.retrieve({
  groupBy: "timeseries",
  externalId: `ext_${link.id}`,
  interval: "30d",
});

Then, we can use a library like Tremor to display the analytics in a beautiful time-series chart:

import { AreaChart } from "@tremor/react";
 
export default function AnalyticsChart({
  data,
}: {
  data: { start: string; clicks: number }[];
}) {
  return (
    <AreaChart
      className="-ml-4 h-80"
      data={data}
      index="start"
      categories={["GitHub"]}
      colors={["rose"]}
      valueFormatter={nFormatter} // simple number formatter to
      yAxisWidth={60}
      showAnimation // animate the chart on load
      onValueChange={(v) => console.log(v)}
    />
  );
}

And that's it! With just a few lines of code, we've integrated real-time user-facing analytics into our product discovery platform, providing valuable insights to the project creators on how their projects are being discovered.

Start building with the Dub API

We hope this article has inspired you to start building real-time analytics experiences with the Dub API. Whether you're building a product discovery platform like OSS Gallery or a simple link shortening service, Dub's API can help you track clicks and display real-time analytics with ease.

Not sure where to start? Check out our TypeScript SDK docs and API reference to get started. We've also created a lightweight example project – affectionately dubbed dublet – to help you get up and running quickly:

Have any questions? Feel free to send us an email or tweet at us – we'd love to help!