Set up video streaming website with Bunny.net CDN integration

Initialize project structure with UI components, CDN video display, and configurations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/uoltFyL

replit.md

@@ -0,0 +1,96 @@
+# 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.
+
+## 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.