PokéVault TCG is a feature-rich fansite for the Pokémon Trading Card Game, built with modern web technologies. This project offers a seamless browsing experience for Pokémon card collectors, featuring card galleries, set information, and detailed card views.
Live Demo: https://tcgpokevault.netlify.app
- Dark-themed UI - Sleek, Pokemon-inspired dark mode interface for comfortable browsing
- Card Browser - Explore thousands of cards with image previews and essential information
- Set Gallery - Browse through all Pokémon TCG sets with release dates and card counts
- Detailed Card Views - View comprehensive information about each card, including:
- Card images (high resolution)
- Attributes (HP, types, rarity)
- Rules and abilities
- Attacks and damage values
- Weakness, resistance, and retreat cost
- Market prices (via TCGPlayer API integration)
- Responsive Design - Optimized for all devices from mobile to desktop
- API Tester - Built-in tool to test API endpoints and explore data structure
-
Frontend:
- React 19
- React Router v7
- Axios for API requests
- Custom hooks for data fetching
- CSS with custom properties (variables)
-
Build Tools:
- Vite 6
- ESLint
-
API Integration:
pokevaultTCG/
├── public/
├── src/
│ ├── components/
│ │ ├── common/ # Layout, Header, Footer components
│ │ ├── pages/ # Page components
│ │ └── ApiTester.jsx # API testing tool
│ ├── hooks/ # Custom React hooks
│ ├── services/ # API service layer
│ ├── utils/ # Utility functions
│ ├── App.css # Main stylesheet
│ ├── App.jsx # App component with routing
│ └── main.jsx # Entry point
├── .env # Environment variables (not tracked by git)
├── .gitignore
├── package.json
└── vite.config.js
This project follows security best practices:
- API key is stored securely in environment variables
- No sensitive data is exposed to the client
- Pokémon TCG API for providing the data
- The Pokémon Company for the amazing card game
⭐️ Note: This is a fan project and is not affiliated with or endorsed by Nintendo, The Pokémon Company, or Game Freak.