Learn how to use the Pokemon card API from scratch with our comprehensive, beginner-friendly tutorial. Build your first Pokemon API application with step-by-step guidance.
Knowledge of JavaScript, Python, or any programming language
Free API key from PokemonPriceTracker (we'll get this together)
Understanding of how web APIs work (we'll explain basics)
First, you'll need an API key to access Pokemon card data. Don't worry - it's completely free to start!
An API key is like a password that identifies your application when making requests to our Pokemon API. It ensures only authorized users can access the data and helps us provide better service.
Visit the signup page: pokemonpricetracker.com/api-signup
Choose the Free plan (100 API calls per day - perfect for learning!)
Create your account and verify your email
Copy your API key from the dashboard (keep it safe!)
Now let's make your first API call to fetch Pokemon card data! We'll start simple and get information about Charizard.
The easiest way to test the API is directly in your browser. This works because our API supports CORS.
Step 1: Open your browser's developer tools (F12 or right-click → Inspect)
Step 2: Go to the Console tab
Step 3: Copy and paste this code, replacing YOUR_API_KEY with your actual key:
// Replace YOUR_API_KEY with your actual API key
const apiKey = 'YOUR_API_KEY';
fetch('https://www.pokemonpricetracker.com/api/cards?name=charizard&limit=1', {
headers: {
'Authorization': 'Bearer ' + apiKey
}
})
.then(response => response.json())
.then(data => {
console.log('Success!', data);
if (data.cards && data.cards.length > 0) {
const card = data.cards[0];
console.log('Card Name:', card.name);
console.log('Set:', card.set?.name);
console.log('Price:', card.prices?.market || 'Not available');
}
})
.catch(error => {
console.error('Error:', error);
});Expected Result: You should see card information logged to the console, including the name "Charizard" and pricing data.
Let's break down what the API returns so you can understand and use the data effectively.
// Example API response structure
{
"cards": [
{
"id": "base1-4",
"name": "Charizard",
"supertype": "Pokémon",
"subtypes": ["Stage 2"],
"hp": "120",
"types": ["Fire"],
"rarity": "Rare Holo",
"set": {
"id": "base1",
"name": "Base Set",
"releaseDate": "1999/01/09",
"total": 102
},
"number": "4",
"artist": "Mitsuhiro Arita",
"images": {
"small": "https://images.pokemontcg.io/base1/4.png",
"large": "https://images.pokemontcg.io/base1/4_hires.png"
},
"prices": {
"market": 399.99,
"low": 275.00,
"mid": 375.00,
"high": 575.00,
"average": 405.75
},
"gradedPrices": {
"psa10": 15750.00,
"psa9": 1850.00,
"bgs10": 12000.00
},
"lastUpdated": "2025-01-10T12:00:00Z"
}
],
"totalCount": 1,
"hasMore": false
}Now let's build a more interactive application that allows users to search for any Pokemon card!
<!DOCTYPE html>
<html>
<head>
<title>Pokemon Card Search</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.search-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
input[type="text"] {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}
button:hover {
background-color: #0056b3;
}
.card-result {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
gap: 20px;
align-items: flex-start;
}
.card-image {
flex-shrink: 0;
}
.card-image img {
max-width: 200px;
border-radius: 10px;
}
.card-info {
flex: 1;
}
.loading {
text-align: center;
padding: 40px;
color: #666;
}
.error {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>🔍 Pokemon Card Search</h1>
<div class="search-container">
<input type="text" id="searchInput" placeholder="Enter Pokemon name (e.g., Pikachu, Charizard)" value="charizard">
<button onclick="searchCards()">Search</button>
</div>
<div id="results"></div>
<script>
const API_KEY = 'YOUR_API_KEY'; // Replace with your actual API key
async function searchCards() {
const searchTerm = document.getElementById('searchInput').value.trim();
const resultsDiv = document.getElementById('results');
if (!searchTerm) {
resultsDiv.innerHTML = '<div class="error">Please enter a Pokemon name!</div>';
return;
}
// Show loading state
resultsDiv.innerHTML = '<div class="loading">Searching for cards...</div>';
try {
const response = await fetch(
`https://www.pokemonpricetracker.com/api/cards?name=${encodeURIComponent(searchTerm)}&limit=5`,
{
headers: {
'Authorization': `Bearer ${API_KEY}`
}
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
displayResults(data);
} catch (error) {
console.error('Search error:', error);
resultsDiv.innerHTML = `<div class="error">Error searching for cards: ${error.message}</div>`;
}
}
function displayResults(data) {
const resultsDiv = document.getElementById('results');
if (!data.cards || data.cards.length === 0) {
resultsDiv.innerHTML = '<div class="error">No cards found! Try a different search term.</div>';
return;
}
let html = `<h2>Found ${data.cards.length} card(s):</h2>`;
data.cards.forEach(card => {
const marketPrice = card.prices?.market;
const gradedPrice = card.gradedPrices?.psa10;
html += `
<div class="card-result">
<div class="card-image">
<img src="${card.images?.small || 'https://via.placeholder.com/200x280?text=No+Image'}"
alt="${card.name}"
onerror="this.src='https://via.placeholder.com/200x280?text=Image+Not+Found'">
</div>
<div class="card-info">
<h3>${card.name}</h3>
<p><strong>Set:</strong> ${card.set?.name || 'Unknown'} (${card.set?.releaseDate || 'Unknown date'})</p>
<p><strong>Rarity:</strong> ${card.rarity || 'Unknown'}</p>
<p><strong>Card Number:</strong> ${card.number || 'Unknown'}/${card.set?.total || '?'}</p>
<p><strong>Types:</strong> ${card.types?.join(', ') || 'Unknown'}</p>
<div style="margin-top: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 5px;">
<h4>💰 Pricing Information:</h4>
<p><strong>Market Price:</strong> ${marketPrice ? '$' + marketPrice : 'Not available'}</p>
${card.prices?.low ? `<p><strong>Price Range:</strong> $${card.prices.low} - $${card.prices.high}</p>` : ''}
${gradedPrice ? `<p><strong>PSA 10:</strong> $${gradedPrice}</p>` : ''}
<p style="font-size: 12px; color: #666;"><strong>Last Updated:</strong> ${new Date(card.lastUpdated).toLocaleDateString()}</p>
</div>
</div>
</div>
`;
});
resultsDiv.innerHTML = html;
}
// Allow Enter key to trigger search
document.getElementById('searchInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
searchCards();
}
});
// Search for Charizard on page load as an example
window.addEventListener('load', function() {
searchCards();
});
</script>
</body>
</html>Problem: Your API key is invalid or missing.
Solutions:
Problem: You've exceeded your daily API limit.
Solutions:
Problem: API returns no cards for your search.
Solutions:
Problem: Cross-origin request blocked.
Solutions:
python -m http.server