Build a Scrap Metal Price Dashboard with React and the ScrapMetal API

A live pricing dashboard is one of the most common applications for scrap metal data. Yard operators use them to set buy prices. Sales teams use them to quote customers. Management uses them to monitor margins. In this guide, we will walk through building one with React and the ScrapMetal API.

Architecture Overview

The dashboard is a single-page React application that fetches prices from the ScrapMetal API and displays them in a filterable, auto-refreshing table. We will use a lightweight approach with no external state management library. React's built-in useState and useEffect hooks handle everything we need.

The key components are a price table that displays current prices for all grades, a filter bar that lets users narrow by metal type, and a detail panel that shows historical price trends for a selected grade.

Fetching Price Data

Create a custom hook called usePrices that wraps the API call. It should accept an optional metal filter, manage loading and error states, and return the parsed price data. Set up an interval inside useEffect to re-fetch every five minutes, giving users current data without hammering the API.

The ScrapMetal API returns a consistent JSON structure for each price entry: metal name, grade, ISRI code, price, unit (per pound or per ton), source, region, and timestamp. Map this directly to your TypeScript interface for type safety.

Building the Price Table

The main table component renders one row per grade. Display the metal category, grade name, ISRI code, current price, unit, and the time since last update. Color-code the price column: green for prices that have increased since the previous fetch, red for decreases. This gives users an instant visual signal of market direction.

Sort the table by metal category by default, grouping all copper grades together, then aluminum, steel, and brass. Allow users to click column headers to re-sort by price, grade name, or last updated time.

Adding Filters

The filter bar is a row of toggle buttons, one per metal category. When a user clicks Copper, the table filters to show only copper grades. Clicking again removes the filter. Allow multiple simultaneous filters so a user can view copper and brass together.

Historical Sparklines

When a user clicks a row, expand a detail panel below it showing a 30-day price history chart. Fetch this from the ScrapMetal API's historical endpoint. A simple SVG sparkline component works well here. Plot the daily closing price as a line chart with the date range labeled. This gives context to the current price without requiring a full charting library.

Deployment

Deploy the dashboard as a static site on Vercel, Netlify, or any static host. Since the API key is used in client-side requests, use the ScrapMetal API's domain restriction feature to lock your key to your dashboard's domain. This prevents unauthorized use if someone inspects your network requests.

The free tier supports 100 API calls per day. With a five-minute refresh interval and four metal categories, that is approximately 288 calls per day for a single user. For multi-user dashboards, consider a small backend proxy that caches responses and serves them to all connected clients.