TCG Vault - Trading Card Game Collection Management with OCR Scanning
Find a file
Randall Stillwell afec905856 🎯 Build Comprehensive User Profile & Settings System
👤 Profile Page Features:
- Complete user profile with avatar, name, username, bio, and email
- Avatar upload with file validation (5MB limit, image types only)
- Avatar generation functionality for custom avatars
- Favorite games selection (MTG, Pokemon, Lorcana)
- Collection statistics display (total cards, collections, decks, value)
- Profile editing with real-time validation
- Member since date and role display

⚙️ Settings Page Features:
- Multi-section tabbed interface (Account, Security, Preferences, Notifications, Display)
- Account settings: email (read-only), collection visibility, preferred currency
- Security settings: password change with validation, 2FA toggle, account deletion
- Preferences: cards per page (25/50/100), default view (grid/list)
- Notifications: email notifications, marketing emails (toggle switches)
- Display settings: theme (light/dark/system), language selection

🗄️ Database Schema Updates:
- Added user profile fields: first_name, last_name, username, bio, avatar_url
- Added preference fields: favorite_games (JSONB), collection_visibility, preferred_currency, cards_per_page, default_view
- Added notification settings: notifications_email, notifications_marketing, two_factor_enabled
- Added display settings: theme, language
- Created user_settings table for complex settings
- Created user_avatars table for avatar management
- Added performance indexes and data validation constraints

📡 API Endpoints Created:
- GET/PUT /api/user/profile - Profile information management
- GET/PUT /api/user/settings - Settings and preferences management
- PUT /api/user/password - Secure password change with bcrypt validation
- GET /api/user/stats - Collection statistics and analytics

🔒 Security & Validation:
- Password change requires current password verification
- Username uniqueness validation
- Input validation for all enum fields (currency, theme, view mode, etc.)
- Proper error handling and user feedback
- Authentication required for all user endpoints

🎨 UI/UX Features:
- Beautiful fire-themed design matching app branding
- Responsive design for mobile and desktop
- Loading states and success/error messages
- Avatar placeholder with user initials
- Tabbed settings interface with icons
- Toggle switches for boolean settings
- Form validation with helpful error messages

 Additional Features:
- Collection stats with game/rarity breakdowns
- Recent activity tracking
- Danger zone for account deletion with double confirmation
- Member since display with formatted dates
- Currency formatting for collection values
- Game icons and themed styling throughout

The profile and settings system is now fully functional with comprehensive user management! 👨‍💻
2025-07-26 18:05:55 -05:00
components 🔧 Fix Collections Not Loading in Add to Collections Modal 2025-07-26 09:57:54 -05:00
lib 🔒 CRITICAL SECURITY FIX: Implement Proper User Data Isolation 2025-07-26 00:29:51 -05:00
pages 🎯 Build Comprehensive User Profile & Settings System 2025-07-26 18:05:55 -05:00
public Major redesign: Enhanced card display with particle effects, improved filters, and search functionality 2025-07-23 21:26:54 -05:00
scripts 🎯 Build Comprehensive User Profile & Settings System 2025-07-26 18:05:55 -05:00
styles Enhanced Navigation Accessibility & Fire-Themed UI 2025-07-26 09:38:18 -05:00
.gitignore Update .gitignore to exclude .next directory 2025-07-23 21:27:11 -05:00
.npmrc Fix build compatibility issues 2025-07-22 10:32:15 -05:00
bulk-import-results-2025-07-24T15-23-54-843Z.json Fix import issues: Add retry logic and better error handling 2025-07-24 10:30:21 -05:00
bulk-import-results-2025-07-24T17-20-21-039Z.json Add real Lorcana import using Lorcast API 2025-07-24 12:27:10 -05:00
lorcana-import-results-2025-07-24T17-27-46-410Z.json Fix card sizing consistency across all TCGs 2025-07-24 14:54:12 -05:00
lorcana-import-results-2025-07-24T17-32-10-187Z.json Fix card sizing consistency across all TCGs 2025-07-24 14:54:12 -05:00
lorcana-import-results-2025-07-24T17-34-04-839Z.json Fix card sizing consistency across all TCGs 2025-07-24 14:54:12 -05:00
next-env.d.ts Convert from React to Next.js for proper API route support 2025-07-23 08:25:58 -05:00
next.config.js Major redesign: Enhanced card display with particle effects, improved filters, and search functionality 2025-07-23 21:26:54 -05:00
package-lock.json 🎉 COMPLETED: Full Collaborative Collections System 2025-07-25 08:34:28 -05:00
package.json 🎉 COMPLETED: Full Collaborative Collections System 2025-07-25 08:34:28 -05:00
popular-sets-import-results-2025-07-23T19-35-56-994Z.json Major redesign: Enhanced card display with particle effects, improved filters, and search functionality 2025-07-23 21:26:54 -05:00
postcss.config.js Major redesign: Enhanced card display with particle effects, improved filters, and search functionality 2025-07-23 21:26:54 -05:00
README.md Major redesign: Enhanced card display with particle effects, improved filters, and search functionality 2025-07-23 21:26:54 -05:00
tailwind.config.js Ultra-Smooth Hover System with Expanding Actions 2025-07-26 09:00:26 -05:00
TESTING_GUIDE.md 🎨 Restructured Layout System 2025-07-25 11:28:04 -05:00
tsconfig.json Major redesign: Enhanced card display with particle effects, improved filters, and search functionality 2025-07-23 21:26:54 -05:00
vercel.json Simplify Vercel config to resolve API routing issues 2025-07-23 09:22:14 -05:00

