https://github.com/ayfri/pokecards-collector
PokeCards-Collector is a website that allows you to check Pokemon browse and manage your Pokémon Trading Card Game (TCG) collection.
https://github.com/ayfri/pokecards-collector
pokemon pokemon-cards supabase svelte sveltekit tcg website
Last synced: 11 months ago
JSON representation
PokeCards-Collector is a website that allows you to check Pokemon browse and manage your Pokémon Trading Card Game (TCG) collection.
- Host: GitHub
- URL: https://github.com/ayfri/pokecards-collector
- Owner: Ayfri
- License: gpl-3.0
- Created: 2023-10-02T10:00:36.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-07-04T13:43:17.000Z (about 1 year ago)
- Last Synced: 2025-07-04T15:15:03.973Z (about 1 year ago)
- Topics: pokemon, pokemon-cards, supabase, svelte, sveltekit, tcg, website
- Language: Svelte
- Homepage: https://pokecards-collector.pages.dev
- Size: 23.4 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PokéCards-Collector
[](https://www.gnu.org/licenses/gpl-3.0)
[](https://kit.svelte.dev/)
[](https://supabase.io/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://pages.cloudflare.com/)
[](https://pnpm.io/)
A modern web application for managing your Pokémon Trading Card Game collection
## 📋 Overview
PokéCards-Collector is a comprehensive web application built with SvelteKit and Supabase that allows you to browse and manage your Pokémon Trading Card Game (TCG) collection with ease.
### 📸 Website
Check out the live website [here](https://pokecards-collector.pages.dev).
## ✨ Features
🔐
User Authentication
Sign up and log in to manage your personal collection.
🔍
Card Browser
Search and view Pokémon TCG cards with advanced filtering options.
📚
Collection Management
Keep track of the cards you own with quantity and condition tracking.
⭐
Wishlist
Maintain a list of cards you want to acquire.
👤
Profile & Settings
Manage your user profile and application settings.
🤖
Data Scraping
Built-in CLI tool to fetch the latest Pokémon TCG data.
## 🛠️ Tech Stack
Category
Technologies
Frontend
Backend
Deployment
Tools
## 🚀 Getting Started
Prerequisites
- [Node.js](https://nodejs.org/) (v18 or higher)
- [PNPM](https://pnpm.io/installation) package manager
- A [Supabase](https://supabase.io/) account
- A [Pokémon TCG API](https://pokemontcg.io/) key
Installation
1. **Clone the repository:**
```bash
git clone https://github.com/Ayfri/PokeCards-Collector.git
cd PokeCards-Collector
```
2. **Install dependencies:**
```bash
pnpm install
```
3. **Set up Supabase:**
- Create a new project on [Supabase](https://supabase.io/)
- In your Supabase project dashboard, go to the SQL Editor
- Copy the contents of `supabase-schema.sql` from this repository and run it to create the initial database tables
- (Optional) If needed, run the contents of `supabase-schema-update.sql` for subsequent updates
- Navigate to Project Settings > API
- Find your Project URL and `anon` public key
4. **Set up Pokémon TCG API Key:**
- Get an API key from the [Pokemon TCG API](https://pokemontcg.io/)
5. **Configure Environment Variables:**
- Create a `.env` file in the root of the project by copying `.env.example`
- Fill in the required variables:
```dotenv
# Supabase Configuration
VITE_SUPABASE_URL=YOUR_SUPABASE_PROJECT_URL
VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_PUBLIC_KEY
# Pokemon TCG API Key
POKEMON_TCG_API_KEY=YOUR_POKEMON_TCG_API_KEY
# CDN URL for card images (optional) without trailing slash
# If not provided, original API URLs will be used
# Format: https://your-cdn.com/path
PUBLIC_CARD_CDN_URL=
```
6. **Run the development server:**
```bash
pnpm dev
```
The application should now be running on `http://localhost:5173` (or the next available port).
## 📊 Data Scraping
The project includes an interactive CLI tool to fetch and update various Pokémon TCG data required for the application.
Running the Scraper CLI
```bash
pnpm scrapers
```
This command will present a menu allowing you to choose which scraper to run. Available options include:
Option
Description
Dependencies
all
Run all data scrapers sequentially (pokemons, sets, cards, holo, foil, types). Does not download images.
None
cards
Fetch all Pokémon cards from the TCG API.
None
download-images
Download card images based on the fetched card data.
Requires cards to be run first
foil
Generate foil mask URLs for holographic cards.
Requires holo data
holo
Extract holographic cards from the main card dataset.
Requires cards data
pokemons
Fetch base Pokémon data from PokéAPI.
None
sets
Fetch all card set information from the TCG API.
None
types
Extract unique Pokémon types from the card dataset.
Requires cards data
**Recommended Scraper Order:**
For initial setup or a full data refresh, it's recommended to run the scrapers in this order:
1. `pokemons`
2. `types`
3. `sets`
4. `cards`
5. `holo`
6. `foil`
7. `download-images` (Optional, run if you need local images)
You can run `all` to execute steps 1-6 automatically.
Using a Custom CDN for Images
After running the `download-images` scraper, you will have local copies of the card images. If you host these images on your own CDN or file server:
1. Upload the contents of the `images` directory to your CDN
2. Set the `PUBLIC_CARD_CDN_URL` environment variable in your `.env` file to the base URL of your hosted images
Example: `PUBLIC_CARD_CDN_URL=https://cdn.example.com/pokemon-cards`
3. The application will automatically construct image URLs like `https://cdn.example.com/pokemon-cards/{setCode}/{cardId}.png`
## 📜 Available Scripts
Command
Description
pnpm dev
Starts the development server
pnpm build
Builds the application for production (outputs to .svelte-kit/cloudflare)
pnpm preview
Runs a local preview of the production build
pnpm scrapers
Runs the interactive data scraping CLI
## 📁 Project Structure
View Project Structure
```
.
├── .svelte-kit/ # Build output and internal SvelteKit files
├── node_modules/ # Project dependencies
├── src/
│ ├── assets/ # Static assets (e.g., scraped JSON data)
│ ├── lib/ # Svelte components, utilities, Supabase client, etc.
│ │ ├── components/ # Reusable Svelte components
│ │ ├── helpers/ # Utility functions
│ │ ├── services/ # Data fetching or business logic services
│ │ ├── stores/ # Svelte stores
│ │ └── supabase.ts # Supabase client initialization
│ ├── routes/ # Application pages and API endpoints
│ ├── scrapers/ # Data scraping scripts
│ ├── styles/ # Global styles
│ ├── app.css # Main CSS file (often imports Tailwind)
│ ├── app.d.ts # Ambient TypeScript declarations for SvelteKit
│ ├── app.html # Main HTML template
│ └── constants.ts # Application constants
├── static/ # Static files (favicon, etc.)
├── .env # Local environment variables (ignored by Git)
├── .env.example # Example environment variables
├── .gitignore # Git ignore rules
├── package.json # Project metadata and dependencies
├── pnpm-lock.yaml # PNPM lock file
├── svelte.config.js # SvelteKit configuration
├── supabase-schema.sql # Initial Supabase database schema
├── supabase-schema-update.sql # Database schema updates (if any)
├── tailwind.config.mjs # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── scraper-cli.ts # Entry point for the data scraper CLI
└── vite.config.ts # Vite configuration
```
## 👥 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
How to Contribute
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📄 License
This project is licensed under the GNU GPLv3 License - see the [LICENSE](LICENSE) file for details.