How OpenSauced uses Dub to Provide Approachable Insights Into Open Source

Insights into open source is something that should be easily accessible by all. OpenSauced wanted to make sharing insights into open source repositories, organizations, and contributors as frictionless as possible.

To do that, OpenSauced leveraged Dub's features to enhance insights into their product usage and expand their mission of approachable open source insights.

How OpenSauced Started Sharing URLs

OpenSauced started by adding share buttons to specific pages in their application. This button would use browser APIs to copy the current URL to the clipboard. The problem with this approach is that the URLs wouldn't be “sticky,” or easy to remember. That's where Dub came in.

"Dub saved us from ourselves by keeping us focused on providing value to our customers and not building our link shortening infrastructure."

Brian Douglas

Founder, CEO

OpenSauced liked Dub for URL shortening because it is a great open source product with a great community as well. Initially, OpenSauced started using Dub to create short URLs with their default dub.sh domain, which gave a quick way to create custom short URLs and be able to track which links on their platform are getting attention.

This was a manual process in the beginning, but OpenSauced noticed that Dub introduced an API, which looked like a great opportunity.

Integration with the Dub API

While manually creating short URLs through Dub's dashboard was easy enough, OpenSauced wanted their community to be able to generate and share OpenSauced pages, such as contributor profiles, Workspaces, Repository Pages, and more, seamlessly. This is where Dub's API came into play.

"Dub's API allowed us to programmatically shorten URLs with a single API call, making it easier for our community to share insights into open source."

Brandon Roberts

Engineering Lead

Dub's API allows you to use their workspace along with an API key to programmatically send URLs to Dub to be shortened. OpenSauced found this API to be straightforward and with good documentation on using the different endpoints for creating and managing URLs.

OpenSauced integrated Dub's API into their own OpenSauced API, where they could control shortening of URLs with a little more precision, while gaining the flexibility of Dub's service.

The snippet below is the URL shortener service from their NestJS API:

import { Dub } from "dub";
 
const dub = new Dub({ workspaceId: "ws_xxx" });
 
@Injectable()
export class UrlShortenerService {
  async shortenUrl(url: string) {
    try {
      const { shortLink } = await dub.links.upsert({ url });
      return shortLink;
    } catch (e: unknown) {
      if (e instanceof Error) {
        throw new BadRequestException(`Unable to shorten URL ${e.message}`);
      }
    }
  }
}

OpenSauced shortens all OpenSauced URLs using Dub's upsert method. With a single API call, the method checks if the URL has already been shortened within their oss.fyi domain. If it has, OpenSauced merely returns the shortened URL from their API to the client. If not, OpenSauced generates a new oss.fyi short URL.

By default, OpenSauced shortens URLs with a seven-letter random string generated by the Dub API. To create a more shareable experience for users, OpenSauced has created customized URLs for Repository pages and contributor profiles.

• For Repository pages, such as app.opensauced.pizza/s/facebook/react, OpenSauced generates a short URL under their oss.fyi domain named: oss.fyi/facebook/react.
• For contributor profiles, for example, app.opensauced.pizza/user/bdougie, is shortened to oss.fyi/bdougie.

One of their features, Workspaces, is a level above a GitHub organization, allowing you to track multiple repositories across different organizations and gain insights. For workspaces, the URL would be /workspaces/{uuid}, along with the path for the associated tabs on the page. This case differed because there could be many repositories in a Workspace.

As Workspaces can provide a lot of value, making those easier to share was paramount, and through Dub's API OpenSauced can share a wealth of information about a Workspace full of repositories with a 15 character URL instead of a 50 character one.

For example, if we shared the full url, it would look like this:

https://app.opensauced.pizza/workspaces/1b814876-2007-4125-91bf-9792b93ee6d2

The shortened version using Dub is oss.fyi/63vOt0W. This would also allow us to expand into custom subdomains for workspaces in the future.

What OpenSauced Learned

OpenSauced is now able to see analytics about their most visited URLs on the platform in one place, use different domains based on use case, and add additional metadata to gain more insights into their community sharing links on insights into open source.

Build your own link-sharing features with the Dub.co SDK

With Dub, OpenSauced is able to shorten and share URLs as quickly as possible, enhance the user experience, and create more opportunities to share insights into open source from many different perspectives. Check out Dub's OpenSauced repository page at oss.fyi/dubinc/dub.

Want to build your own link-sharing features with Dub's TypeScript SDK? We created a simple template – affectionately dubbed dublet – to help you get started:

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