Pokemon API Tutorial

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.

Start Tutorial API Reference

⏱️ 30 minutes📚 Beginner friendly💻 Code examples

What You'll Need

Basic Programming

Knowledge of JavaScript, Python, or any programming language

API Key

Free API key from PokemonPriceTracker (we'll get this together)

HTTP Requests

Understanding of how web APIs work (we'll explain basics)

Step-by-Step Tutorial

Step 1: Get Your Free API Key

First, you'll need an API key to access Pokemon card data. Don't worry - it's completely free to start!

📝 What is an API Key?

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!)

Step 2: Make Your First API Request

Now let's make your first API call to fetch Pokemon card data! We'll start simple and get information about Charizard.

🌐 Test in Your Browser

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.

Step 3: Understanding the Response

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
}

Key Fields Explained:

id: Unique identifier (set-number format)
name: Pokemon card name
set: Information about the card set
rarity: How rare the card is
images: URLs for card images

Pricing Data:

market: Current market value
low/high: Price range
gradedPrices: Prices for graded cards
lastUpdated: When data was refreshed

Step 4: Build a Simple Search App

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>

Features Added:

• Interactive search input
• Multiple card results
• Card images and detailed info
• Error handling and loading states
• Responsive design

Try Searching For:

• charizard - Popular fire Pokemon
• pikachu - Electric mascot
• mewtwo - Psychic legendary
• blastoise - Water starter

Troubleshooting Common Issues

❌ 401 Unauthorized

Problem: Your API key is invalid or missing.

Solutions:

• Check that you've replaced "YOUR_API_KEY" with your actual key
• Verify the key is correctly formatted (32 characters)
• Ensure there are no extra spaces or characters
• Make sure your account is active

⚠️ 429 Rate Limited

Problem: You've exceeded your daily API limit.

Solutions:

• Wait until your limit resets (daily at midnight UTC)
• Upgrade to a higher plan for more requests
• Implement caching to reduce API calls
• Use pagination instead of large limit values

⚠️ Empty Results

Problem: API returns no cards for your search.

Solutions:

• Check spelling of Pokemon names
• Try broader search terms (e.g., "char" instead of "charizard")
• Remove extra parameters that might be too restrictive
• Try searching for popular Pokemon like "pikachu"

ℹ️ CORS Errors

Problem: Cross-origin request blocked.

Solutions:

• Our API supports CORS, so this shouldn't happen
• If testing locally, serve your HTML file (don't open directly)
• Use a simple HTTP server like Python's python -m http.server
• Consider using a backend proxy for production apps

What's Next?

Explore Advanced Features

Learn about filtering, sorting, pagination, and historical price data.

Read Full Documentation

Comprehensive API reference with all endpoints and parameters.

Join the Community

Connect with other developers and get help with your projects.

Congratulations! 🎉

You've successfully learned how to use the Pokemon API! You can now build amazing Pokemon card applications.