Generate a fully functional, multi-page Next.js MVP application for VideoForge, a modernized, performant, and modular open-source video player framework. The application should not just be a landing page but a complete, deployable web application.
**1. PROJECT OVERVIEW:**
VideoForge is a next-generation, open-source video player framework, built from the ground up to address the performance, size, and architectural limitations of legacy players like the original Video.js. It aims to provide developers and content publishers with a highly optimized, modular, and customizable video playback solution. The core value proposition is delivering a significantly smaller (targeting <1MB gzipped), faster, and more extensible video player that integrates seamlessly into modern web applications. This MVP will showcase the core player functionality, a developer portal for documentation and integration examples, and a basic system for community contributions.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **UI Library:** shadcn/ui (for accessible, reusable components)
- **Styling:** Tailwind CSS (utility-first CSS framework)
- **ORM:** Drizzle ORM (type-safe SQL queries)
- **Database:** PostgreSQL (or a compatible SQL database like Supabase/Vercel Postgres)
- **Authentication:** NextAuth.js (for robust user authentication)
- **State Management:** React Context API / Zustand (for global state)
- **API Layer:** Server Actions / Route Handlers
- **Deployment:** Vercel (recommended for Next.js, easy deployment, Postgres integration)
- **Other Packages:** `clsx` (for conditional class names), `react-hook-form` (for form management), `zod` (for schema validation), `date-fns` (for date manipulation).
**3. DATABASE SCHEMA (Drizzle ORM - PostgreSQL):**
```typescript
// db/schema.ts
import { pgTable, serial, text, timestamp, varchar, boolean, jsonb, integer }
from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';
// Users table for authentication
export const users = pgTable('users', {
id: text('id').primaryKey(), // UUID from NextAuth.js
name: text('name'),
email: text('email').notNull().unique(),
emailVerified: timestamp('emailVerified', { mode: 'date' }),
image: text('image'),
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow(),
updatedAt: timestamp('updatedAt', { mode: 'date' }).defaultNow(),
});
// Core Video Player Configurations
export const playerConfigs = pgTable('player_configs', {
id: serial('id').primaryKey(),
userId: text('user_id').references(() => users.id, { onDelete: 'cascade' }),
name: varchar('name', { length: 255 }).notNull(),
configJson: jsonb('config_json').notNull(), // Stores player settings (e.g., autoplay, controls, aspectRatio)
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow(),
updatedAt: timestamp('updatedAt', { mode: 'date' }).defaultNow(),
});
// Plugins available for VideoForge
export const plugins = pgTable('plugins', {
id: serial('id').primaryKey(),
name: varchar('name', { length: 255 }).notNull().unique(),
description: text('description'),
authorId: text('author_id').references(() => users.id, { onDelete: 'set null' }),
githubRepo: varchar('github_repo', { length: 500 }), // Link to GitHub repo
version: varchar('version', { length: 50 }).notNull(),
isActive: boolean('is_active').default(false), // Admin toggle
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow(),
});
// User's installed plugins (many-to-many relation with playerConfigs would be better for MVP, but let's keep it simple)
export const userPlugins = pgTable('user_plugins', {
userId: text('user_id').references(() => users.id, { onDelete: 'cascade' }),
pluginId: integer('plugin_id').references(() => plugins.id, { onDelete: 'cascade' }),
installedAt: timestamp('installedAt', { mode: 'date' }).defaultNow(),
PRIMARY KEY(userId, pluginId)
});
// Documentation articles
export const docs = pgTable('docs', {
id: serial('id').primaryKey(),
slug: varchar('slug', { length: 255 }).notNull().unique(),
title: varchar('title', { length: 255 }).notNull(),
content: text('content').notNull(),
category: varchar('category', { length: 100 }),
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow(),
updatedAt: timestamp('updatedAt', { mode: 'date' }).defaultNow(),
});
// Community Issues/Bugs
export const issues = pgTable('issues', {
id: serial('id').primaryKey(),
userId: text('user_id').references(() => users.id, { onDelete: 'cascade' }),
title: varchar('title', { length: 255 }).notNull(),
description: text('description').notNull(),
status: varchar('status', { enum: ['open', 'in_progress', 'closed'] }).default('open'),
type: varchar('type', { enum: ['bug', 'feature_request'] }).default('bug'),
createdAt: timestamp('createdAt', { mode: 'date' }).defaultNow(),
updatedAt: timestamp('updatedAt', { mode: 'date' }).defaultNow(),
});
// Relations (Example for Users and PlayerConfigs)
export const usersRelations = relations(users, {
playerConfigs: relationships.oneToMany(playerConfigs, playerConfigs.userId),
});
export const playerConfigsRelations = relations(playerConfigs, {
user: relationships.manyToOne(users, users.id),
});
export const pluginsRelations = relations(plugins, {
author: relationships.manyToOne(users, users.id),
userPlugins: relationships.oneToMany(userPlugins, userPlugins.pluginId)
});
export const userPluginsRelations = relations(userPlugins, {
user: relationships.manyToOne(users, users.userId),
plugin: relationships.manyToOne(plugins, plugins.id)
});
export const issuesRelations = relations(issues, {
user: relationships.manyToOne(users, users.id)
});
```
**4. CORE FEATURES & USER FLOW:**
**A. Authentication Flow:**
1. User lands on the homepage.
2. Clicks 'Sign In' or 'Get Started'.
3. Redirected to NextAuth.js sign-in page (options: GitHub, Google, Email).
4. Upon successful sign-in, user is redirected to their dashboard.
5. Dashboard displays user-specific configurations and quick links.
**B. Dashboard:**
1. **Page:** `/dashboard` (Protected route).
2. **Functionality:**
- Displays a list of the user's existing `playerConfigs`.
- Button to create a 'New Player Configuration'.
- Quick links to Documentation and Issue Tracker.
- Shows currently installed plugins (from `userPlugins`).
3. **User Flow (Create Config):**
- Click 'New Player Configuration'.
- Navigate to `/dashboard/configs/new`.
- User is prompted to name the configuration.
- Default player settings are pre-filled.
- User can select available plugins to associate with this configuration.
- Click 'Save'. Configuration is saved to `playerConfigs` table, linked to the user.
- Redirected to the config edit page.
**C. Player Configuration Editor:**
1. **Page:** `/dashboard/configs/[id]` (Protected route).
2. **Functionality:**
- Load and display existing configuration (`playerConfigs.configJson`).
- **Player Preview:** An embedded instance of the VideoForge player on the right or bottom half of the screen, reflecting current settings.
- **Settings Panel:** Controls (using shadcn/ui components like sliders, toggles, input fields) to modify `configJson` properties (e.g., `autoplay`, `controls`, `aspectRatio`, `playbackRates`, `themeColor`).
- **Plugin Selection:** Checkboxes/Toggles to enable/disable plugins for this configuration.
- **Save Button:** Updates the `playerConfigs` entry via Server Action.
- **Code Snippet Generator:** Generates an `<iframe>` or `<script>` tag with the necessary VideoForge embed code, using the current configuration.
3. **User Flow (Edit):**
- User navigates to `/dashboard/configs/[id]`.
- Player preview loads with the saved configuration.
- User adjusts settings (e.g., enables `controls`).
- Player preview updates dynamically.
- User selects a plugin (e.g., 'Captions').
- User clicks 'Save'.
- Code snippet generator updates.
**D. Documentation Portal:**
1. **Page:** `/docs` (Public route).
2. **Functionality:**
- Displays a list of documentation articles (fetched from `docs` table).
- Sidebar navigation based on `docs.category`.
- **Article View:** `/docs/[slug]` (Public route) displays the content of a single article (`docs.content`).
3. **User Flow (Reading):**
- User navigates to `/docs`.
- Clicks on a category (e.g., 'Getting Started').
- Clicks on an article title (e.g., 'Installation Guide').
- Reads the article content.
**E. Issue Tracker:**
1. **Page:** `/issues` (Public, but with filtering/creation for logged-in users).
2. **Functionality:**
- Displays a list of issues (bugs, feature requests) from the `issues` table.
- Filtering options (status, type).
- **Public:** View issues.
- **Logged-in Users:** Button to create a new issue (`/issues/new`).
- **Issue Detail View:** `/issues/[id]` shows issue details, status, and potentially comments (future enhancement).
3. **User Flow (Reporting Bug):**
- User navigates to `/issues`.
- Clicks 'New Issue'.
- Selects type 'Bug', fills title and description.
- Clicks 'Submit'.
- Issue is saved to the `issues` table.
**F. Plugin Directory:**
1. **Page:** `/plugins` (Public route).
2. **Functionality:**
- Lists available plugins from the `plugins` table.
- Each plugin entry shows name, description, author, GitHub link, version.
- Link to enable/install a plugin for logged-in users (this will update `userPlugins`).
3. **User Flow (Browsing):**
- User navigates to `/plugins`.
- Browses the list.
- Clicks on a plugin's GitHub link to view the source code.
**5. API & DATA FETCHING:**
- **Authentication:** Handled by NextAuth.js. Server Actions and Route Handlers can access session data (`getSession`, `useSession`).
- **Data Fetching Strategy:** Primarily use Server Actions for mutations (POST, PUT, DELETE) and Server Components (fetching data directly from DB using Drizzle) for read operations in read-heavy pages like Dashboard and Docs.
- **API Routes/Server Actions Examples:**
- `POST /api/configs` or `createServerAction()` for `createPlayerConfig`: Request body includes `{ name: string, initialConfig: object, pluginIds: number[] }`. Response: `{ success: boolean, configId?: number, error?: string }`.
- `PUT /api/configs/[id]` or `createServerAction()` for `updatePlayerConfig`: Request body `{ configId: number, updates: object }`. Response: `{ success: boolean, error?: string }`.
- `GET /api/plugins` or Server Component fetch: Returns `Plugin[]` from the `plugins` table.
- `GET /api/docs` or Server Component fetch: Returns `Doc[]` from the `docs` table.
- `POST /api/issues` or `createServerAction()` for `createIssue`: Request body `{ title: string, description: string, type: 'bug' | 'feature_request' }`. Response: `{ success: boolean, issueId?: number, error?: string }`.
- **Client-side Data Fetching:** Use sparingly, primarily for real-time updates within the player preview or interactive elements on the dashboard if needed (e.g., using Zustand for state sync).
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
```
app/
├── (auth)/ // Authentication pages (Login, Signup, etc.)
│ └── page.tsx
├── (marketing)/ // Public marketing pages
│ ├── layout.tsx // Shared layout for marketing pages
│ ├── page.tsx // Homepage
│ └── about/page.tsx
├── (platform)/ // Authenticated platform pages
│ ├── layout.tsx // Shared layout for platform (Dashboard, Configs, etc.)
│ ├── dashboard/
│ │ └── page.tsx // User dashboard listing configs
│ ├── configs/
│ │ ├── new/page.tsx // Create new config page
│ │ └── [id]/page.tsx // Edit config page (includes player preview)
│ ├── plugins/
│ │ └── page.tsx // Plugin directory page
│ ├── issues/
│ │ ├── new/page.tsx // Create new issue page
│ │ └── [id]/page.tsx // Issue detail page
│ │ └── page.tsx // List issues page
│ └── settings/
│ └── page.tsx // User settings page (future)
├── docs/
│ ├── [slug]/page.tsx // Single doc article view
│ └── page.tsx // Docs index page
├── api/
│ ├── auth/[...nextauth]/route.ts // NextAuth.js
│ └── ... (other route handlers if needed)
├── components/
│ ├── ui/
│ │ ├── *.tsx // shadcn/ui components (Button, Input, Card, etc.)
│ ├── layout/
│ │ ├── Header.tsx
│ │ ├── Footer.tsx
│ │ ├── Sidebar.tsx // For Docs and Dashboard
│ │ └── PlatformLayout.tsx // Layout for authenticated sections
│ ├── common/
│ │ ├── VideoForgePlayer.tsx // The core player component (wrapper around actual JS lib)
│ │ ├── ConfigForm.tsx // Form for editing player config
│ │ ├── CodeSnippet.tsx // Generates embed code
│ │ ├── PluginCard.tsx // Displays plugin info
│ │ ├── IssueCard.tsx // Displays issue info
│ ├── auth/
│ │ └── SignInButton.tsx
│ └── Provider.tsx // Global context providers (e.g., ThemeProvider, SessionProvider)
├── lib/
│ ├── db.ts // Drizzle DB connection setup
│ ├── auth.ts // NextAuth.js options
│ ├── utils.ts // Utility functions
│ └── validators.ts // Zod validation schemas
├── styles/
│ └── globals.css // Tailwind CSS base styles
└── layout.tsx // Root layout
└── page.tsx // Root page (redirects to marketing homepage)
```
**State Management:**
- Global state (auth status, user info) via `SessionProvider` and `useSession` from NextAuth.js.
- Local component state for forms, toggles using `useState`, `useReducer`.
- Potentially Zustand for managing the player preview state and configuration form interactions for better performance and cleaner code than deeply nested contexts.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern, Clean, Developer-centric.
- **Color Palette:**
- Primary: `#006AFF` (Vibrant Blue - for actions, links)
- Secondary: `#6366F1` (Indigo - for highlights, accents)
- Dark Background: `#111827` (Very Dark Desaturated Blue/Gray)
- Light Background: `#FFFFFF` (White)
- Card/Element Background: `#1F2937` (Dark Gray)
- Text (Light Mode): `#111827`
- Text (Dark Mode): `#E5E7EB` (Light Gray)
- Accent/Success: `#10B981` (Green)
- Warning/Alert: `#F59E0B` (Amber)
- **Typography:** Inter (or a similar clean sans-serif like Poppins).
- Headings: Bold, larger sizes.
- Body Text: Regular weight, readable size (e.g., 16px).
- **Layout:** Focus on clarity and information hierarchy. Use a two-column layout for the config editor (settings/controls on left, player preview on right). Documentation should have a sidebar for navigation and main content area.
- **Responsiveness:** Mobile-first approach. Ensure components adapt gracefully to different screen sizes. Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`).
- **Visual Elements:** Subtle gradients in headers or buttons, clean icons (e.g., from Lucide Icons via shadcn/ui), rounded corners for a modern feel.
**8. SAMPLE/MOCK DATA:**
**`users` Table:**
1. `{ id: 'clxyz123abc', name: 'Alice Smith', email: 'alice@example.com', emailVerified: new Date(), image: '...' }`
2. `{ id: 'clxyz456def', name: 'Bob Johnson', email: 'bob@example.com', emailVerified: null, image: null }`
**`playerConfigs` Table:**
1. `{ id: 1, userId: 'clxyz123abc', name: 'Homepage Video', configJson: { "aspectRatio": "16:9", "autoplay": true, "controls": false, "plugins": ["captions"] }, createdAt: new Date(), updatedAt: new Date() }`
2. `{ id: 2, userId: 'clxyz123abc', name: 'Embedded Tutorial', configJson: { "aspectRatio": "4:3", "autoplay": false, "controls": true, "playbackRates": [0.75, 1, 1.5, 2] }, createdAt: new Date(), updatedAt: new Date() }`
**`plugins` Table:**
1. `{ id: 1, name: 'Captions', description: 'Adds subtitle support (VTT)', githubRepo: '...', version: '1.2.0', isActive: true }`
2. `{ id: 2, name: 'Quality Selector', description: 'Allows users to choose video quality', githubRepo: '...', version: '1.0.1', isActive: true }`
3. `{ id: 3, name: 'Watermark', description: 'Adds a custom watermark image', githubRepo: '...', version: '0.9.0', isActive: false }`
**`docs` Table:**
1. `{ id: 1, slug: 'getting-started/installation', title: 'Installation Guide', content: '...', category: 'Getting Started', createdAt: new Date() }`
2. `{ id: 2, slug: 'configuration/basic-settings', title: 'Basic Player Settings', content: '...', category: 'Configuration', createdAt: new Date() }`
**`issues` Table:**
1. `{ id: 1, userId: 'clxyz123abc', title: 'Player not playing on Safari', description: '...', status: 'open', type: 'bug', createdAt: new Date() }`
2. `{ id: 2, userId: 'clxyz456def', title: 'Add picture-in-picture mode', description: '...', status: 'open', type: 'feature_request', createdAt: new Date() }`
**9. TURKISH TRANSLATIONS:**
- **App Title:** VideoForge
- **Homepage:**
- Header: "Video Oynatıcınızı Yeniden Tanımlayın"
- Subheader: "Performanslı, modüler ve açık kaynaklı video oynatıcı framework'ü."
- CTA Button: "Başlayın"
- **Dashboard:**
- Title: "Kontrol Paneli"
- "Yeni Oynatıcı Yapılandırması Oluştur"
- "Yapılandırmalarınız"
- "Yüklü Eklentileriniz"
- **Config Editor:**
- Title: "Oynatıcı Yapılandırması Düzenle"
- "Ayarlar"
- "Önizleme"
- "Kaydet"
- "Kod Al"
- "Eklenti Seçin"
- **Documentation:**
- Title: "Dokümantasyon"
- "Makaleler"
- "Kategori"
- **Issues:**
- Title: "Sorunlar ve Öneriler"
- "Yeni Sorun Bildir"
- "Durum: Açık / Devam Ediyor / Kapalı"
- "Tür: Hata / Özellik İsteği"
- **Plugins:**
- Title: "Eklenti Dizini"
- "Mevcut Eklentiler"
- **Buttons:**
- "Oturum Aç"
- "Oturum Kapat"
- "Kaydet"
- "İptal Et"
- "Gönder"
**10. ANIMATIONS:**
- **Page Transitions:** Subtle fade or slide animations between pages using `next/navigation`'s `useRouter` and a library like `Framer Motion` for page transitions.
- **Component Transitions:** Use `AnimatePresence` with `Framer Motion` for elements that enter/exit the DOM (e.g., toggling settings panels, adding/removing plugins in the config editor).
- **Hover Effects:** Slight scale-up or background color change on interactive elements like buttons and cards.
- **Loading States:** Use shimmering placeholders (skeleton loaders) for data fetching. Spinners (`shadcn/ui`'s `Spinner` component or custom) for asynchronous operations (saving, submitting).
- **Input Feedback:** Subtle animations on form validation errors.
**11. EDGE CASES:**
- **Authentication:** Handle unauthorized access gracefully (redirect to login, show appropriate messages).
- **Empty States:** Design informative empty states for the dashboard (no configs), docs (no articles found), issues (no issues reported), plugins (no plugins available). Include CTAs to encourage creation/contribution.
- **Data Validation:** Use Zod for robust validation on all form inputs and API request bodies.
- **Error Handling:** Implement try-catch blocks in Server Actions and API routes. Display user-friendly error messages using toasts (`shadcn/ui/toast`). Gracefully handle database connection errors.
- **Rate Limiting:** Implement basic rate limiting on API routes to prevent abuse.
- **Player Errors:** Implement error handling within the `VideoForgePlayer` component for issues like network errors, invalid video sources, etc. Display informative messages to the user.