• Node.js (v18 or higher)
• PNPM package manager
• A Supabase account
• A Pokémon TCG API key

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).

pnpm scrapers

This command will present a menu allowing you to choose which scraper to run. Available options include:

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.

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

.
├── .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

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