Build a PSA Grading ROI Calculator

Why Grading Calculators Matter

Sending a card to PSA costs $25-$150+ depending on service level. You need to know:

• Will I profit if it grades PSA 9?
• What's the break-even grade?
• Is it worth the risk?

This tutorial shows you how to build a calculator that answers these questions.

What You'll Build

Features:

• Raw card value input
• PSA 9/10 average prices from API
• Grading cost calculator
• ROI visualization with charts
• Break-even analysis
• Population data integration

Tech Stack

• React + TypeScript
• PokemonPriceTracker API
• Recharts for visualization
• Tailwind CSS for styling

Quick Start

npx create-react-app psa-calculator --template typescript
cd psa-calculator
npm install axios recharts

Step 1: API Integration

// src/api/pokemon.ts
import axios from 'axios';

const API_KEY = process.env.REACT_APP_POKEMON_API_KEY;
const API_BASE = 'https://www.pokemonpricetracker.com/api/v2';

export interface CardData {
  name: string;
  setName: string;
  rawPrice: number;
  psa9Average?: number;
  psa10Average?: number;
  psaPopulation?: {
    psa9: number;
    psa10: number;
  };
}

export async function searchCard(cardName: string): Promise<CardData | null> {
  try {
    const response = await axios.post(
      `${API_BASE}/parse-title`,
      { title: cardName },
      { headers: { 'Authorization': `Bearer ${API_KEY}` } }
    );

    if (response.data.matches?.[0]) {
      const card = response.data.matches[0].card;

      // Fetch detailed data with PSA info
      const detailsResponse = await axios.get(
        `${API_BASE}/cards/${card.tcgPlayerId}`,
        { headers: { 'Authorization': `Bearer ${API_KEY}` } }
      );

      const details = detailsResponse.data;

      return {
        name: card.name,
        setName: card.setName,
        rawPrice: card.prices.market,
        psa9Average: details.ebayData?.psa9Average,
        psa10Average: details.ebayData?.psa10Average,
        psaPopulation: details.psaPopulation
      };
    }

    return null;
  } catch (error) {
    console.error('API Error:', error);
    return null;
  }
}

Step 2: ROI Calculator Component

// src/components/PSACalculator.tsx
import React, { useState } from 'react';
import { searchCard, CardData } from '../api/pokemon';

interface ROIResult {
  grade: number;
  gradedValue: number;
  gradingCost: number;
  profit: number;
  roi: number;
}

