IPTV Stream Platform

A modern streaming platform built with Nuxt 3 and Nuxt Content, featuring a beautiful UI, video playback capabilities, and a content management system. This platform provides an immersive viewing experience with features like video categorization, search functionality, and a responsive design.

💝 Support My Work

This template and many others are available at NuxtMint.com

Join our friendly Discord community to get help, share your ideas, and connect with other developers!

✨ Showcase

▶️ Watch Full Video Preview

A beautiful and modern streaming platform template with:

• 🎬 Stunning video player interface with Plyr
• 🎨 Clean and responsive design using Tailwind CSS
• 📱 Mobile-first approach with smooth animations
• ⚡️ Lightning-fast performance with Nuxt 3
• 🔥 Built with the latest web technologies

View Demo · Report Bug · Request Feature

✨ Features

• 🎥 Video streaming with Plyr player integration
• 📝 Content management with Nuxt Content
• 🎨 Modern and responsive UI with Tailwind CSS
• 📱 Mobile-first design approach
• 🔍 Content search and filtering
• 📂 JSON-based content management
• 🌈 Beautiful animations and transitions
• 🎬 Video thumbnails and metadata support
• 🏷️ Category and tag-based organization

🚀 Quick Start

Prerequisites

• Node.js 16.x or later
• npm, yarn, or pnpm package manager
• OMDB API key (free) for movie posters and metadata in the Hero section

Installation

1. Clone the repository:

git clone https://github.com/florianjs/iptv-template
cd fiverr-iptv

2. Install dependencies:

# Using npm
npm install

# Using yarn
yarn install

# Using pnpm
pnpm install

3. Set up environment variables:
   • Copy .env.example to .env
   • Add your OMDB API key (get one for free at https://www.omdbapi.com/apikey.aspx)

cp .env.example .env

4. Start the development server:

# Using pnpm (recomended)
pnpm dev

# Using npm
npm run dev

# Using yarn
yarn dev

The application will be available at http://localhost:3000

📁 Project Structure

fiverr-iptv/
├── components/        # Vue components
├── content/
│   └── medias/       # JSON content files for media items
├── pages/            # Application pages and routes
├── public/           # Static files
├── stores/           # Pinia stores
├── app.vue           # Main application file
└── nuxt.config.ts    # Nuxt configuration

💻 Development

Content Management with Nuxt Content

This project uses Nuxt Content for managing media content. All media items are stored as JSON files in the content/medias/ directory, making it easy to:

• Query content using the built-in API
• Leverage powerful search capabilities
• Use Git-based content management
• Benefit from automatic TypeScript types

Adding New Content

Add new media items by creating JSON files in the content/medias/ directory. Each file should follow this structure:

{
  "title": "Movie Title",
  "mediaUrl": "https://example.com/video.mp4",
  "mediaThumbnail": "https://example.com/thumbnail.jpg",
  "mediaType": "video/mp4",
  "tags": ["Category1", "Category2"],
  "description": "Movie description",
  "quality": "4K",
  "duration": "2:30:00",
  "ageRating": "PG-13",
  "genres": ["Action", "Drama"],
  "actors": ["Actor 1", "Actor 2"]
}

Building for Production

Build the application for production:

# Using npm
npm run build

# Using yarn
yarn build

# Using pnpm
pnpm build

Preview the production build:

# Using npm
npm run preview

# Using yarn
yarn preview

# Using pnpm
pnpm preview

🚀 Deployment

Recommended: Cloudflare Pages

This project is optimized for deployment on Cloudflare Pages, which provides:

• Global CDN distribution
• Automatic HTTPS
• Zero cold starts
• Easy deployment process

Follow the Nuxt Content deployment guide for Cloudflare for detailed instructions.

Basic deployment steps:

1. Connect your repository to Cloudflare Pages
2. Set build command: pnpm run build
3. Set build output directory: .output/public
4. Add environment variables:
   • OMDB_API_KEY=your_api_key
5. Add a D1 SQL Database from Cloudflare
6. Bind your database to your Cloudflare Page

🔧 Configuration

Environment Variables

The following environment variables are required:

# OMDB API key for movie posters and metadata (required)
OMDB_API_KEY=your_api_key_here

To get started:

1. Sign up for a free OMDB API key at https://www.omdbapi.com/apikey.aspx
2. Copy .env.example to .env
3. Replace your_api_key_here with your actual OMDB API key

Nuxt Configuration

The application can be configured through the nuxt.config.ts file. Key configurations include:

• Content module settings
• Tailwind CSS configuration
• Plyr player options
• Route handling

📱 Mobile Support

The application is fully responsive and optimized for mobile devices. Features include:

• Adaptive layouts
• Touch-friendly controls
• Optimized animations
• Mobile-specific UI enhancements

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Nuxt.js - The Vue Framework
• Tailwind CSS - CSS Framework
• Plyr - Media Player
• Pinia - State Management
• Nuxt Content - Content Management
• Cloudflare Pages - Deployment Platform
• OMDB API - Movie Data API