TubeTok — Media Downloader

Download YouTube & TikTok ke MP4/MP3 secara gratis. Dibangun dengan Next.js 14 App Router + Tailwind CSS + RapidAPI.

🚀 Fitur

• ✅ Download video YouTube & TikTok
• ✅ Pilih format MP4 (Video) atau MP3 (Audio)
• ✅ Dark mode premium dengan efek glassmorphism
• ✅ API key aman (hanya ada di server, tidak terekspos ke browser)
• ✅ Rate limiting built-in
• ✅ Siap deploy ke Vercel

---

📁 Struktur Proyek

media-downloader/
├── app/
│   ├── layout.js              # Root Layout (Server Component)
│   ├── page.js                # Halaman utama (Server Component)
│   ├── globals.css            # Style global + Tailwind
│   └── api/
│       └── download/
│           └── route.js       # Route Handler → memanggil RapidAPI
├── components/
│   ├── DownloaderClient.js    # UI interaktif (Client Component)
│   └── Footer.js              # Footer (Server Component)
├── .env.local.example         # Template environment variables
├── next.config.js
├── tailwind.config.js
└── vercel.json

---

⚙️ Setup Lokal

1. Install dependensi

npm install

2. Konfigurasi Environment Variables

cp .env.local.example .env.local

Buka .env.local dan isi:

RAPIDAPI_KEY=your_rapidapi_key_here

# YouTube API
RAPIDAPI_YT_HOST=your-youtube-api.p.rapidapi.com
RAPIDAPI_YT_ENDPOINT=https://your-youtube-api.p.rapidapi.com/dl

# TikTok API
RAPIDAPI_TT_HOST=your-tiktok-api.p.rapidapi.com
RAPIDAPI_TT_ENDPOINT=https://your-tiktok-api.p.rapidapi.com/

3. Jalankan dev server

npm run dev

Buka http://localhost:3000.

---

🔑 Cara Mendapatkan RapidAPI Key

1. Daftar di https://rapidapi.com
2. Buka Developer Dashboard → Security → salin API Key Anda
3. Cari API yang dibutuhkan:
   • Untuk YouTube: cari "YouTube Video Downloader" atau "YouTube MP3 Downloader"
   • Untuk TikTok: cari "TikTok Video No Watermark"
4. Subscribe ke API tersebut (banyak yang punya free tier)
5. Buka tab Code Snippets → pilih Node.js → salin nilai X-RapidAPI-Host dan URL endpoint

---

🔧 Menyesuaikan Response Mapping

Setiap API di RapidAPI memiliki struktur JSON response yang berbeda. Buka app/api/download/route.js dan cari bagian SESUAIKAN MAPPING INI:

// Contoh: jika API Anda mengembalikan { video_link: "..." }
downloadUrl = data?.video_link || data?.url || null;

Uji response API dulu di halaman RapidAPI sebelum mengganti mapping.

---

🚢 Deploy ke Vercel

Opsi A: Via Vercel CLI

npm i -g vercel
vercel

Opsi B: Via GitHub

1. Push repo ke GitHub
2. Import di https://vercel.com/new
3. Set environment variables di Settings → Environment Variables:
   • RAPIDAPI_KEY
   • RAPIDAPI_YT_HOST
   • RAPIDAPI_YT_ENDPOINT
   • RAPIDAPI_TT_HOST
   • RAPIDAPI_TT_ENDPOINT
4. Deploy!

---

📝 Catatan Penting

• File .env.local TIDAK BOLEH di-commit ke git (sudah ada di .gitignore)
• Semua env variable tanpa prefix NEXT_PUBLIC_ = aman, hanya terbaca di server
• Rate limit default: 10 request/menit per IP (bisa diubah di route.js)
• Untuk production besar, ganti rate limiter in-memory dengan Redis (Upstash + @vercel/kv)

---

📄 Lisensi

Untuk keperluan pribadi dan edukasi. Hormati hak cipta konten kreator.