Collection Tracker

A tracker for physical collections — video games (organized by console), movies, Pokémon cards, and sports cards. Add what you have on hand, attach photos, and record details like condition, grade, purchase price, and current value.

Features

• Four categories with tailored fields (console/region/completeness for games, format/director for movies, set/rarity/grade for cards, etc.)
• Organized views — items grouped by console / format / set / sport
• Photos — upload from your device, paste a URL, or auto-find images by name (type a title, click Find image, and pick from real cover/card art)
• Search, sort & filter across your whole collection
• Live stats — total entries, units, estimated value, and total spent
• Add / edit / delete with a clean, modern dark UI

Tech Stack

• Frontend: React + Vite + TailwindCSS + Lucide icons
• Backend: Node + Express + node:sqlite (built-in SQLite)
• Images stored on disk under server/uploads, data in server/collection.db

Auto-find images

Type an item's title, then click Find image in the add/edit form to pull real artwork from purpose-built databases:

Category	Source	API key
Video Games	RAWG	Free — https://rawg.io/apidocs
Movies	TMDB	Free — https://www.themoviedb.org/settings/api
Pokémon Cards	Pokémon TCG API	Not required (optional, raises rate limit)
Sports Cards	TheSportsDB	Not required (player images)

Setting up keys (recommended for accurate matches)

1. In server/, copy .env.example to .env
2. Grab the free keys (links above) and paste them in:
   • RAWG_API_KEY=... (accurate game box/hero art)
   • TMDB_API_KEY=... (accurate movie posters)
   • POKEMON_TCG_API_KEY=... (optional)
   • SPORTSDB_API_KEY=... (optional; a free test key is used otherwise)
3. Restart the server (npm run server or npm run dev).

Without RAWG/TMDB keys the app still works but falls back to Wikipedia, whose matches are approximate.

Getting Started

From the project root:

# 1. Install dependencies for both server and client
npm run install:all
# 2. (optional) install the root helper to run both at once
npm install
# 3. Start both the API (port 4000) and the web app (port 5173)
npm run dev

Then open http://localhost:5173.

Running them separately

npm run server # API only -> http://localhost:4000
npm run client # web app -> http://localhost:5173

The Vite dev server proxies /api and /uploads to the backend automatically.

Project Structure

Tracker 2/
├── server/ # Express + SQLite API
│ ├── index.js # REST routes + image upload
│ ├── db.js # database schema
│ └── uploads/ # uploaded images
└── client/ # React + Vite frontend
└── src/
├── App.jsx
├── config.js # category & field definitions
├── api.js
└── components/

API

Method	Endpoint	Description
GET	/api/items	List items (?category=&search=)
POST	/api/items	Create an item
PUT	/api/items/:id	Update an item
DELETE	/api/items/:id	Delete an item
GET	/api/stats	Collection totals & per-category
POST	/api/upload	Upload an image (multipart)
GET	/api/image-search	Find images by name (?q=&category=)