Closes P1 #10 step 2. Adds @playwright/test@^1.60.0, playwright.config.js (CI fail-loud / dev warn-and-continue for missing VERCEL_AUTOMATION_BYPASS_SECRET, two projects partitioned by testMatch, snapshotPathTemplate aligned with workflow upload path), tests/visual/homepage.spec.ts (1 test, no baseline committed per architect Boot-the-brief Finding 7), 3 npm scripts, and 3 .gitignore entries. Smoke tests now run end-to-end against Vercel preview with x-vercel-protection-bypass header: 3/3 passed in 2.9s, total workflow 59s. Zero secret leaks in log. PR #18 architect-commit 3ac527e, implementer-commit c72d006.
📤 Avatar Upload API (/api/user/avatar):
- File upload with multipart form data parsing
- Comprehensive validation (file type, size limits)
- Support for JPEG, PNG, GIF, WebP images up to 5MB
- Automatic cleanup of old avatars before new uploads
- Vercel Blob integration with public access
- Database tracking in user_avatars table
- Error handling for upload failures
🎨 Avatar Generation API (/api/user/avatar/generate):
- Custom avatar generation using DiceBear API
- Fire-themed color scheme (matching app branding)
- Personalized based on user initials/username/email
- SVG format for crisp display at any size
- Automatic fallback if generation fails
- Same cleanup and storage workflow as uploads
🗑️ Account Deletion API (/api/user/delete):
- Complete user data cleanup including Vercel Blob files
- Cascading deletion respecting foreign key constraints
- Admin account protection (prevents self-deletion)
- Comprehensive cleanup order:
* User avatars from Vercel Blob storage
* Deck cards, decks, collection cards, collections
* User cards, avatar records, settings
* Finally the user account itself
- Detailed logging for audit trail
- Graceful error handling with specific error messages
🔧 Technical Features:
- Custom multipart form data parser for file uploads
- Vercel Blob put/del operations with error handling
- Unique filename generation with timestamps
- Database transaction-like cleanup for deletions
- File type validation and size limits
- Proper CORS headers for all endpoints
🎯 Integration Ready:
- Works seamlessly with existing profile page UI
- Supports both upload and generate avatar buttons
- Returns avatar URLs for immediate display
- Database consistency with user profile system
- Production-ready error handling and validation
The avatar system is now fully functional with Vercel Blob! 📸✨
- Install @vercel/analytics and @vercel/speed-insights packages
- Integrate Analytics component for user behavior tracking
- Add SpeedInsights component for Core Web Vitals monitoring
- Track page views, user interactions, and performance metrics
