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! 🚀
3.5 KiB
3.5 KiB
🎯 TCG Vault Collaboration Testing Guide
👥 Test Accounts
| User | 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! 🎮