Building a Sneaker Price Tracker in 30 Minutes

This walkthrough builds a working sneaker price tracker using the GrailData API, Next.js, and Recharts. You'll fetch live price history and render it as a chart.

Prerequisites

Step 1 — Fetch price history

const res = await fetch(
  `https://graildata-api-production.up.railway.app/v1/sneakers/${styleId}/price-history?range=1y&interval=weekly`,
  { headers: { 'X-API-Key': process.env.GRAILDATA_API_KEY! } }
);
const data = await res.json();

The response includes a history array with date, avg_price, min_price, max_price, and sale_count fields.

Step 2 — Render the chart

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

export function PriceChart({ data }: { data: { date: string; avg_price: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={280}>
      <LineChart data={data}>
        <XAxis dataKey="date" tick={{ fill: '#666', fontSize: 11 }} />
        <YAxis tick={{ fill: '#666', fontSize: 11 }} />
        <Tooltip />
        <Line type="monotone" dataKey="avg_price" stroke="#C8FF00" dot={false} strokeWidth={2} />
      </LineChart>
    </ResponsiveContainer>
  );
}

Step 3 — Wire it up

Combine with the sneaker object endpoint (GET /v1/sneakers/{style_id}) to show the shoe name, last sale price, and premium percentage alongside the chart. That's your tracker.