da5c38c235
Refactors the project's README file to document the current state, key features and recent changes. Replit-Commit-Author: Agent Replit-Commit-Session-Id: aa92e7e2-ec62-4c92-b21b-02ef78a664c2 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/aa92e7e2-ec62-4c92-b21b-02ef78a664c2/bwzbqEX
105 lines
5.9 KiB
Markdown
105 lines
5.9 KiB
Markdown
# 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. |