Crea un tracker de precios TCG en 30 minutos

En este tutorial construiremos una app simple para buscar cualquier carta y ver precios en vivo de TCGPlayer y eBay, desglosados por condicion y graduacion.

Que vamos a construir

Una app en Next.js con:

Una barra de busqueda conectada a TCG API
Tarjetas de precio para TCGPlayer y eBay por condicion
Vista de precios graduados para PSA, BGS y CGC
UI limpia y responsive

Prerrequisitos

Node.js 18+ instalado
Una API key gratuita de TCG API (registro en tcgpricelookup.com)
Conocimientos basicos de JavaScript/React

Paso 1: prepara el proyecto

npx create-next-app@latest price-tracker
cd price-tracker

Selecciona TypeScript, Tailwind CSS y App Router cuando te lo pida.

Paso 2: helper para la API

Crea una funcion utilitaria para llamar a TCG API:

const API_BASE = "https://api.tcgpricelookup.com/v1";

export async function searchCards(query: string, game?: string) {
  const params = new URLSearchParams({ q: query });
  if (game) params.set("game", game);

  const res = await fetch(`${API_BASE}/cards/search?${params}`, {
    headers: { Authorization: `Bearer ${process.env.TCG_API_KEY}` },
  });

  return res.json();
}

export async function getCardPrices(cardId: string) {
  const res = await fetch(`${API_BASE}/cards/${cardId}/prices`, {
    headers: { Authorization: `Bearer ${process.env.TCG_API_KEY}` },
  });

  return res.json();
}

Paso 3: componente de busqueda

Crea un componente que consulte la API y muestre resultados con precios por condicion. La respuesta trae valores para Near Mint, Lightly Played, Moderately Played, Heavily Played y Damaged, combinando market de TCGPlayer y promedios diarios/semanales/mensuales de eBay.

Paso 4: mostrar precios graduados

Para cartas graduadas, la API devuelve promedios de eBay por empresa y nota (PSA, BGS y CGC). Muestralos en tabla o grid para comparar rapido.

Paso 5: historial de precios

Usa el endpoint /history para obtener datos historicos y renderizar una grafica sencilla de tendencia.

Que sigue

Desde aqui puedes:

Agregar autenticacion y watchlists guardadas
Crear alertas de precio con WebSocket (plan Business)
Construir un portfolio tracker con valor total de coleccion
Comparar juegos lado a lado

El plan gratuito ofrece 200 requests al dia, suficiente para construir y probar tu MVP.

Como crear un tracker de precios TCG en 30 minutos