PokéStore

A modern web application for managing your Pokémon Trading Card Game collection

📋 Overview

PokéStore 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.

✨ 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 (v18 or higher)
• PNPM package manager
• A Supabase account
• A Pokémon TCG API key

Installation

1. Clone the repository:

   git clone https://github.com/Ayfri/PokeStore.git
   cd PokeStore

2. Install dependencies:

   pnpm install

3. Set up Supabase:

   • Create a new project on Supabase
   • 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

5. Configure Environment Variables:

   • Create a .env file in the root of the project by copying .env.example
   • Fill in the required variables:

     # 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:

   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

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
│   ├── scrappers/      # 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
├── scrapper-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 file for details.

Report Bug · Request Feature

Made with ❤️ by Ayfri, Anta, Bahsiik