deckhearth/TESTING_GUIDE.md
Randall Stillwell 4255464dca 🎨 Restructured Layout System
Created cleaner layout architecture based on user feedback:

 Standalone Authentication Pages:
- Created AuthLayout component for login/logout pages
- Login page now standalone without sidebar/header
- Logout page uses clean AuthLayout

🎯 Improved Sidebar Design:
- Moved profile, theme toggle, and notifications to sidebar
- Added user profile section with avatar and role
- Reorganized navigation with main nav + bottom nav
- Proper flexbox layout for full-height sidebar

🔍 Dashboard-Specific Search:
- Search bar only appears on dashboard (showSearch prop)
- Removed cluttered header from other pages
- Clean, focused experience per page type

📱 Better Information Architecture:
- Profile info moved from header to sidebar
- Theme toggle integrated into profile section
- Notifications and settings in bottom nav
- Consistent sidebar across all authenticated pages

🎨 Visual Improvements:
- Proper flexbox layout for sidebar sections
- User avatar and role display in profile section
- Clean separation between main nav and utility nav
- Responsive design maintained

Result: Clean login experience + consistent authenticated layout! 🚀
2025-07-25 11:28:04 -05:00

3.5 KiB

🎯 TCG Vault Collaboration Testing Guide

👥 Test Accounts

User Email Password Role
Admin admin@tcgvault.com admin123 Admin
Alice alice@tcgvault.com alice123 User
Bob bob@tcgvault.com bob123 User

🃏 Sample Cards Available

  • Lightning Bolt (MTG) - $2.50
  • Black Lotus (MTG) - $25,000
  • Pikachu (Pokemon) - $8.50
  • Charizard (Pokemon) - $350
  • Mickey Mouse (Lorcana) - $45
  • Elsa (Lorcana) - $15.75

🧪 Testing Workflow

1. Login as Alice

Email: alice@tcgvault.com
Password: alice123

2. Create a Collection

  • Go to /collections
  • Click "Create Collection"
  • Fill out:
    • Name: "Alice's Pokemon Collection"
    • Description: "My favorite Pokemon cards"
    • Image: (optional) https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5?w=1200
    • Show in Community: Toggle ON for public visibility

3. Add Cards to Collection

  • Navigate to the new collection (auto-redirect after creation)
  • Use "Quick Add" search in empty state
  • Search for "Pikachu" and click to add
  • Search for "Charizard" and click to add
  • See real-time collection value updates

4. Invite Bob as Collaborator

  • Click "Invite Collaborator" button
  • Enter: bob@tcgvault.com
  • Role: Collaborator (default)
  • Message: "Help me build this Pokemon collection!"
  • Click "Send Invitation"

5. Switch to Bob's Account

  • Logout and login as Bob
  • Email: bob@tcgvault.com
  • Password: bob123

6. Accept Invitation (Simulated)

Since we're testing locally, simulate email acceptance:

  • Go to: /invite/accept?token=MOCK_TOKEN
  • Or manually add Bob to Alice's collection via database

7. Test Collaboration

As Bob:

  • Go to /collections - should see Alice's collection
  • Open Alice's collection
  • Add more cards using Quick Add
  • See Bob's activity in collaboration panel

8. Test Permission Levels

  • Bob can add/edit cards (Collaborator role)
  • Bob cannot delete collection (only Alice can)
  • Collection shows as "Public" but editing requires invitation

🔧 Quick Database Commands

Add Bob to Alice's Collection Manually:

-- Get collection ID (usually 1 for first collection)
SELECT id FROM collections WHERE name LIKE '%Alice%';

-- Add Bob as collaborator
INSERT INTO collection_permissions (collection_id, user_id, role, status)
VALUES (1, 3, 'editor', 'active');

Check Users:

node scripts/list-users.js

🎯 What to Test

Collection Management:

  • Create collection with image and visibility
  • Real-time stats (card count, value)
  • Only see your own collections initially

Card Management:

  • Search and add cards via Quick Add
  • Real card data with images and prices
  • Collection value updates automatically

Collaboration:

  • Invite collaborators with email
  • Permission indicators throughout UI
  • Activity logging for all changes

User Experience:

  • Beautiful empty states with guidance
  • Real-time search with dropdown results
  • Success confirmations and navigation
  • Permission-based UI elements

🚀 Ready to Test!

The system now provides a complete, real-world testing environment with:

  • Real user authentication
  • Database-driven collections and cards
  • Working collaboration system
  • Beautiful UX with proper empty states
  • Permission-based access control

Start testing by logging in as Alice and creating your first collection! 🎮