Pokemon Card Viewer

A modern React application for searching and viewing Pokemon cards from all editions. Built with a beautiful, responsive UI that displays cards grouped by Pokemon name, showing all available variants and editions.

Features

• 🔍 Search Pokemon Cards: Search for any Pokemon by name
• 🎴 Multiple Editions: View all card editions and variants for each Pokemon
• 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile
• 🎨 Modern UI: Beautiful gradient backgrounds and smooth animations
• ⚡ Fast Loading: Optimized API calls and loading states
• 💰 Price Information: Shows market prices when available
• 🛡️ Error Handling: Graceful error handling and user feedback

Screenshots

The app features:

• Gradient background with glassmorphism effects
• Card grid layout with hover animations
• Loading spinners and error states
• Mobile-responsive design
• Clean, modern typography

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone or download this repository
2. Navigate to the project directory
3. Install dependencies:

npm install

4. Start the development server:

npm start

5. Open http://localhost:3000 to view it in the browser

Usage

1. Search: Type a Pokemon name in the search bar (e.g., "Pikachu", "Charizard", "Mewtwo")
2. View Results: All card editions for that Pokemon will be displayed in a grid
3. Explore: Each card shows:
   • High-quality card image
   • Set name and series
   • Card number and rarity
   • Market price (when available)

API Integration

This app uses the Pokemon TCG API which provides:

• Free access to Pokemon card data
• High-resolution card images
• Market pricing information
• Comprehensive card details

Technologies Used

• React 18: Modern React with hooks
• CSS3: Custom styling with gradients and animations
• Axios: HTTP client for API requests
• Pokemon TCG API: Card data and images

Project Structure

src/
├── components/
│   ├── SearchBar.js          # Search input component
│   ├── CardGrid.js           # Grid layout for cards
│   ├── CardItem.js           # Individual card display
│   ├── LoadingSpinner.js     # Loading state component
│   └── ErrorMessage.js       # Error state component
├── services/
│   └── pokemonApi.js         # API integration
├── App.js                    # Main application component
├── App.css                   # Main application styles
├── index.js                  # React entry point
└── index.css                 # Global styles

Features in Detail

Search Functionality

• Real-time search with debouncing
• Searches Pokemon names across all card sets
• Returns up to 50 results for optimal performance

Card Display

• Cards grouped by Pokemon name
• All editions and variants shown together
• High-quality images with fallback handling
• Responsive grid layout

User Experience

• Smooth loading animations
• Error handling with helpful messages
• Mobile-optimized interface
• Accessibility considerations

Customization

You can easily customize the app by:

• Modifying colors in CSS files
• Adjusting the API query parameters
• Adding new card information fields
• Changing the layout and styling

Contributing

Feel free to submit issues and enhancement requests!

License

This project is open source and available under the MIT License.