You are an expert AI assistant tasked with generating a fully functional, production-ready Next.js MVP application based on the 'Video Insight Engine' concept. This application will leverage cutting-edge AI for sub-second video search using semantic embeddings. The goal is to create a multi-page, authenticated web application with a robust backend, clean UI, and efficient data handling.
PROJECT OVERVIEW:
The 'Video Insight Engine' is a SaaS platform that solves the problem of inefficient and time-consuming video content analysis. It allows users to upload video files, which are then processed by Google's Gemini Embedding 2 model to generate semantic vector representations. This enables near-instantaneous searching of video content using natural language queries, without the need for manual transcription or frame captioning. The core value proposition is providing users with the ability to pinpoint specific moments within hours of footage in sub-second time, directly comparing natural language queries to the video's vector space. The MVP will include video upload, AI-powered vectorization, natural language search, and an auto-trimming feature for relevant clip extraction. Users can manage their uploaded videos within projects and access their data through a secure, authenticated interface.
TECH STACK:
- Frontend Framework: Next.js (App Router)
- Styling: Tailwind CSS
- UI Components: shadcn/ui (for accessible, reusable components)
- State Management: React Context API / Zustand (for global state if needed, otherwise component state)
- Database ORM: Drizzle ORM (PostgreSQL compatibility)
- Database: PostgreSQL (or a cloud-native equivalent like Neon, Supabase DB)
- Authentication: NextAuth.js (with Google, GitHub, and Email providers)
- AI Integration: Google Generative AI SDK (for Gemini Embedding 2)
- Vector Database: ChromaDB (or a suitable alternative integrated with Drizzle/Postgres if feasible, but ChromaDB is specified for initial indexing ease)
- Deployment: Vercel (recommended for Next.js)
- Form Handling: React Hook Form
- Data Fetching: Server Actions and Route Handlers in Next.js App Router
- Other Libraries: clsx (for classname manipulation), Tailwind Animate (for animations), lucide-react (icons)
DATABASE SCHEMA (PostgreSQL with Drizzle ORM):
1. `users` table:
- `id` (uuid, primary key, default generated)
- `name` (text)
- `email` (text, unique)
- `emailVerified` (timestamp)
- `image` (text, nullable)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
2. `accounts` table (for NextAuth.js):
- `id` (text, primary key)
- `userId` (uuid, foreign key to users.id)
- `type` (text)
- `provider` (text)
- `providerAccountId` (text)
- `refresh_token` (text, nullable)
- `access_token` (text, nullable)
- `expires_at` (timestamp, nullable)
- `token_type` (text, nullable)
- `scope` (text, nullable)
- `id_token` (text, nullable)
- `session_state` (text, nullable)
3. `sessions` table (for NextAuth.js):
- `sessionToken` (text, primary key)
- `userId` (uuid, foreign key to users.id)
- `expires` (timestamp)
4. `verificationTokens` table (for NextAuth.js):
- `identifier` (text)
- `token` (text, primary key)
- `expires` (timestamp)
5. `projects` table:
- `id` (uuid, primary key, default generated)
- `userId` (uuid, foreign key to users.id)
- `name` (text, not null)
- `description` (text, nullable)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
6. `videos` table:
- `id` (uuid, primary key, default generated)
- `projectId` (uuid, foreign key to projects.id)
- `userId` (uuid, foreign key to users.id)
- `fileName` (text, not null)
- `storageUrl` (text, not null) // e.g., S3 URL
- `durationSeconds` (integer)
- `status` (enum: 'pending', 'processing', 'ready', 'error')
- `vectorIndexId` (text, nullable) // Identifier for ChromaDB or other vector store
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
7. `search_results` table (optional, for caching or history):
- `id` (uuid, primary key, default generated)
- `userId` (uuid, foreign key to users.id)
- `query` (text, not null)
- `videoId` (uuid, foreign key to videos.id, nullable)
- `clipStartTimeSeconds` (integer, nullable)
- `clipEndTimeSeconds` (integer, nullable)
- `timestamp` (timestamp, default now())
CORE FEATURES & USER FLOW:
1. Authentication:
- User lands on the homepage.
- Clicks 'Sign In'.
- Presented with options: Google, GitHub, Email/Password.
- Upon successful authentication, user is redirected to the dashboard.
- Sign out functionality available in the user profile dropdown.
2. Project Management:
- Dashboard displays existing projects.
- 'Create New Project' button opens a modal or navigates to a form.
- Form includes 'Project Name' (required) and 'Description' (optional).
- Upon creation, user is redirected to the project's detail page or the dashboard updates.
- Projects can be viewed, edited (name, description), and deleted (with confirmation).
3. Video Upload:
- From a project's detail page, user clicks 'Upload Video'.
- A file input or drag-and-drop area appears.
- User selects one or more video files (e.g., .mp4, .mov).
- Files are uploaded via a server action or API route, potentially using presigned URLs for direct S3 upload.
- The `videos` table is updated with `status: 'pending'` and `fileName`, `storageUrl`, `durationSeconds` (if obtainable upfront).
- A background job/queue is triggered to process the video.
4. AI Video Processing & Vectorization (Background Job):
- Triggered after successful video upload.
- Fetches the video file from `storageUrl`.
- Uses Gemini Embedding 2 to generate dense vector embeddings for the video content. This is the core AI step. The prompt implies direct video embedding, so the process will involve feeding video chunks/frames (or a representation thereof) directly to the Gemini API if it supports this. If Gemini Embedding 2 API for direct video embedding isn't publicly available or suitable for this MVP, a fallback might be necessary (e.g., frame extraction + image embedding, though this deviates from the 'no intermediate text' goal).
- Stores these embeddings. The prompt mentions ChromaDB. The MVP will likely index these vectors into ChromaDB, associating each vector with a timestamp or frame range from the video.
- Updates the `videos` table with `status: 'ready'` and `vectorIndexId` (ChromaDB document ID or similar).
- If processing fails, `status` is set to `'error'`, and an error message might be logged.
- *Note*: The prompt mentions indexing costs. This backend process needs careful optimization and potentially a queuing system (like BullMQ or cloud-native queues).
5. Natural Language Video Search:
- On the project detail page or a dedicated search page, a search bar is present.
- User types a natural language query (e.g., "dog chasing a ball").
- User submits the query.
- The query is sent to a backend API route or server action.
- The backend uses the Gemini API to get the vector embedding for the query text.
- This query vector is used to search the vector database (ChromaDB) for the most similar video content vectors within the selected project's scope.
- The search returns the closest matching segments (start time, end time, score).
6. Auto-Clipping & Playback:
- Search results display the most relevant video segments.
- Each result shows a thumbnail (generated during processing or on-demand) and the time range.
- Clicking a result triggers the auto-trimming functionality (conceptually, this means preparing the relevant segment).
- The MVP will display the trimmed clip using an HTML video player, potentially seeking to the start time. Advanced trimming (server-side) might be deferred post-MVP.
- The video player should allow playback of the extracted clip.
API & DATA FETCHING:
- Server Actions (Next.js App Router) will be used for mutations (CRUD operations on projects, videos, user profile updates) and authenticated data fetching where appropriate.
- Route Handlers (API Routes) will be used for backend-heavy tasks like initiating AI processing or handling external webhook events if necessary.
- Authentication: NextAuth.js session object will be available on the client and server, providing `userId`.
- Data fetching will prioritize Server Components where possible, fetching data directly in the component or via Server Actions.
- AI Interaction: A dedicated service/module will handle communication with the Gemini API and ChromaDB.
- Video Upload: Can use `multipart/form-data` with Server Actions or a separate API route. Consider presigned URLs for large files to offload server.
- Search Endpoint: POST `/api/search` or a Server Action. Request Body: `{ projectId: string, query: string }`. Response Body: `Array<{ startTime: number, endTime: number, score: number, videoId: string, previewUrl?: string }>`. The `videoId` and time range will be used to fetch/display the segment.
COMPONENT BREAKDOWN (Next.js App Router):
- `app/layout.tsx`: Root layout with global styles, shadcn/ui ThemeProvider, AuthProvider.
- `app/page.tsx`: Landing page (public).
- `app/auth/signin/page.tsx`: Sign-in page.
- `app/(app)/layout.tsx`: Authenticated application layout (sidebar, header).
- `app/(app)/dashboard/page.tsx`: Main dashboard listing user's projects.
- Components: `ProjectList`, `CreateProjectButton`, `ProjectCard`.
- `app/(app)/projects/[projectId]/page.tsx`: Project detail page.
- Components: `ProjectHeader`, `VideoList`, `UploadVideoButton`, `SearchBar`, `SearchResultItem`, `VideoPlayer`.
- `app/(app)/settings/page.tsx`: User settings page.
- Components: `ProfileForm`, `AccountManagement`.
- `components/ui/`: All shadcn/ui components (Button, Input, Card, Dialog, Form, etc.).
- `components/auth/`: Auth related components (e.g., `SignInButton`, `SignOutButton`, `UserProfileDropdown`).
- `components/common/`: General utility components (e.g., `Spinner`, `ErrorMessage`, `LayoutShell`).
- `components/video/`: Video specific components (`VideoUploadForm`, `VideoPlayer`, `TrimmedClipViewer`).
- `lib/`: Utility functions, AI service clients, ORM configuration, ChromaDB client.
- `styles/globals.css`: Tailwind CSS setup and global styles.
State Management:
- Local component state for forms, toggles, etc.
- Server Actions for data mutations.
- Context API or Zustand for global state like user session, potentially UI state like active project.
UI/UX DESIGN & VISUAL IDENTITY:
- Style: Minimalist Clean with subtle AI/tech accents.
- Color Palette:
- Primary: Deep Blue (`#1e3a8a` - Tailwind `blue-800`)
- Secondary: Teal (`#14b8a6` - Tailwind `teal-500`)
- Accent: Light Gray (`#e5e7eb` - Tailwind `gray-200`)
- Background: Dark Charcoal (`#1f2937` - Tailwind `gray-800`)
- Text: Off-White (`#f3f4f6` - Tailwind `gray-100`)
- Typography: Inter (or a similar clean sans-serif font) for readability.
- Layout: Utilize a responsive sidebar navigation pattern for authenticated areas. Content sections should be clearly defined with ample whitespace. Use cards for project and video listings.
- Responsiveness: Mobile-first approach. Ensure all components adapt gracefully to different screen sizes, using Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`).
- Visual Accents: Subtle gradient overlays on buttons or headers, possibly animated background elements in the landing page suggesting data flow or neural networks. Loading states should be visually clear.
ANIMATIONS:
- Page transitions: Subtle fade-in/out using Next.js `useRouter` and Framer Motion (optional, for enhanced UX).
- Button hover effects: Slight scale-up or background color change.
- Loading indicators: Use shadcn/ui's `Spinner` component or skeleton loaders for data fetching.
- Accordion/Dialog: Default shadcn/ui animations.
- Data Table Sorting/Filtering: Subtle visual feedback.
EDGE CASES:
- **Authentication**: Handle expired sessions, redirecting to login. Ensure all protected routes are guarded.
- **Empty States**: Display informative messages and clear calls-to-action when projects or videos lists are empty.
- **Video Upload**: Handle various file types, large file sizes (consider chunking or signed URLs), upload failures, network interruptions.
- **AI Processing**: Handle API errors from Gemini, rate limits, timeouts. Implement retry mechanisms. Clearly display processing status ('pending', 'processing', 'ready', 'error') to the user.
- **Search**: Handle queries that return no results. Display a clear message. Handle potential errors from the vector database search.
- **Data Validation**: Implement server-side validation for all user inputs (project names, etc.) using libraries like Zod with Drizzle Schema.
- **Permissions**: Ensure users can only access and manage their own projects and videos.
SAMPLE DATA (for frontend development and initial state testing):
1. **User Profile**: `{
id: 'uuid-user-123',
name: 'Alice Wonderland',
email: 'alice@example.com',
image: 'https://example.com/alice.jpg'
}`
2. **Project List**: `[
{
id: 'uuid-proj-abc',
name: 'Marketing Campaign Videos',
description: 'Raw footage for the Q3 campaign',
createdAt: '2023-10-27T10:00:00Z'
},
{
id: 'uuid-proj-def',
name: 'Internal Training Modules',
description: null,
createdAt: '2023-10-26T09:00:00Z'
}
]`
3. **Video List (Project 'uuid-proj-abc')**: `[
{
id: 'uuid-vid-111',
projectId: 'uuid-proj-abc',
fileName: 'ad_draft_01.mp4',
storageUrl: 's3://bucket/ads/ad_draft_01.mp4',
durationSeconds: 125,
status: 'ready',
createdAt: '2023-10-27T10:05:00Z'
},
{
id: 'uuid-vid-222',
projectId: 'uuid-proj-abc',
fileName: 'interview_segment_03.mov',
storageUrl: 's3://bucket/interviews/interview_segment_03.mov',
durationSeconds: 340,
status: 'processing',
createdAt: '2023-10-27T10:06:00Z'
},
{
id: 'uuid-vid-333',
projectId: 'uuid-proj-abc',
fileName: 'raw_footage_scene_5.mp4',
storageUrl: 's3://bucket/raw/raw_footage_scene_5.mp4',
durationSeconds: 600,
status: 'error',
createdAt: '2023-10-27T10:07:00Z'
}
]`
4. **Search Result**: `{
videoId: 'uuid-vid-111',
startTime: 52.3,
endTime: 58.1,
score: 0.92,
query: 'man jumping over obstacle'
}`
5. **Empty Project List State**: A UI element prompting the user to 'Create Your First Project'.
6. **Empty Video List State**: Within a project, a UI element prompting the user to 'Upload Your First Video'.
7. **Search Result (No Match)**: A message indicating 'No relevant clips found for your query. Try refining your search terms.'
8. **Processing Video Item**: A video list item showing a progress bar or spinner indicating 'Processing...' status.
9. **Error Video Item**: A video list item showing an error icon and message, indicating 'Processing failed. Please re-upload or contact support.'
10. **Mock Query for Search**: `"A person in a blue shirt waving"
`
This prompt provides a comprehensive blueprint for building the Video Insight Engine MVP. It details the technology stack, database design, user flows, API specifications, UI components, design aesthetics, and necessary considerations for a robust and scalable application. Remember to implement robust error handling and optimistic UI updates where appropriate.