← Ana Sayfaya Dön
Web siteleri & platformlar

DripStudio

Şarkı sözü videosu üreten abonelik tabanlı stüdyo

Next.jsTypeScriptRemotionBullMQRedisPrismaTailwind CSS

Ekran Görüntüleri & Şemalar

DripStudio vitrin ekranı ve dikey video önizleme
DripStudio vitrin ekranı ve dikey video önizleme

Problem & İhtiyaç

Müzisyen ve sosyal medya üreticilerinin dikey (9:16) şarkı sözü ve tanıtım klipleri hazırlarken saatler süren manuel video kurgu yazılımlarına mahkum olması.

Nasıl Çalışıyor?

01

Kullanıcı şarkı ses dosyasını (MP3/WAV) ve şarkı sözlerini tarayıcıya aktarır.

02

WaveSurfer.js ile ses dalga formu taranır; kullanıcı sözleri saniyesine göre tek kelime hassasiyetinde işaretler.

03

Arka plan video şablonu, tipografi ve efektler seçilerek 9:16 formatında anlık önizleme izlenir.

04

Render başlatıldığında iş BullMQ ve Redis kuyruğuna alınarak arka plan worker'larına iletilir.

05

Sunucu tarafında Remotion motoru videoyu 4K kalitesinde derleyerek kullanıcıya indirme bağlantısı ve kota dökümü sunar.

Mimari & Teknik Kararlar

Next.js 16 (App Router), TypeScript, Remotion programatik render motoru, BullMQ, Redis, Prisma ORM, SQLite/PostgreSQL, WaveSurfer.js ve Tailwind CSS v4.

Kullanıcı şarkısını yükleyip sözleri saniyesine göre senkronluyor, sistem videoyu sunucuda üretiyor. Remotion ile programatik video render, BullMQ + Redis ile kuyruğa alınan uzun süreli işler, wavesurfer.js ile dalga formu üzerinden söz eşleme; üstünde kredi/kota sistemi, abonelik, ödeme ve yönetim paneli.