TCG Vault - Trading Card Game Collection Management with OCR Scanning
8fe34cc10f
📱 Mobile-First Design Overhaul: - Complete responsive redesign prioritizing mobile experience - Touch-friendly interface with larger tap targets (48px minimum) - Optimized layouts that work seamlessly from mobile to desktop 🎨 ScanModeSelector Mobile Updates: - Full-screen mobile layout with proper spacing - Touch-friendly mode selection cards with active states - Responsive grid (1 column mobile, 2 columns tablet+) - Enhanced pro tips section with better mobile typography 📷 AutoScanningCamera Mobile Optimizations: - Mobile-optimized camera preview with proper aspect ratios - Touch-friendly manual scan button (full-width on mobile) - Better positioned queue counter and scanning indicators - Mobile-specific camera controls overlay with live indicators - Improved error messaging and OCR configuration warnings 🗂️ CardQueue Mobile Experience: - Responsive card grid (1 col mobile → 4 cols desktop) - Larger touch targets for selection and removal - Mobile-optimized card thumbnails with better info layout - Touch-friendly bulk selection controls - Improved empty state with better mobile spacing ⚡ BulkOperations Mobile Interface: - Responsive 3-column layout (stacked on mobile) - Touch-optimized form controls and buttons - Better mobile typography and spacing - Enhanced tag suggestions with touch-friendly buttons - Mobile-optimized creation workflows 🎯 ScanningToast Mobile Positioning: - Full-width on mobile, centered on desktop - Better mobile positioning (top-left-right) - Responsive text sizing and icon scaling - Improved progress bar visibility on mobile 🚀 Mobile UX Enhancements: - Active states for all interactive elements - Proper focus rings for accessibility - Mobile-optimized border radius (rounded-xl) - Better visual hierarchy with responsive typography - Consistent spacing system across all components Perfect for mobile card scanning experience! 📱✨ |
||
|---|---|---|
| api | ||
| backend | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| .npmrc | ||
| ALL-VERCEL-SETUP.md | ||
| deploy-vercel-all.sh | ||
| deploy-vercel.sh | ||
| deploy.sh | ||
| deployment-guide.md | ||
| DEPLOYMENT.md | ||
| DUAL_VIEW_SYSTEM.md | ||
| GAME_FEATURES.md | ||
| GRADIENT_BORDERS_GUIDE.md | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| vercel.json | ||
| VISUAL_EFFECTS_GUIDE.md | ||
TCG Vault - Trading Card Collection Manager
A comprehensive trading card database system with OCR scanning, AI-powered deck building, and real-time pricing.
Features
🃏 Complete Card Database
- Store and organize your entire trading card collection
- Track card conditions, quantities, and locations
- Support for multiple TCG formats (Magic: The Gathering, Pokémon, Yu-Gi-Oh!, etc.)
📸 OCR Card Scanning
- Scan physical cards using your camera or smartphone
- Automatic card recognition and data extraction
- Bulk scanning support for efficient collection entry
🤖 AI-Powered Features
- Intelligent deck building recommendations based on your collection
- Natural language queries for searching your database
- Meta analysis and card synergy suggestions
💰 Real-time Pricing
- Live price tracking from multiple sources
- Collection valuation and price alerts
- Historical price charts and market trends
🎨 Modern Web Interface
- Responsive design for desktop and mobile
- Drag-and-drop deck building
- Advanced filtering and search capabilities
Tech Stack
- Backend: Python FastAPI with SQLAlchemy ORM
- Database: SQLite (production-ready, can scale to PostgreSQL)
- Frontend: React with TypeScript and Tailwind CSS
- OCR: OpenCV + Tesseract with cloud vision APIs
- AI: OpenAI GPT integration for intelligent features
- Pricing: TCGPlayer and MTGJSON API integration
Quick Start
-
Backend Setup:
cd backend pip install -r requirements.txt uvicorn main:app --reload -
Frontend Setup:
cd frontend npm install npm start -
Database Initialize:
python backend/init_db.py
Project Structure
tcg-vault/
├── backend/ # FastAPI backend
│ ├── app/
│ │ ├── models/ # SQLAlchemy models
│ │ ├── routers/ # API route handlers
│ │ ├── services/ # Business logic
│ │ └── utils/ # Utilities (OCR, AI, pricing)
│ ├── tests/ # Backend tests
│ └── requirements.txt
├── frontend/ # React frontend
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── services/ # API clients
│ │ └── utils/
│ └── package.json
├── docs/ # Documentation
└── docker-compose.yml # Container orchestration
Development
This project is designed for easy development and deployment. See the individual README files in backend/ and frontend/ for detailed setup instructions.
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests
- Submit a pull request
License
MIT License - feel free to use this project for your own collection management needs!