Retool’s meteoric rise from a Y Combinator project to a multi-billion dollar enterprise tool is inextricably linked to the Hacker News community. In 2018, the founder’s "Show HN" post transformed the product from an outbound sales experiment into an inbound powerhouse. Today, developers frequently turn to Retool to build custom views for the very platform that helped launch it.

While Retool provides hundreds of native integrations, there is no pre-built Hacker News widget. However, the Hacker News API, hosted via Firebase, is a perfect candidate for Retool’s REST API resource. Building a custom dashboard allows users to filter stories by specific keywords, track mention frequency of their own brands, and bypass the minimalist interface of the original site for a more data-rich experience.

Understanding the Hacker News API Architecture

Before opening the Retool editor, it is essential to understand how Hacker News structures its data. Unlike modern REST APIs that might return a full list of stories with their metadata in a single call, the Hacker News API uses a "nested" approach.

The official API, maintained by Y Combinator, is a near-real-time Firebase database. The most common endpoints include:

  1. Top Stories: /v0/topstories.json – Returns an array of up to 500 current top story IDs.
  2. Item Details: /v0/item/{id}.json – Returns the details for a specific ID, including title, URL, score, and author.
  3. User Details: /v0/user/{id}.json – Returns metadata about a specific contributor.

This structure presents a unique challenge in Retool: you cannot simply link a table to a single query. You must first fetch the IDs and then "hydrate" those IDs into full story objects.

Setting Up the Hacker News Resource in Retool

The first step in building the dashboard is configuring the data source. Retool excels at wrapping REST APIs, and the Hacker News Firebase endpoint is public, meaning no API key is required for read access.

  1. Navigate to the Resources tab in the Retool dashboard.
  2. Click Create New and select REST API.
  3. Set the Base URL to https://hacker-news.firebaseio.com/v0/.
  4. Name the resource HackerNews_API.
  5. Save the resource without any additional headers or authentication parameters.

By defining this as a global resource, you ensure that any future apps built within your Retool instance can immediately access live HN data without re-configuration.

Building the Data Fetching Logic

To display a list of stories, the app needs two distinct queries. The first query retrieves the list of IDs, and the second query (or a transformer) retrieves the content for those IDs.

Query 1: Fetching Top Story IDs

Create a new query named getTopStoryIds.

  • Resource: HackerNews_API
  • Endpoint: GET /topstories.json
  • Action: This query will return an array of integers (e.g., [42131783, 42131500, ...]).

Query 2: Hydrating the IDs with JavaScript

Since Retool’s UI components work best with arrays of objects, we need to convert the list of IDs into actual story data. While you could trigger 500 individual API calls, this would drastically slow down the browser and potentially hit rate limits. A more efficient approach is to fetch the top 20 or 50 stories.

Inside Retool, create a Transformer named topStoriesHydrated. This transformer will use Promise.all to fetch multiple items concurrently.