TCG Vault

A modern trading card game collection manager built with Next.js and Neon Database.

🚀 Features

  • Card Management: Track your MTG, Pokémon, and Lorcana cards
  • Collection Organization: Create and manage card collections
  • Deck Building: Build and share decks
  • Authentication: Secure user accounts with JWT
  • Admin Panel: Manage cards and users
  • Real-time Pricing: Track card values

🛠️ Tech Stack

  • Frontend: Next.js 15, React 18, TypeScript
  • Backend: Next.js API Routes
  • Database: Neon PostgreSQL (serverless)
  • Authentication: JWT with bcrypt
  • Styling: Tailwind CSS
  • Deployment: Vercel

📦 Installation

  1. Clone the repository

    git clone <repository-url>
    cd tcg-vault
    
  2. Install dependencies

    npm install
    
  3. Set up environment variables

    cp .env.example .env.local
    

    Update .env.local with your Neon database URL:

    POSTGRES_URL="postgresql://your-username:your-password@your-host/your-database"
    JWT_SECRET="your-super-secret-jwt-key"
    
  4. Set up the database

    npm run setup-db
    
  5. Start development server

    npm run dev
    

🗄️ Database Schema

The application uses the following tables:

  • users - User accounts and authentication
  • cards - Card information and metadata
  • user_cards - User's card collections
  • collections - Named card collections
  • collection_cards - Cards in collections
  • decks - Deck definitions
  • deck_cards - Cards in decks

🔧 API Endpoints

Authentication

  • POST /api/auth/register - User registration
  • POST /api/auth/login - User login

Admin

  • GET /api/admin - Admin panel data

Health Check

  • GET /api/health - Application health
  • GET /api/test-db - Database connection test

🚀 Deployment

This app is configured for deployment on Vercel:

  1. Connect your repository to Vercel
  2. Set environment variables in Vercel dashboard
  3. Deploy automatically on push to main branch

📁 Project Structure

tcg-vault/
├── pages/                 # Next.js pages and API routes
│   ├── api/              # API endpoints
│   │   ├── auth/         # Authentication routes
│   │   └── admin/        # Admin routes
│   ├── _app.js           # App wrapper
│   └── index.js          # Home page
├── lib/                  # Utility libraries
│   └── database.js       # Database adapter
├── scripts/              # Database setup scripts
├── public/               # Static assets
└── .env.local           # Environment variables

🔐 Default Admin Account

After running the database setup:

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Submit a pull request

📄 License

MIT License - see LICENSE file for details