thrilltrack-explorer/migration/PHASE_07_MEDIA_PHOTOS.md

PHASE 7: Media & Photos

Status: ⬜ Not Started
Estimated Time: 8-10 hours
Priority: HIGH
Depends On: Phase 1 (Foundation)
Blocks: Phase 12 (Pages Migration)

---

🎯 Goal

Migrate photo upload and management from Supabase Storage to Django + CloudFlare Images.

---

📋 Tasks

Task 7.1: Photos Service (3 hours)

File: src/services/photos/photosService.ts

class PhotosService extends BaseService {
  // GET /photos/
  async getPhotos(filters?: PhotoFilters): Promise<PaginatedResponse<Photo>>
  
  // GET /photos/{id}/
  async getPhoto(id: string): Promise<Photo>
  
  // POST /photos/upload/
  async uploadPhoto(file: File, metadata: PhotoMetadata): Promise<Photo>
  
  // PATCH /photos/{id}/
  async updatePhoto(id: string, data: Partial<PhotoData>): Promise<Photo>
  
  // DELETE /photos/{id}/
  async deletePhoto(id: string): Promise<void>
  
  // GET /photos/?entity_type={type}&entity_id={id}
  async getEntityPhotos(entityType: string, entityId: string): Promise<Photo[]>
  
  // POST /photos/cloudflare-upload-url/
  async getUploadUrl(): Promise<{ uploadUrl: string; imageId: string }>
}

Checklist

• Create photosService.ts
• Handle CloudFlare upload workflow
• Create types and mappers
• Handle photo metadata properly

---

Task 7.2: Update Photo Upload Components (3 hours)

Files:

• src/components/upload/PhotoUpload.tsx
• src/components/upload/UppyPhotoUpload.tsx
• src/components/upload/EntityMultiImageUploader.tsx

New Upload Flow

1. Get CloudFlare upload URL from Django
2. Upload file directly to CloudFlare
3. Send CloudFlare image ID + metadata to Django
4. Django creates Photo record

Checklist

• Replace Supabase Storage with CloudFlare
• Update upload workflow
• Handle upload errors
• Test single photo upload
• Test batch photo uploads

---

Task 7.3: Update Photo Management (2 hours)

Files:

• src/components/upload/PhotoManagementDialog.tsx
• src/components/upload/EntityPhotoGallery.tsx

Checklist

• Replace photo queries with photosService
• Update caption editing
• Update photo deletion
• Test photo gallery display
• Test photo management operations

---

Task 7.4: Update Photo Display Components (2 hours)

Files:

• src/components/rides/RecentPhotosPreview.tsx
• Various entity detail pages with photo galleries

Checklist

• Replace all Supabase Storage URLs with CloudFlare URLs
• Update image optimization parameters
• Test responsive images
• Verify lazy loading works

---

🎯 Success Criteria

• Zero supabase.storage calls
• All photo uploads go through CloudFlare
• Photo metadata saved to Django
• Photo galleries work
• Photo captions can be updated
• Photos can be deleted
• Image URLs are CloudFlare URLs

---

⏭️ Next Phase

Phase 8: Search & Discovery