Zbuduj tracker cen TCG w 30 minut

W tym poradniku zbudujemy prosta aplikacje do wyszukiwania kart i podgladu cen na zywo z TCGPlayer oraz eBay, z podzialem na stan i grade.

Co zbudujemy

Aplikacje Next.js z:

paskiem wyszukiwania podlaczonym do TCG API
kartami cen pokazujacymi TCGPlayer i eBay per condition
widokiem cen graded dla PSA, BGS i CGC
czystym, responsywnym UI

Wymagania

Node.js 18+
darmowy klucz TCG API (rejestracja na tcgpricelookup.com)
podstawowa znajomosc JavaScript i React

Krok 1: konfiguracja projektu

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

Wybierz TypeScript, Tailwind CSS oraz App Router.

Krok 2: helper do API

Utworz funkcje pomocnicze do komunikacji z 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();
}

Krok 3: komponent wyszukiwania

Stworz komponent, ktory odpytuje API i wyswietla wyniki z cenami per condition. Odpowiedz zawiera ceny dla Near Mint, Lightly Played, Moderately Played, Heavily Played i Damaged, razem z market z TCGPlayer i srednimi dziennymi/tygodniowymi/miesiecznymi z eBay.

Krok 4: ceny kart graded

Dla kart graded API zwraca srednie eBay dla poziomow ocen PSA, BGS i CGC. Pokaz je w tabeli lub gridzie, aby szybko porownac wartosci.

Krok 5: historia cen

Uzyj endpointu /history, aby pobrac dane historyczne i narysowac prosty wykres zmian cen.

Co dalej

Kolejne kroki:

dodaj logowanie i zapisywane watchlisty
ustaw alerty cenowe przez WebSocket (plan Business)
zbuduj tracker portfolio z laczna wartoscia kolekcji
porownuj ceny miedzy grami obok siebie

Darmowy plan daje 200 zapytan dziennie, co spokojnie wystarczy na MVP i testy.

Jak zbudowac tracker cen TCG w 30 minut