videofolxtv/replit.md

VideoStream - Video Streaming Application

Overview

VideoStream is a fully functional video streaming platform that integrates directly with Bunny.net CDN for secure video delivery. The application successfully streams 85 private videos from the user's Bunny.net library through a custom web interface. It features a YouTube-like design with video cards, search functionality, and a professional video player with full controls (play, pause, volume, progress bar, fullscreen).

Recent Changes (August 2025)

• ✅ Working Video Player: Successfully implemented HLS.js-based video player with signed URL authentication for private Bunny.net videos
• ✅ Functional Controls: All video controls now work properly - play/pause, volume, progress bar, fullscreen
• ✅ Search Functionality: Client-side search working with proper text visibility (white background, black text)
• ✅ Bunny.net Integration: Complete integration with private video library using signed URLs for secure access
• ✅ Error Handling: Robust error handling with HLS recovery and iframe fallback options
• ✅ Performance: Optimized video loading with adaptive bitrate streaming and proper buffering

User Preferences

Preferred communication style: Simple, everyday language.

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.