<- Back to projects

MediaFlow Downloader 🎥

A modern, powerful video downloader supporting YouTube, Facebook, Instagram, TikTok, X (Twitter), and Direct URLs with real-time progress tracking, automatic video+audio merging, and MP3 conversion.

React Node.js Express yt-dlp FFmpeg SSE
View on GitHub
MediaFlow Screenshot 1
MediaFlow Screenshot 2
MediaFlow Screenshot 3
MediaFlow Screenshot 4
MediaFlow Screenshot 5
MediaFlow Screenshot 6

#Supported Platforms

  • 📺 YouTube - Full support with 4K/8K downloads, MP3 conversion, and format selection
  • 📘 Facebook - HD/SD video downloads with audio included
  • 📸 Instagram - Reels, Posts, and IGTV downloads
  • 🎵 TikTok - Download videos without watermark
  • 🐦 X (Twitter) - Videos, GIFs, and media from tweets
  • 🌐 Direct URL - Any video URL (M3U8/HLS, MP4, etc.)

#Core Features

  • ⚡ Lightning-Fast Loading - Two-step fetching: Instant metadata, lazy format loading in background
  • 🎯 Smart Format Filtering - Aggressive filtering keeps only top 5 video + top 3 audio formats
  • 🍪 Cookie Authentication - Bypass restrictions and download private videos
  • 🔄 Parallel Downloads - Video + Audio download simultaneously (30-50% faster!)
  • ⚡ Multi-Threaded Downloads - Optional aria2c support with 16 connections
  • 📺 Smart Format Selection - Separate tabs for Video and Audio downloads
  • 🎵 Audio Extraction - Download high-quality audio in multiple formats
  • 🎬 Multiple Video Qualities - Choose from 360p to 4K resolutions
  • 📊 Real-Time Progress Bar - Watch your download progress live with Server-Sent Events (SSE)
  • 🎧 MP3 Conversion - Convert audio to MP3 with selectable bitrate (128/192/256/320 kbps)

#UI Features

  • 🎠 Premium Carousel - Netflix-style center-focused platform selector
  • ✨ Glass-Morphism Design - Frosted glass effect with backdrop blur
  • 🎯 Smooth Animations - Polished user experience with 500ms transitions
  • ⌨️ Keyboard Navigation - Use arrow keys and Enter to navigate
  • 👆 Touch/Swipe Support - Mobile-friendly gesture navigation
  • 📱 Responsive Layout - Works seamlessly on desktop, tablet, and mobile

#Tech Stack

Frontend

  • React.js - UI library
  • Axios - HTTP client
  • Lucide React - Modern icons
  • Server-Sent Events (SSE) - Real-time progress updates
  • Custom CSS - Glass-morphism design

Backend

  • Node.js - Runtime environment
  • Express.js - Web framework
  • yt-dlp-exec - Universal video downloader
  • FFmpeg - Video/audio processing
  • CORS - Cross-origin resource sharing

#Architecture

MediaFlow Downloader/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── PlatformSelector.js
│   │   │   ├── VideoDownloader.js
│   │   │   ├── FacebookDownloader.js
│   │   │   ├── InstagramDownloader.js
│   │   │   ├── TikTokDownloader.js
│   │   │   ├── TwitterDownloader.js
│   │   │   └── DirectDownloader.js
│   │   └── App.js
├── server/                 # Node.js backend
│   ├── index.js
│   ├── cookies.json
│   └── downloads/
└── README.md

#Speed Optimizations

  • Two-Step Fetching - Instant UI feedback
  • Parallel V+A Download - 30-50% faster
  • aria2c Multi-Thread - 2-4x faster downloads (optional)
  • FFmpeg Stream Copy - Instant merge without re-encoding
  • Format Filtering - Faster API response