export function PSACalculator() {
  const [cardName, setCardName] = useState('');
  const [cardData, setCardData] = useState<CardData | null>(null);
  const [gradingCost, setGradingCost] = useState(30);
  const [loading, setLoading] = useState(false);

  const handleSearch = async () => {
    setLoading(true);
    const data = await searchCard(cardName);
    setCardData(data);
    setLoading(false);
  };

  const calculateROI = (): ROIResult[] => {
    if (!cardData) return [];

    const results: ROIResult[] = [];

    // PSA 9
    if (cardData.psa9Average) {
      const profit = cardData.psa9Average - cardData.rawPrice - gradingCost;
      const roi = (profit / cardData.rawPrice) * 100;

      results.push({
        grade: 9,
        gradedValue: cardData.psa9Average,
        gradingCost,
        profit,
        roi
      });
    }

    // PSA 10
    if (cardData.psa10Average) {
      const profit = cardData.psa10Average - cardData.rawPrice - gradingCost;
      const roi = (profit / cardData.rawPrice) * 100;

      results.push({
        grade: 10,
        gradedValue: cardData.psa10Average,
        gradingCost,
        profit,
        roi
      });
    }

    return results;
  };

  const results = calculateROI();

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">PSA Grading ROI Calculator</h1>

      {/* Search Input */}
      <div className="mb-6">
        <input
          type="text"
          value={cardName}
          onChange={(e) => setCardName(e.target.value)}
          placeholder="Enter card name..."
          className="border rounded px-4 py-2 w-full mb-2"
        />
        <button
          onClick={handleSearch}
          disabled={loading}
          className="bg-blue-600 text-white px-6 py-2 rounded"
        >
          {loading ? 'Searching...' : 'Calculate ROI'}
        </button>
      </div>

      {/* Results */}
      {cardData && (
        <div>
          <div className="bg-gray-100 p-4 rounded mb-6">
            <h2 className="text-xl font-bold">{cardData.name}</h2>
            <p className="text-gray-600">{cardData.setName}</p>
            <p className="text-2xl font-bold mt-2">
              Raw Value: ${cardData.rawPrice.toFixed(2)}
            </p>
          </div>

          {/* Grading Cost Slider */}
          <div className="mb-6">
            <label className="block mb-2">
              Grading Cost: ${gradingCost}
            </label>
            <input
              type="range"
              min="15"
              max="150"
              value={gradingCost}
              onChange={(e) => setGradingCost(Number(e.target.value))}
              className="w-full"
            />
            <div className="flex justify-between text-sm text-gray-600">
              <span>$15 (Economy)</span>
              <span>$150 (Express)</span>
            </div>
          </div>

          {/* ROI Results */}
          <div className="grid grid-cols-2 gap-4">
            {results.map((result) => (
              <div
                key={result.grade}
                className={`p-6 rounded-lg ${
                  result.profit > 0 ? 'bg-green-50' : 'bg-red-50'
                }`}
              >
                <h3 className="text-xl font-bold mb-2">PSA {result.grade}</h3>
                <p className="text-2xl font-bold mb-2">
                  ${result.gradedValue.toFixed(2)}
                </p>
                <p className={result.profit > 0 ? 'text-green-600' : 'text-red-600'}>
                  {result.profit > 0 ? '+' : ''}${result.profit.toFixed(2)}
                </p>
                <p className="text-sm text-gray-600">
                  {result.roi.toFixed(1)}% ROI
                </p>

                {result.profit > 50 && (
                  <p className="mt-2 text-sm font-semibold text-green-700">
                    ✅ Strong Grade Candidate
                  </p>
                )}
                {result.profit > 0 && result.profit <= 50 && (
                  <p className="mt-2 text-sm text-yellow-700">
                    ⚠️ Marginal Benefit
                  </p>
                )}
                {result.profit <= 0 && (
                  <p className="mt-2 text-sm text-red-700">
                    ❌ Not Recommended
                  </p>
                )}
              </div>
            ))}
          </div>

          {/* Population Data */}
          {cardData.psaPopulation && (
            <div className="mt-6 bg-blue-50 p-4 rounded">
              <h3 className="font-bold mb-2">PSA Population</h3>
              <p>PSA 9: {cardData.psaPopulation.psa9.toLocaleString()}</p>
              <p>PSA 10: {cardData.psaPopulation.psa10.toLocaleString()}</p>
              <p className="text-sm text-gray-600 mt-2">
                Lower population = higher rarity = better investment
              </p>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Step 3: Add Chart Visualization

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

function ROIChart({ results }: { results: ROIResult[] }) {
  const chartData = results.map(r => ({
    grade: `PSA ${r.grade}`,
    'Graded Value': r.gradedValue,
    'Raw + Cost': r.gradingCost + (cardData?.rawPrice || 0),
    'Profit': r.profit
  }));

  return (
    <BarChart width={600} height={300} data={chartData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="grade" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="Graded Value" fill="#3B82F6" />
      <Bar dataKey="Raw + Cost" fill="#EF4444" />
      <Bar dataKey="Profit" fill="#10B981" />
    </BarChart>
  );
}

Deployment

npm run build

# Deploy to Vercel
npx vercel

# Or Netlify
npm install -g netlify-cli
netlify deploy --prod

Advanced Features

1. Probability Calculator: Factor in grade probability
2. Bulk Analysis: Calculate ROI for multiple cards
3. Historical Trends: Show grade premium over time
4. Service Comparison: PSA vs BGS vs CGC

Related Tutorials

• Next.js Collection Tracker
• Python Portfolio Tracker

Get Free API Key →