X

Frontend & Tech Stack

This section outlines the technology stack and tools used to build the Pokémon Card Trading Terminal, covering both frontend and backend, as well as integration with external APIs and Solana.

1. Frontend

The frontend provides a Axiom-style interface for users to interact with Pokémon cards, view real-time prices, charts, and manage their trades.

Technologies & Libraries:

  • Next.js – React framework for server-side rendering, routing, and SEO-friendly pages.

  • React – Core library for building dynamic, interactive UI components.

  • Tailwind CSS / Shadcn UI – Styling and component library for clean, responsive design.

  • Charts – Recharts, ApexCharts, or similar for displaying historical price charts and trading volumes.

  • Wallet Adapter – Solana Wallet Adapter for connecting Phantom, Solflare, and other Solana wallets.

  • WebSockets / Real-Time Updates – Ensures live bid/ask order book updates and chart refresh.

Frontend Features:

  • Real-time bid/ask table for each card.

  • Historical price and volume charts.

  • Filters and search: by name, set, rarity, condition, or price.

  • Wallet connection and SOL payment interface.

  • Collector-friendly card metadata: images, rarity, set, edition.

2. Backend

The backend handles data aggregation, order book matching, and transaction processing.

Technologies & Libraries:

  • Node.js / Express – REST API for serving card data, handling orders, and wallet transactions.

  • Python – Optional for data aggregation, parsing CardMarket / TCGplayer APIs, and analytics.

  • PostgreSQL – Relational database for structured card data, user info, order book, and transactions.

  • Clickhouse – High-speed analytics database for historical price data and charts (optional).

  • WebSockets / Socket.IO – Real-time communication for bid/ask updates and live trading feed.

3. API Integrations

  • CardMarket API – Fetches current prices, card metadata, and historical sales data.

  • TCGplayer API – Fetches additional market data, including USD/EUR prices and card images.

  • CoinGecko API – Provides SOL price to convert fiat card prices into SOL.

  • Solana Web3.js – Interacts with the Solana blockchain for SOL payments, NFT issuance, and wallet transactions.

4. System Highlights

  • Real-time data pipeline: Aggregates external market data and updates the order book instantly.

  • SOL-native trading: Prices are converted to SOL for blockchain-based transactions.

  • Scalable architecture: Modular frontend/backend design allows for future expansion (NFT fractional ownership, new card sets, additional marketplaces).

  • User-centric design: Collector-friendly interface with charts, filters, and wallet integration.

PreviousTransaction Flow

Last updated