videofolxtv/replit.md

# VideoStream - Video Streaming Application

## Overview

VideoStream is a modern web application for streaming and managing video content. The application provides a YouTube-like interface where users can browse, search, and watch videos. It features a responsive design with video cards displaying thumbnails, titles, descriptions, and metadata. The app includes search functionality, category filtering, and a modal-based video player for seamless viewing experiences.

## User Preferences

Preferred communication style: Simple, everyday language.

## Recent Updates (August 4, 2025)

### Video Streaming Implementation ✅
- Successfully implemented Bunny.net iframe embed for private video library access
- Videos stream reliably using https://iframe.mediadelivery.net/embed/ approach
- Added fullscreen capabilities and proper video controls
- Resolved authentication issues with private video library (ID: 476412)

### Advanced Thumbnail Generation System ✅
- Implemented FFmpeg and ImageMagick for extracting real frames from videos
- Added ability to specify exact timestamp for thumbnail generation (e.g., ?t=30)
- Created comprehensive ThumbnailGenerator class with multiple extraction options
- Added API endpoints for generating multiple thumbnails at once
- Built React component for easy thumbnail selection and generation
- Fallback to attractive SVG thumbnails when video extraction fails
- Cache system for optimized performance and reduced server load

### Video Sharing Functionality ✅
- Added comprehensive share functionality for social media platforms
- Created dedicated video pages with shareable URLs (/video/:id)
- Implemented Open Graph meta tags for proper social media previews
- Added share buttons on video cards and in video modal
- SVG thumbnails ensure consistent sharing experience across platforms

### User Management & Social Features ⚠️ (In Progress)
- Implemented PostgreSQL database schema for users, playlists, and favorites
- Created complete API routes for user registration, playlists, and favorites management
- Built frontend pages for playlists (/playlists) and favorites (/favorites) with React components
- Added navigation component with Home, Playlists, and Favorites sections
- Created video action buttons (favorite/playlist) integrated into video cards
- Developed custom hooks for favorites and playlists management
- Note: Database integration pending - tables need to be created and storage implementation completed

## System Architecture

### Frontend Architecture
The frontend is built using **React** with **TypeScript** and follows a modern component-based architecture:

- **UI Framework**: React with TypeScript for type safety and better development experience
- **Styling**: Tailwind CSS for utility-first styling with a custom dark theme optimized for video content
- **Component Library**: Shadcn/ui components providing consistent, accessible UI elements
- **State Management**: TanStack Query (React Query) for server state management and caching
- **Routing**: Wouter for lightweight client-side routing
- **Build Tool**: Vite for fast development and optimized production builds

The frontend uses a **component composition pattern** with separate components for video cards, search headers, video grids, and modal players. This approach promotes reusability and maintains clean separation of concerns.

### Backend Architecture
The backend follows a **REST API pattern** using **Express.js**:

- **Server Framework**: Express.js with TypeScript for type-safe server development
- **API Design**: RESTful endpoints for video operations (GET, POST) with pagination support
- **Storage Layer**: Abstracted storage interface allowing for multiple implementations (currently using in-memory storage with plans for database integration)
- **Middleware**: Custom logging middleware for API request tracking and error handling

The server implements a **middleware pattern** for request processing and includes development-specific tooling like Vite integration for hot module replacement.

### Data Storage Architecture
The application uses a **flexible storage abstraction**:

- **ORM**: Drizzle ORM configured for PostgreSQL with type-safe database operations
- **Database**: PostgreSQL (configured via Neon Database) for production data persistence
- **Schema Management**: Centralized schema definitions in TypeScript with automatic type generation
- **Development Storage**: In-memory storage implementation for development and testing

The storage layer uses an **interface-based design** allowing easy switching between storage implementations without affecting business logic.

### Authentication & Authorization
Currently uses **session-based architecture**:

- **Session Management**: Express sessions with PostgreSQL session store (connect-pg-simple)
- **Security**: CORS configuration and secure session handling
- **Future-Ready**: Architecture prepared for JWT or OAuth integration

### Build & Development Architecture
The application uses a **monorepo structure** with shared code:

- **Monorepo Pattern**: Shared schema and types between frontend and backend
- **Development**: Vite dev server with Express backend proxy for seamless development
- **Production**: Optimized builds with static asset serving and server bundling
- **TypeScript**: Comprehensive type checking across the entire stack

### Performance Optimizations
- **Lazy Loading**: Video thumbnails and content loaded on demand
- **Caching**: TanStack Query provides intelligent caching and background updates
- **Pagination**: Server-side pagination for efficient data loading
- **Bundle Optimization**: Tree-shaking and code splitting via Vite

## External Dependencies

### Core Backend Services
- **Neon Database**: PostgreSQL hosting service for production data storage
- **Express.js**: Web application framework for Node.js
- **Drizzle ORM**: TypeScript ORM for database operations

### Frontend Libraries
- **React & React DOM**: Core UI library and rendering
- **TanStack Query**: Server state management and caching
- **Wouter**: Lightweight routing solution
- **Tailwind CSS**: Utility-first CSS framework
- **Shadcn/ui**: Component library built on Radix UI primitives

### UI Component Libraries
- **Radix UI**: Accessible, unstyled UI primitives (dialogs, dropdowns, form controls)
- **Lucide React**: Icon library for consistent iconography
- **Class Variance Authority**: Utility for managing component variants

### Development Tools
- **Vite**: Build tool and development server
- **TypeScript**: Type checking and enhanced developer experience
- **ESBuild**: Fast JavaScript bundler for production builds
- **PostCSS & Autoprefixer**: CSS processing and vendor prefixing

### Video Content Integration
- **Sample Video Sources**: Currently using sample videos from Google Cloud Storage
- **Future CDN Integration**: Architecture prepared for video CDN services like Bunny.net or Cloudflare Stream
- **Thumbnail Services**: Currently using Unsplash for sample thumbnails, ready for video thumbnail extraction services

The application is designed with **service abstraction** allowing easy integration of external video hosting, CDN services, and authentication providers without major architectural changes.