Skip to content
RateStack
API cookbook

Build a real-time pricing dashboard

End-to-end recipe for a pricing dashboard: API fetch with proper auth, idempotency, error envelopes, and a useReducer pattern for the table state.

RTBy RateStack TeamPublishedReviewed
intermediateTypeScript · React

The minimum viable dashboard runs the pricing API and renders a sortable quote table with drill-down. Three production concerns to handle: auth via your BFF (the API key never reaches the browser), idempotency on submit, and RFC 7807 error envelopes.

type DashboardState =
  | { status: "idle" }
  | { status: "submitting"; idempotencyKey: string }
  | { status: "ready"; quotes: Quote[]; correlationId: string }
  | { status: "error"; problem: ProblemDetail };

const reducer = (s: DashboardState, a: Action): DashboardState => {
  switch (a.type) {
    case "submit":
      return { status: "submitting", idempotencyKey: a.key };
    case "success":
      return { status: "ready", quotes: a.quotes, correlationId: a.cid };
    case "fail":
      return { status: "error", problem: a.problem };
    case "reset":
      return { status: "idle" };
  }
};

On the network side: post to your BFF endpoint, which injects the API key server-side and forwards to the RateStack proxy. Always include an idempotency key on POST /v1/pricing or /v1/pricing/mode so retries are safe. Surface the correlationId from the response on the dashboard for support contexts.

All recipes
Build a real-time pricing dashboard — API cookbook | RateStack