How TCGVault Works
TCGVault is a self-hostable TCG collection tracker. You deploy it with your API key set as an environment variable — the key lives on the server, never in the browser. Your collection is stored in your browser's localStorage.
Architecture
Hybrid Astro 5 App
TCGVault uses Astro's hybrid output mode. Landing pages are pre-rendered static HTML. API routes (/api/*) are server-rendered and run on Cloudflare Pages (or Node/Vercel/Netlify).
Server-side API Routes
All card price data is fetched server-side via Astro API routes. The SDK is called server-side only — never in the browser. API routes read TCG_API_KEY from the server environment.
localStorage for Collection
Your collection (card names, quantities, conditions, cached prices) is stored in your browser's localStorage under the "tcgvault:" namespace. No network request is made to save it.
Secure by Default
Your API key is set via .env on the server or in your deployment platform's environment variables. It is never exposed in the client bundle, never sent to the browser, never stored in localStorage.
Tech Stack
Privacy
- No account or login required
- No analytics or tracking scripts
- Your API key is stored only in server environment variables — never in the browser
- Your collection data is stored in your browser's localStorage
- Card price requests go from your server to tcgpricelookup.com — your key is never exposed client-side
- You own the deployment — you control where the data goes
Getting an API Key
TCGVault uses the TCG Price Lookup API
to fetch real-time card prices. You need a free API key, which you set as TCG_API_KEY in your .env or deployment settings.