https://github.com/florianjs/iptv-template
A modern streaming platform built with Nuxt 3 and Nuxt Content.
https://github.com/florianjs/iptv-template
nuxt3 nuxtjs tailwind tailwindcss vue3
Last synced: about 2 months ago
JSON representation
A modern streaming platform built with Nuxt 3 and Nuxt Content.
- Host: GitHub
- URL: https://github.com/florianjs/iptv-template
- Owner: florianjs
- License: mit
- Created: 2025-01-30T16:08:47.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-08T11:03:35.000Z (4 months ago)
- Last Synced: 2025-03-28T20:14:22.730Z (2 months ago)
- Topics: nuxt3, nuxtjs, tailwind, tailwindcss, vue3
- Language: Vue
- Homepage: https://iptv.0xexile.com/
- Size: 76.4 MB
- Stars: 23
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
[](https://nuxtmint.com)
> This template and many others are available at [NuxtMint.com](https://nuxtmint.com)
[](https://discord.gg/dZF8tDgBrM)
> Join our friendly Discord community to get help, share your ideas, and connect with other developers!
## โจ Showcase

[โถ๏ธ Watch Full Video Preview](https://github.com/florianjs/iptv-template/raw/refs/heads/main/public/iptv.mp4)
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](https://iptv.0xexile.com/) ยท [Report Bug](https://github.com/florianjs/iptv-template/issues) ยท [Request Feature](https://github.com/florianjs/iptv-template/issues)
## โจ 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:
```bash
git clone https://github.com/florianjs/iptv-template
cd fiverr-iptv
```2. Install dependencies:
```bash
# 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)```bash
cp .env.example .env
```4. Start the development server:
```bash
# 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](https://content.nuxt.com/) 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:
```json
{
"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:
```bash
# Using npm
npm run build# Using yarn
yarn build# Using pnpm
pnpm build
```Preview the production build:
```bash
# 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 processFollow the [Nuxt Content deployment guide for Cloudflare](https://content.nuxt.com/docs/deploy/serverless#deploy-with-serverless) 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:
```bash
# 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](LICENSE) file for details.
## ๐ Acknowledgments
- [Nuxt.js](https://nuxt.com/) - The Vue Framework
- [Tailwind CSS](https://tailwindcss.com/) - CSS Framework
- [Plyr](https://plyr.io/) - Media Player
- [Pinia](https://pinia.vuejs.org/) - State Management
- [Nuxt Content](https://content.nuxt.com/) - Content Management
- [Cloudflare Pages](https://pages.cloudflare.com/) - Deployment Platform
- [OMDB API](https://www.omdbapi.com/) - Movie Data API