PROJECT OVERVIEW:
The application aims to empower users to create professional-quality video clips effortlessly using AI, directly from text prompts. This addresses the growing demand for engaging video content across social media platforms and the challenges faced by individuals and small businesses in producing such content due to time, cost, or technical skill limitations. The core value proposition is democratizing video creation, making it accessible and efficient for everyone.
TECH STACK:
- Frontend: React (using Vite for faster development)
- Styling: Tailwind CSS for rapid UI development and consistency.
- State Management: Zustand for simple and efficient global state management.
- Routing: React Router DOM for client-side navigation.
- AI Integration: Placeholder for API calls to a hypothetical AI video generation service. (In a real implementation, this would involve integrating with services like OpenAI's Sora API, Stability AI's Stable Video Diffusion, or similar). We will simulate API responses for the MVP.
- UI Components: Utilize headless UI components or build custom ones with Tailwind CSS for accessibility and flexibility.
CORE FEATURES:
1. **Text-to-Video Generation:**
* User Flow:
1. User navigates to the 'Create Video' section.
2. User inputs a text prompt describing the desired video scene (e.g., "A majestic dragon flying over a fantasy castle at sunset").
3. User can optionally select a video style (e.g., "cinematic", "anime", "documentary").
4. User clicks 'Generate Video'.
5. A loading indicator is displayed while the AI processes the request.
6. Once generated, the video preview appears in the user's workspace.
* Details: The prompt should guide the AI model to generate a short video clip (e.g., 3-5 seconds).
2. **Basic Video Editing Suite:**
* User Flow:
1. User selects a generated video clip in their workspace.
2. The video opens in the editor.
3. Tools available:
* **Trim:** User can adjust the start and end points of the clip using a timeline slider.
* **Concatenate:** User can select multiple generated clips and merge them into a sequence.
* **Add Text Overlay:** User can add text, choose font, size, color, and position.
* **Background Music:** User can select from a pre-defined library of royalty-free music tracks or upload their own (future feature).
4. User can preview the edits in real-time.
5. User clicks 'Save' to apply changes.
* Details: The editor will be a simple timeline-based interface.
3. **Social Media Export:**
* User Flow:
1. After editing, user clicks the 'Export' button.
2. User selects the target platform (e.g., TikTok, Instagram Reels, YouTube Shorts, Download MP4).
3. The system prepares the video in the appropriate format and aspect ratio.
4. For direct sharing, a confirmation prompt might appear (browser dependent).
5. Alternatively, the user can download the MP4 file.
* Details: MVP will focus on MP4 download and potentially direct links for popular platforms.
4. **User Accounts & Project Management:**
* User Flow:
1. User signs up or logs in.
2. User's generated clips and projects are saved to their account.
3. Dashboard displays a list of 'My Projects'.
4. User can click on a project to re-open it in the editor or view generated clips.
5. User can delete projects.
* Details: Basic authentication (e.g., email/password) and a simple project listing.
UI/UX DESIGN:
- **Layout:** Single Page Application (SPA) structure. A clean, intuitive dashboard with navigation sidebar (or top bar) for 'Create Video', 'My Projects', 'Settings'. The main content area will display the relevant tools and previews.
- **Color Palette:** Primary: `#1DB954` (a vibrant green, suggesting creativity and growth). Secondary: `#FFFFFF` (clean background). Accent: `#282828` (dark for text and key UI elements). Neutral: `#A0A0A0` (for secondary text and borders).
- **Typography:** 'Inter' font family for all text. Use varying weights (e.g., 400 for body, 700 for headings) for hierarchy.
- **Responsive Design:** Mobile-first approach. Use Tailwind CSS's responsive prefixes (sm:, md:, lg:) to ensure usability across all screen sizes. The layout should adapt fluidly, with navigation collapsing into a hamburger menu on smaller screens and editing tools becoming touch-friendly.
- **Component Hierarchy:** Header (Logo, User Auth), Navigation (Sidebar/Menu), Main Content Area (Dashboard, Editor View, Creation Form), Footer (Optional, minimal links).
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing.
- `Header.jsx`: Displays logo and user authentication status/buttons.
- `Navigation.jsx`: Sidebar or top navigation menu.
- `DashboardPage.jsx`: Main page displaying user's projects.
- `ProjectCard.jsx`: Displays a single project summary (thumbnail, title, date).
- `CreateVideoPage.jsx`: Form for text input and style selection.
- `VideoGenerator.jsx`: Component that handles the API call for video generation and displays loading state.
- `VideoEditorPage.jsx`: Main editing interface.
- `Timeline.jsx`: Visual representation of the video clip for trimming.
- `TextOverlayTool.jsx`: Component for adding and configuring text overlays.
- `MusicSelector.jsx`: Component for choosing background music.
- `ExportModal.jsx`: Modal for selecting export format and initiating download.
- `AuthForm.jsx`: Component for login/signup.
- `LoadingSpinner.jsx`: Reusable loading indicator.
- `ErrorMessage.jsx`: Component for displaying errors.
Props examples:
- `VideoGenerator`: `prompt` (string), `onGenerateComplete` (function), `onLoadingChange` (function).
- `TextOverlayTool`: `onTextChange` (function), `initialText` (string).
- `ProjectCard`: `project` (object - { id, title, thumbnailUrl, updatedAt }).
DATA MODEL:
- `User State`: `{ id, name, email, token }`
- `Project State`: `projects: [{ id, title, videoClips: [{ id, src, duration, prompt, generatedAt, edits: { trimStart, trimEnd, textOverlays: [], musicTrack } }] }]`
- `Editor State`: `{ currentClip, selectedTool, timelineState, textOverlayConfig, musicTrack }`
- `Mock Data`: Will be defined within components or a separate mock data file for initial rendering and testing.
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes on buttons and interactive elements.
- **Transitions:** Smooth transitions for modals (fade-in/out), sidebar menus (slide-in/out), and loading state appearances.
- **Loading States:** Use `LoadingSpinner` components with pulsating effects or skeleton loaders for content that is being fetched or generated.
- **Micro-interactions:** Button press feedback, successful save confirmations (e.g., a small checkmark animation).
- **Video Preview:** Smooth playback controls.
EDGE CASES:
- **Empty State:** Dashboard shows a helpful message and a button to 'Create First Video' if no projects exist. Editor shows prompts for adding clips if none are loaded.
- **Error Handling:** Clear error messages for API failures (e.g., "AI generation failed. Please try again."), network issues, or invalid user input. Implement retry mechanisms where appropriate.
- **Validation:** Input validation for text prompts (e.g., length limits, disallowed characters). Ensure video dimensions and formats are valid before export.
- **Accessibility (a11y):** Use semantic HTML, ARIA attributes where necessary, ensure keyboard navigation, sufficient color contrast, and provide alt text for images.
- **API Rate Limiting:** Implement UI feedback if the user exceeds usage limits based on their subscription tier.
SAMPLE DATA:
1. **Mock Project List:**
```json
[
{
"id": "proj_123",
"title": "Summer Promo Video",
"thumbnailUrl": "/path/to/thumbnail1.jpg",
"updatedAt": "2023-10-27T10:00:00Z"
},
{
"id": "proj_456",
"title": "Product Demo Clip",
"thumbnailUrl": "/path/to/thumbnail2.jpg",
"updatedAt": "2023-10-26T15:30:00Z"
}
]
```
2. **Mock Generated Clip:**
```json
{
"id": "clip_abc",
"src": "/path/to/generated_clip.mp4",
"duration": 4.5,
"prompt": "A futuristic cityscape at night with flying cars.",
"generatedAt": "2023-10-27T11:00:00Z",
"edits": {
"trimStart": 0,
"trimEnd": 4.5,
"textOverlays": [],
"musicTrack": null
}
}
```
3. **Mock Text Overlay:**
```json
{
"id": "text_xyz",
"text": "Grand Opening Sale!",
"position": {"x": 50, "y": 10},
"fontSize": 24,
"color": "#FFFFFF"
}
```
4. **Mock Music Track:**
```json
{
"id": "music_001",
"title": "Uplifting Electronic Beat",
"src": "/path/to/music1.mp3"
}
```
5. **Mock User:**
```json
{
"id": "user_789",
"name": "Alice Wonderland",
"email": "alice@example.com"
}
```
6. **Mock API Response (Success):**
```json
{
"success": true,
"data": {
"clipId": "clip_def",
"videoUrl": "/path/to/newly_generated.mp4",
"duration": 3.8,
"promptUsed": "A serene forest path with sunlight filtering through the trees."
}
}
```
7. **Mock API Response (Error):**
```json
{
"success": false,
"error": {
"code": "AI_GENERATION_ERROR",
"message": "Could not process the prompt. Please try a different description."
}
}
```
DEPLOYMENT NOTES:
- **Build:** Use Vite's build command (`npm run build`). Ensure environment variables are correctly configured for production.
- **Environment Variables:** Use `.env` files (e.g., `.env.local`, `.env.production`). Key variables include `VITE_API_BASE_URL` for the AI service endpoint, `NODE_ENV`, etc.
- **Performance Optimizations:** Code splitting using React.lazy and Suspense. Image optimization for thumbnails. Efficient state management to prevent unnecessary re-renders. Lazy loading components not immediately needed.
- **Hosting:** Consider platforms like Vercel, Netlify, or AWS Amplify for easy deployment and scaling of React applications.