A Trading Card Collection and Card Sorting App
Card Vault is a full-stack web application designed for trading card collectors to organize, visualize, and plan their collections with precision. The platform goes beyond standard CRUD operations by featuring an interactive Binder Planner that enables drag-and-drop card placement into custom grid layouts. Users can track detailed card metadata including grading details, purchase prices, and estimated values, while managing multiple binder configurations. The application demonstrates advanced full-stack development practices including multi-tenant data isolation, JWT-based authentication, and responsive design for both mobile and desktop platforms.
Comprehensive Collection Tracking — Add, edit, and manage cards with detailed metadata including set name, card number, condition, grading details, purchase price, estimated value, quantity, and custom notes
Graded Card Support — Toggle between raw and graded card modes with support for major grading companies (PSA, BGS, CGC) and certification number tracking
Interactive Binder Planner — Drag-and-drop interface to intuitively place cards into custom-sized binder layouts with visual slot representation
Value Tracking & Analytics — Monitor collection valuation through purchase price and estimated value tracking with real-time total collection value calculations
Advanced Collection Organization — Grid-based visual browsing with filtering by set and grading status, sorting capabilities, and comprehensive dashboard overview
(coming soon) Cloud Image Storage — Upload and store card images for visual reference and collection showcase
User Authentication & Multi-Tenancy — Secure JWT-based authentication with field-based multi-tenancy for isolated user data
(coming soon) Demo Account — Explore with pre-loaded sample data without creating an account
React 18 — Component-based UI framework with hooks for state management
TypeScript — Type-safe development with full type checking
Vite — Modern build tool providing fast development server and optimized production builds
TailwindCSS — Utility-first CSS framework for responsive design
shadcn/ui — Accessible, high-quality React component library built on Radix UI primitives
React Router — Client-side routing for seamless multi-page navigation
Radix UI — Comprehensive set of accessible design system components
Flask — Lightweight Python web framework handling REST API endpoints with CORS support
MongoDB Atlas — Cloud NoSQL database providing flexible document storage with cloud hosting
PyMongo — Python MongoDB driver for database operations and data modeling
JWT Authentication — Token-based authentication for stateless user verification across requests
Bcrypt — Cryptographic password hashing ensuring secure user credential storage
Python 3 — Backend server runtime with modular blueprint architecture for endpoint organization
If I were to continue developing Card Vault, here are the features I would prioritize:
Binder Export Features — Export binder layouts as high-quality images for sharing and showcase purposes
Card Value History Tracking — Historical price data enabling trend analysis and investment tracking
Social & Sharing Features — Community showcase functionality allowing users to share binder configurations and collections
Advanced Analytics — Data-driven insights including grading statistics, collection composition analysis, and value trends
Database-as-a-Service Migration — Transition to isolated database-per-tenant architecture for enhanced scalability and performance at scale (10K+ users)
Mobile App — Native mobile applications for iOS and Android with offline support
Multi-Tenant Architecture — Designed the system to safely serve multiple users from a single database by assigning each user a unique ID and filtering all data queries through that ID. This approach is more cost-effective than giving each user their own separate database, while still maintaining complete data isolation and privacy.
Full-Stack Integration — Seamless integration between React frontend and Flask backend using REST APIs with proper error handling and state management across both layers.
Database Design — Structured MongoDB schema with indexing strategies for optimal query performance, supporting complex card metadata and binder layout persistence.
Security Implementation — End-to-end authentication flow using JWT tokens with bcrypt password hashing, CORS configuration, and request validation on all protected endpoints.
Responsive User Interface — Mobile-first design approach using TailwindCSS utility classes and Radix UI components, ensuring consistent experience across devices while maintaining accessibility standards.
✓ TypeScript - Full type coverage across components (pages, contexts, utilities)
✓ Component Composition - Modular, reusable components with single responsibility
✓ Dark Mode - Complete theme implementation using CSS variables and Tailwind
✓ Code Organization - Clear file structure separating components, pages, contexts, and styles
GitHub Link: