B2C
Screen Scribe

warningProblem

"OpenScreen is an open-source alternative to Screen Studio"
psychologyPotansiyel Çözüm

OpenScreen, Screen Studio'nun ücretli modeline karşı, açık kaynaklı ve daha basit bir alternatif sunarak, kullanıcıların harika görünen ürün demoları ve eğitim videoları oluşturmasına olanak tanır. Temel kayıt, zoom efektleri, ses entegrasyonu ve video düzenleme özelliklerini ücretsiz ve esnek bir şekilde sunarak, profesyonel ancak uygun maliyetli video içerik üretimi arayanları hedeflemektedir.
groupHedef Kitle

Ürün demoları, eğitim videoları veya rehberler oluşturmak isteyen ancak Screen Studio gibi profesyonel araçların aylık ücretlerinden kaçınmak isteyen bireysel kullanıcılar, küçük işletmeler, pazarlamacılar, içerik üreticileri ve geliştiriciler. Özellikle açık kaynaklı çözümleri ve kişiselleştirme esnekliğini takdir eden kullanıcılar hedeflenmektedir.
paymentsGelir Modeli

Temel MVP özellikleri ücretsiz sunulacak. Gelişmiş özellikler (örneğin, özel logo/watermark ekleme, daha fazla şablon, bulut depolama entegrasyonu, gelişmiş düzenleme araçları) için isteğe bağlı tek seferlik satın alınabilir 'Pro' özellik paketleri veya abonelik modeli sunulabilir. Açık kaynak topluluğu desteği (bağışlar) da bir gelir akışı olabilir.
Aksiyon Planı

Tüm ekranı veya belirli pencereleri kaydetme özelliği
Otomatik ve manuel zoom efektleri (özelleştirilebilir derinlik ve konum)
Mikrofon ve sistem sesi kaydı
Video kırpma (trimming) ve istenmeyen bölümleri gizleme (cropping)
Arka plan seçimi (renk, gradyan, özel görsel)
Pazar Analizi

8.1Puan
Kaynak: Hacker Newsopen_in_new
AI Prompt

You are tasked with building a fully functional, multi-page MVP of 'Screen Scribe', an open-source, free alternative to Screen Studio, designed for creating high-quality product demos and walkthrough videos. The application will be built using Next.js (App Router), Tailwind CSS, and Drizzle ORM, focusing on a clean, modern UI and robust functionality.

1. PROJECT OVERVIEW:
   - **Application Name:** Screen Scribe
   - **Problem Solved:** High cost of professional screen recording and demo creation tools like Screen Studio ($29/month).
   - **Value Proposition:** Provide a free, open-source, yet powerful and user-friendly tool for recording, editing, and exporting high-quality screen demos and walkthroughs with essential features like zoom, annotations, and background customization.
   - **Target Users:** Individuals, small businesses, marketers, content creators, developers who need professional-looking video demos without recurring subscription fees.

2. TECH STACK:
   - **Framework:** Next.js (App Router)
   - **UI Library:** shadcn/ui (for accessible, reusable components)
   - **Styling:** Tailwind CSS (for rapid UI development)
   - **ORM:** Drizzle ORM (PostgreSQL compatible)
   - **Database:** PostgreSQL (or SQLite for local development simplicity)
   - **Authentication:** NextAuth.js (or Clerk for easier integration)
   - **State Management:** React Context API / Zustand (for global state if needed, otherwise component-local state)
   - **Video Processing:** Client-side JavaScript APIs (MediaRecorder, Canvas API) for recording. Backend processing might be considered for future advanced features, but MVP focuses on client-side capture and basic editing.
   - **Icons:** Lucide React

3. DATABASE SCHEMA (Drizzle ORM - PostgreSQL syntax):
   ```sql
   -- Users Table
   CREATE TABLE users (
       id TEXT PRIMARY KEY,
       name TEXT,
       email TEXT UNIQUE NOT NULL,
       emailVerified TIMESTAMP WITH TIME ZONE,
       image TEXT,
       createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
   );

   -- Accounts Table (for NextAuth.js)
   CREATE TABLE accounts (
       id TEXT PRIMARY KEY,
       userId TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
       type TEXT NOT NULL,
       provider TEXT NOT NULL,
       providerAccountId TEXT NOT NULL,
       refresh_token TEXT,
       access_token TEXT,
       expires_at TIMESTAMP WITH TIME ZONE,
       token_type TEXT,
       scope TEXT,
       id_token TEXT,
       UNIQUE (provider, providerAccountId)
   );

   -- Sessions Table (for NextAuth.js)
   CREATE TABLE sessions (
       id TEXT PRIMARY KEY,
       sessionToken TEXT UNIQUE NOT NULL,
       userId TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
       expires TIMESTAMP WITH TIME ZONE NOT NULL
   );

   -- Verification Tokens Table (for NextAuth.js)
   CREATE TABLE verification_tokens (
       identifier TEXT NOT NULL,
       token TEXT UNIQUE NOT NULL,
       expires TIMESTAMP WITH TIME ZONE NOT NULL,
       PRIMARY KEY (identifier, token)
   );

   -- Projects/Recordings Table
   CREATE TYPE background_type AS ENUM ('color', 'gradient', 'image', 'wallpaper');

   CREATE TABLE projects (
       id TEXT PRIMARY KEY,
       userId TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
       title TEXT NOT NULL,
       description TEXT,
       createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
       updatedAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
   );

   CREATE TABLE recordings (
       id TEXT PRIMARY KEY,
       projectId TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
       title TEXT NOT NULL,
       filePath TEXT, -- Path to the saved video file (client-side or S3 in future)
       duration INTEGER, -- in seconds
       width INTEGER,
       height INTEGER,
       createdAt TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
       captureSettings JSONB -- Stores details like window/screen, audio source, zoom points, crop areas, background settings, annotations
   );
   ```

4. CORE FEATURES & USER FLOW:
   - **Authentication Flow:**
     - User visits the landing page.
     - Clicks 'Sign In' or 'Get Started'.
     - Redirected to NextAuth.js sign-in page (e.g., Google, GitHub, Email/Password).
     - Upon successful authentication, redirected to the dashboard.
     - User profile data is fetched and stored (or updated) in the `users` table.
   - **Project/Recording Creation:**
     - User lands on the Dashboard after login.
     - Clicks 'New Recording' button.
     - A modal or dedicated page appears for configuration.
     - **Configuration Options:**
       - **Capture Source:** Full Screen / Specific Window (requires user permission via `navigator.mediaDevices.getDisplayMedia`).
       - **Audio Source:** Microphone / System Audio (requires permissions).
       - **Zoom:** Enable/Disable. If enabled, user can add 'zoom points' on a preview or during recording (manual) or have automatic zoom based on cursor/activity (future).
       - **Background:** Select solid color (color picker), gradient (start/end color, direction), or upload custom image/select from predefined wallpapers.
       - **Annotations:** (MVP: Basic text/arrow addition during post-processing) Initially, focus on recording; annotation is a stretch goal or post-processing feature.
       - **Crop:** Define area to hide or crop during or after recording.
     - User clicks 'Start Recording'.
     - Screen Scribe UI provides a countdown (e.g., 3 seconds).
     - Recording starts. A persistent, minimal UI element shows recording status (time elapsed, Stop button, Pause button).
   - **During Recording:**
     - Capture specified source and audio.
     - Apply motion blur to pans/zooms (client-side canvas manipulation or post-processing).
     - User can pause/resume recording.
   - **Stopping & Saving:**
     - User clicks 'Stop Recording'.
     - Recording is processed client-side (e.g., using MediaRecorder API to Blob).
     - User is prompted to name the recording and associate it with a Project (or create a new one).
     - **MVP:** Video is downloaded directly to the user's device as a WebM or MP4 file. No backend storage in MVP.
     - **Future:** Upload to cloud storage (S3, etc.) associated with the `recordings` table entry.
   - **Basic Editing (Post-Processing):**
     - **Trim:** User can select start and end points of the recorded video in a simple timeline interface to cut unwanted parts.
     - **Crop:** Adjust the visible video area.
     - **Background Adjustment:** Modify background color/image after recording.
     - **Zoom Customization:** Fine-tune zoom levels and positions.
   - **Dashboard:**
     - Displays a list of past recordings/projects.
     - Shows thumbnails/previews (generated using a library like `ffmpeg.wasm` or a backend service). Each entry shows title, duration, date.
     - Allows deleting recordings.
     - Link to settings.

5. API & DATA FETCHING:
   - **Next.js API Routes (App Router `route.ts`):**
     - `POST /api/auth/*`: Handled by NextAuth.js for authentication.
     - `GET /api/projects`: Fetch list of user's projects.
     - `POST /api/projects`: Create a new project.
     - `GET /api/projects/[projectId]/recordings`: Fetch recordings for a specific project.
     - `POST /api/recordings`: Save recording metadata (file path placeholder, duration, settings) to the database. Client-side download in MVP.
     - `PUT /api/recordings/[recordingId]`: Update recording metadata (e.g., title, edits).
     - `DELETE /api/recordings/[recordingId]`: Delete recording metadata and potentially the file (if stored backend).
   - **Data Fetching:** Use Server Components for initial data loading (projects, recordings list) where possible. Client Components will handle interactive features, form submissions, and real-time updates using `fetch` or libraries like SWR/React Query.
   - **Request/Response:** Standard JSON format. Use zod for request/response validation.

6. COMPONENT BREAKDOWN (App Router Structure):
   - **`app/layout.tsx`:** Root layout, includes global styles, providers (NextAuth, ThemeProvider), and basic structure.
   - **`app/page.tsx`:** Landing Page (Marketing content, feature highlights, CTA).
   - **`app/dashboard/page.tsx`:** User dashboard. Lists projects and recordings. Requires authentication.
     - Components: `ProjectList`, `RecordingList`, `NewRecordingButton`, `RecordingListItem`.
   - **`app/(auth)/signin/page.tsx`:** Sign-in page (handled by NextAuth.js or custom component).
   - **`app/record/[[...slug]]/page.tsx`:** The core recording interface. This will likely be a heavy Client Component (`'use client'`).
     - Components: `RecordingControls` (Start/Stop/Pause), `CaptureSettingsPanel` (Source, Audio, Zoom config), `BackgroundSelector`, `LivePreview` (Canvas or video element), `MinimalRecorderUI` (visible during recording).
   - **`app/edit/[recordingId]/page.tsx`:** Video editing interface.
     - Components: `VideoPlayer`, `TimelineEditor`, `TrimControls`, `CropTool`, `ZoomEditor`, `BackgroundEditor`, `SaveExportButton`.
   - **`app/settings/page.tsx`:** User settings page.
     - Components: `ProfileForm`, `AccountSettings`, `NotificationPreferences`.
   - **Shared Components (`components/ui/*`):** Buttons, Modals, Input Fields, Selects, Tabs, Icons, etc. (from shadcn/ui).
   - **State Management:** Primarily local component state. Context API or Zustand for global state like user authentication status or recording progress.

7. UI/UX DESIGN & VISUAL IDENTITY:
   - **Style:** Modern Minimalist Clean.
   - **Color Palette:**
     - Primary: `#007AFF` (Vibrant Blue)
     - Secondary: `#AF52DE` (Soft Purple)
     - Accent: `#5AC8FA` (Light Blue)
     - Background: `#F2F2F7` (Off-white)
     - Text (Dark): `#1C1C1E` (Near Black)
     - Text (Light): `#FFFFFF` (White)
     - Borders/Dividers: `#E5E5EA` (Light Gray)
   - **Typography:** System fonts (San Francisco for macOS/iOS, Roboto for Android/ChromeOS) for a native feel. Use `font-inter` as a good cross-platform alternative if needed. Clear hierarchy with distinct headings and body text.
   - **Layout:** Clean, spacious layouts with ample whitespace. Use a grid system (e.g., 12-column) for consistency. Sidebar navigation for authenticated sections (Dashboard, Settings). Main content area for recording/editing interfaces.
   - **Animations:** Subtle and purposeful. Smooth transitions for modals and page changes. Subtle hover effects on buttons and interactive elements. Loading indicators (spinners, skeleton screens) for data fetching and processing.
   - **Responsive Rules:** Mobile-first approach. Ensure usability on smaller screens, with layouts adapting gracefully to tablets and desktops. Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`).
   - **Key Visuals:** Focus on clean iconography, clear calls to action, and an uncluttered interface, especially during the recording process.

8. SAMPLE/MOCK DATA (for `recordings` table, `captureSettings` JSONB):
   - **Recording 1 (Project: 'Intro Video'):**
     `{ id: 'rec_001', projectId: 'proj_abc', title: 'Welcome Demo', duration: 65, width: 1920, height: 1080, createdAt: '2024-07-26T10:00:00Z', captureSettings: '{ "source": "screen", "audio": "mic_sys", "zoomPoints": [{"x": 0.5, "y": 0.5, "duration": 2}], "background": {"type": "color", "value": "#FFFFFF"}, "crop": null }' }`
   - **Recording 2 (Project: 'Tutorials'):**
     `{ id: 'rec_002', projectId: 'proj_def', title: 'Setup Guide - Part 1', duration: 180, width: 1280, height: 720, createdAt: '2024-07-26T11:30:00Z', captureSettings: '{ "source": "window", "windowId": "my_app_window", "audio": "mic", "zoomPoints": [], "background": {"type": "wallpaper", "value": "/wallpapers/abstract.jpg"}, "crop": {"x": 100, "y": 50, "width": 1080, "height": 620} }' }`
   - **Recording 3 (Project: 'Intro Video'):**
     `{ id: 'rec_003', projectId: 'proj_abc', title: 'Feature Highlight: Zooning', duration: 45, width: 1920, height: 1080, createdAt: '2024-07-27T09:15:00Z', captureSettings: '{ "source": "screen", "audio": "sys", "zoomPoints": [{"x": 0.2, "y": 0.3, "duration": 1.5}, {"x": 0.8, "y": 0.7, "duration": 1.5}], "background": {"type": "gradient", "value": "linear-gradient(to right, #4e54c8, #8f94fb)"}, "crop": null }' }`
   - **Recording 4 (Project: 'Quick Tips'):**
     `{ id: 'rec_004', projectId: 'proj_ghi', title: 'Tip 001: Keyboard Shortcut', duration: 15, width: 1280, height: 720, createdAt: '2024-07-27T14:00:00Z', captureSettings: '{ "source": "screen", "audio": "none", "zoomPoints": [], "background": {"type": "color", "value": "#F8F8F8"}, "crop": null }' }`
   - **Recording 5 (Project: 'Tutorials'):**
     `{ id: 'rec_005', projectId: 'proj_def', title: 'Setup Guide - Part 2', duration: 210, width: 1280, height: 720, createdAt: '2024-07-28T10:00:00Z', captureSettings: '{ "source": "screen", "audio": "mic_sys", "zoomPoints": [], "background": {"type": "image", "value": "/uploads/bg_texture.png"}, "crop": null }' }`

9. TURKISH TRANSLATIONS:
   - **App Title:** Screen Scribe
   - **Buttons:** Kayıt Başlat (Start Recording), Kaydı Durdur (Stop Recording), Kaydı Duraklat (Pause Recording), Kaydet (Save), İptal (Cancel), Yeni Kayıt (New Recording), Ayarlar (Settings), Giriş Yap (Sign In), Çıkış Yap (Sign Out), Kırp (Crop), Kes (Trim), Zoom Ekle (Add Zoom), Arka Plan Seç (Select Background).
   - **Labels:** Kayıt Adı (Recording Name), Proje Adı (Project Name), Kaynak (Source), Ses (Audio), Ekran (Screen), Pencere (Window), Mikrofon (Microphone), Sistem Sesi (System Audio), Gelişmiş Ayarlar (Advanced Settings), Renk (Color), Gradyan (Gradient), Özel Görsel (Custom Image), Duvar Kağıdı (Wallpaper).
   - **Messages:** Kayıt başarıyla tamamlandı. (Recording completed successfully.), Kayıt yükleniyor... (Uploading recording...), Hata oluştu. (An error occurred.), Lütfen giriş yapın. (Please sign in.), Kayıt ayarları güncellendi. (Recording settings updated.)
   - **Page Titles:** Kontrol Paneli (Dashboard), Yeni Kayıt Oluştur (Create New Recording), Kayıt Düzenleyici (Recording Editor), Ayarlar (Settings).

10. ANIMATIONS & TRANSITIONS:
    - **Page Transitions:** Use Framer Motion or similar for smooth fade-in/fade-out or slide transitions between pages managed by the App Router's layout system.
    - **Component Transitions:** Animate appearance/disappearance of modals, tooltips, and popovers using Tailwind CSS transitions or Framer Motion.
    - **Button Hovers:** Subtle background color change or slight scale-up effect.
    - **Loading States:** Use shadcn/ui's `Skeleton` component or a simple spinner (`lucide-react` icons) with a translucent overlay while data is being fetched or video is processing/exporting.
    - **Zoom Effect:** Visual indication on the timeline or preview when a zoom point is active or being edited.

11. EDGE CASES:
    - **No Permissions:** Gracefully handle cases where the user denies screen or microphone access. Provide clear instructions on how to grant permissions.
    - **Empty States:** The dashboard should display helpful messages and clear CTAs when there are no projects or recordings yet.
    - **File System Access (Download):** Ensure reliable download initiation. Handle potential browser limitations or errors.
    - **Video Processing Failures:** Implement error handling and user feedback if client-side video processing fails (e.g., due to unsupported codecs, browser limitations, or memory issues).
    - **Authentication Errors:** Handle invalid login attempts, session expiry, and provide clear error messages.
    - **Validation:** Use Zod for all form and API payload validation to ensure data integrity.
    - **Browser Compatibility:** Test across major browsers (Chrome, Firefox, Safari, Edge). Note potential differences in `getDisplayMedia` API support or video encoding performance.
    - **Resource Limits:** Be mindful of browser memory and CPU limits during recording and editing. Implement strategies like segmenting recordings or providing warnings for long/complex operations.