Skip to content

renanm99/webflix-streamer

Repository files navigation

WebFlix Streamer

A web-based streaming application built with Next.js that allows users to browse and stream movies and TV shows using WebTorrent technology.*

Features

  • 🎬 Stream movies and TV shows directly in your browser
  • 📺 Support for TV series with multiple seasons and episodes
  • 🔍 Search functionality to easily# WebFlix Streamer
  • 🎯 Responsive design that works on desktop and mobile devices
  • 🖼️ Beautiful UI with movie posters and backdrop images
  • 🔄 Real-time streaming
  • 📱 Mobile-friendly interface

A web-based streaming application built with Next.js that allows users to browse and stream movies and TV shows using WebTorrent technology.

Screenshots

WebFlix Home Page

Showcase

Feature Screenshot
Movie Browsing Browse Movies
TV Show Episodes Episode Selection
Streaming Player Streaming Player

Responsive Design

Mobile View Tablet View

Tech Stack

  • Framework: Next.js 15
  • UI: React 19
  • Styling: Tailwind CSS
  • Streaming: WebTorrent

Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm

Getting Node.js (v22.14) and npm (v10.9.2)

Windows -> Install Node.js (v22.14) and npm (v10.9.2):

# Download and install fnm:
winget install Schniz.fnm
# Download and install Node.js:
fnm install 22
# Verify the Node.js version:
node -v # Should print "v22.14.0".
# Verify npm version:
npm -v # Should print "10.9.2".

Linux -> Install Node.js (v22.14) and npm (v10.9.2):

# Download and install fnm:
curl -o- https://fnm.vercel.app/install | bash
# Download and install Node.js:
fnm install 22
# Verify the Node.js version:
node -v # Should print "v22.14.0".
# Verify npm version:
npm -v # Should print "10.9.2".

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/webflix-streamer.git
    cd webflix-streamer
  2. Install dependencies:

    npm install
  3. The key for The Movie Database API is not included on this repo, you'll need to grab your own on. See on The Movie Database API

  4. Fill the .env file in the root directory with your api key and url environment.

  5. Start the development server:

    npm dev
  6. Open http://localhost:PORT with your browser to see the application.

Project Structure

webflix-streamer/
├── src/
│   ├── app/             # Next.js app directory
│   │   ├── components/  # React components
│   │   ├── movie/       # Movies Page
│   │   ├── tv/          # Tv Shows Page
│   │   ├── watch/       # Watch page for streaming content
│   │   └── page.tsx     # Home page
│   └── pages/             
│       └── api/         # API Routes
├── repo/                # Content repository
│   ├── models/          
│   │    └── movie.ts    #Content models 
│   └── tmdbApi.ts       #The Movie Database API calls
├── public/              # Static assets
├── .env                 # Environment variables
└── package.json         # Project dependencies

Important Notes

  • This project uses WebTorrent for streaming, which means it streams from torrent sources.
  • Please ensure you comply with copyright laws in your jurisdiction when using this application.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

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

About

A torrent web media player built in Typescript using WebTorrent

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages