Project Overview

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.

Try out Card Vault with this LINK!

Key Features

• 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

Core Framework

• 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

Backend Architecture

• 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

Key Takeaway

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

Best Practices Demonstrated

✓ 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:

https://github.com/Shenabeth/card-vault

Try out Card Vault with this LINK!