Ten-oh-One VOD 🎬

A modern, high-performance Video-on-Demand (VOD) streaming platform built with SvelteKit 5, featuring a beautiful UI and seamless video playback experience.

✨ Features

• 3400+ Movies & TV Shows - Extensive collection of video content
• Advanced Search & Filtering - Real-time search with multiple sorting options (title, year, random)
• Infinite Scroll - Smooth pagination with infinite loading
• Responsive Video Player - Built with Vidstack for HLS streaming support
• Multiple Stream Links - Fallback options for reliable playback
• Modern UI/UX - Clean, cinematic design with TailwindCSS 4
• Desktop App Available - Windows desktop application for offline viewing
• No Ads - Uninterrupted viewing experience

🚀 Tech Stack

• Framework: SvelteKit 5 with Svelte 5 runes
• Styling: TailwindCSS 4
• Video Player: Vidstack with HLS.js
• Icons: Lucide Svelte
• Infinite Scroll: svelte-infinite
• Deployment: Vercel Edge Runtime (Singapore region)
• Language: TypeScript

📦 Installation

# Clone the repository
git clone <repository-url>
cd vod-web

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env and add your PUBLIC_BASE_URL

🔧 Environment Variables

Create a .env file in the root directory:

PUBLIC_BASE_URL=your_api_base_url

🛠️ Development

Start the development server:

npm run dev

# Or open in browser automatically
npm run dev -- --open

The app will be available at http://localhost:5173

🏗️ Building

Create a production build:

npm run build

Preview the production build:

npm run preview

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run check - Run Svelte type checking
• npm run check:watch - Run type checking in watch mode
• npm run format - Format code with Prettier
• npm run lint - Lint code with Prettier

🎯 Project Structure

vod-web/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── Header.svelte       # Navigation header
│   │   │   ├── Hero.svelte         # Landing hero section
│   │   │   ├── MovieCard.svelte    # Movie card component
│   │   │   └── MovieSection.svelte # Movie grid with infinite scroll
│   │   └── assets/                 # Static assets
│   ├── routes/
│   │   ├── +page.svelte           # Home page
│   │   ├── +layout.svelte         # Root layout
│   │   └── vod/
│   │       └── [id]/
│   │           └── +page.svelte   # Movie detail page
│   ├── app.css                    # Global styles
│   └── app.html                   # HTML template
├── static/                        # Static files
├── svelte.config.js              # SvelteKit configuration
├── tailwind.config.js            # Tailwind configuration
├── tsconfig.json                 # TypeScript configuration
└── vite.config.ts                # Vite configuration

🎨 Key Components

MovieSection

• Displays movie grid with infinite scroll
• Real-time search functionality
• Multiple sorting options (title A-Z/Z-A, year, random)
• Responsive grid layout (2-5 columns based on screen size)

Movie Detail Page

• Cinematic blurred backdrop
• Multiple streaming link options
• Vidstack video player with HLS support
• Error handling with VLC fallback instructions
• Copy link functionality
• Comprehensive metadata display

Hero Section

• Feature highlights
• Desktop app download links (32-bit & 64-bit)
• Smooth scroll to content

🌐 API Integration

The app connects to a backend API with the following endpoints:

• GET /vod/list - Fetch movies with pagination, search, and sorting
  • Query params: limit, page, q (search), order_by, order_dir
• GET /vod/detail/:id - Fetch movie details including streaming URLs

🚢 Deployment

The app is configured for deployment on Vercel with Edge Runtime (You can change it as you wish):

// svelte.config.js
adapter: adapter({
  runtime: 'edge',
  regions: ['sin1'], // Singapore region
})

Deploy to Vercel:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

🎬 Desktop Application

Windows desktop applications are available:

• 32-bit: Download (74 MB)
• 64-bit: Download (80 MB)

🔗 Links

• Website: vod.1001api.com
• Desktop App Repository: vod-electron
• Backend Repository: vod-be

Built with ❤️ using SvelteKit 5