As a frontend developer, I want to implement the global theme, color palette, and structural layout across all scaffold pages so they look identical to the mock-design pages. Primary: #FF007F, Secondary: #2C3E50, Accent: #FFD700. Apply bold typography, smooth animations, and mobile-first responsive layout. Remove any scaffold pages not present in the user flows. This task is independent of all others and must be completed first.
As a user, I want to use the Home page so I can browse the community video feed, like, comment, and follow other creators. Implement based on existing Home (v2) JSX design. Page is reached after login and links to the Library for song selection.
As a user, I want to use the Landing page so I can view the interactive 3D soundwave animation that reacts to cursor/touch input, hear a background preview track, and navigate to Login or Signup. Implement based on existing Landing (v3) JSX design. Soundwave peaks should link to 'Upload Song', 'Record Video', and 'Explore Library' sections. Micro-interactions (vibrations, sound effects) must be included.
As a user, I want to use the Library page so I can browse and select songs from the pre-curated library or upload my own song. Implement based on existing Library (v2) JSX design. Includes song upload control (MP3, WAV, AAC) and library browsing. Links to Studio page after song selection.
As a user, I want to use the Login page so I can sign in to the platform. Implement based on existing Login (v2) JSX design. Page navigates to Home (Browse Feed) for users and Dashboard for admins on successful login. Follows the theme set in t1.
As a user, I want to use the Signup page so I can create a new account on the platform. Implement based on existing Signup (v2) JSX design. Page is accessible from the Landing page and navigates to Login or Home after successful registration.
As a user, I want to use the Studio page so I can record my lipsync video using my device's camera and microphone with the selected song playing. Implement based on existing Studio (v2) JSX design. Page is reached from Library after song selection and navigates to Editor after recording.
As an admin, I want to use the Dashboard page so I can view an overview of platform activity and navigate to Library management and Moderation tools. Implement based on existing Dashboard (v2) JSX design. Accessible after admin login.
As a user, I want to use the backend API for song uploads and library management so I can upload my own songs (MP3, WAV, AAC, max 50MB) and browse the pre-curated library. Implement FastAPI endpoints: POST /songs/upload, GET /songs/library, GET /songs/{id}. Store files in object storage, metadata in MySQL. Support pagination and search/filter.
As a user, I want to use the Editor page so I can apply filters, effects, and overlays to my recorded lipsync video. Implement based on existing Editor (v2) JSX design. Includes EffectsSidebar, VideoPreviewCanvas, TimelineInspector, TimelineEditor, FilterCarousel, LyricsOverlayPanel, ExportPublishBar, and EditorSongStrip with song upload support. Navigates to Share page on publish.
As an admin, I want to use the Moderation page so I can review user-generated content and remove videos that violate community guidelines. Implement based on existing Moderation (v2) JSX design. Accessible from the Admin Dashboard.
As an admin, I want to use the backend API for library management so I can add, remove, and categorize tracks in the song library. Implement FastAPI endpoints: POST /admin/songs, DELETE /admin/songs/{id}, PATCH /admin/songs/{id}/category. Role-based access control (admin only).
As a user, I want to use the backend API for video recording so I can upload and store my lipsync video recordings. Implement FastAPI endpoints: POST /videos/upload, GET /videos/{id}. Support high-quality video storage, minimal latency, and association with a song track.
As a user, I want to use the backend API for video editing so I can apply filters and effects to my video and export the final result. Implement FastAPI endpoints: POST /videos/{id}/edit (apply effects), POST /videos/{id}/export. Integrate with Google Nano Banana AI for dynamic visual generation.
As a user, I want to use the Share page so I can publish my edited lipsync video to the platform or export it to other social media platforms. Implement based on existing Share (v2) JSX design. Page is the final step after editing and links back to Home feed.
As a user, I want to use the backend API for sharing so I can publish my video to the platform feed and export it to social media. Implement FastAPI endpoints: POST /videos/{id}/publish, GET /feed (paginated), POST /videos/{id}/export-social. Support likes, comments, and follow relationships.
As an admin, I want to use the backend API for content moderation so I can review and remove user-generated videos that violate community guidelines. Implement FastAPI endpoints: GET /admin/content/review, DELETE /admin/videos/{id}, POST /admin/videos/{id}/flag. Role-based access control (admin only).
As a user, I want to use the AI API for content suggestions so I can receive personalized song and effect recommendations powered by GPT 5.2. Integrate Langchain and Litellm for LLM routing. Implement endpoint: GET /ai/suggestions?user_id=. Use user activity history for context.

No comments yet. Be the first!