İlkan Celaller — Kişisel Marka & İçerik Üretici Platformu
YouTube ve sosyal medya içerik üreticisi İlkan Celaller için sıfırdan geliştirilen; YouTube Data API v3, TikTok API ve Instagram Graph API entegrasyonuyla üç platformdan canlı istatistik çeken, sponsorluk paketleri ve medya kiti içeren tam kapsamlı kişisel marka sitesi.
Mesele neydi?
Markasını dijital ortamda güçlü biçimde temsil edemeyen, sponsorluk tekliflerini sistematik bir şekilde sunacak mecradan yoksun ve YouTube/Instagram/TikTok istatistiklerini tek noktada derleyemeyen bir içerik üretici sorunu.
Nasıl çözdüm?
Next.js App Router ile SSR/SSG dengesi kuruldu. YouTube Data API v3 üzerinden canlı video ve kanal istatistikleri çekildi; TikTok API ile TikTok takipçi ve video verileri, Instagram Graph API ile Instagram takipçi ve etkileşim metrikleri anlık olarak API üzerinden alındı. Framer Motion ile paralaks animasyonlu, 4 satırlı video thumbnail hero bölümü; sponsorluk paketleri, medya kiti ve Formspree tabanlı iletişim formu entegre edildi.
Detaylarda saklı.
9 özellik- 01YouTube Data API v3: Canlı Video & Kanal İstatistikleri
- 02TikTok API: Canlı Takipçi, Video & Etkileşim Verileri
- 03Instagram Graph API: Canlı Takipçi & Medya Metrikleri
- 04Çok Platformlu Canlı İstatistik Paneli (YouTube + TikTok + Instagram)
- 054 Satırlı Sonsuz Paralaks Video Thumbnail Hero
- 06Sponsorluk Paketleri & Medya Kiti Modülü
- 07Formspree Tabanlı Marka İletişim Formu
- 08PWA Desteği, Google Analytics & KVKK/Gizlilik Sayfaları
- 09SEO Optimizasyonu: Sitemap, Robots.txt & OpenGraph
Kodun içinden.
export async function getLatestYouTubeVideos(maxResults = 6): Promise<CreatorVideo[]> {
const apiKey = process.env.YOUTUBE_API_KEY;
const channelId = process.env.YOUTUBE_CHANNEL_ID;
// 1. Adım: Kanal'ın uploads playlist ID'sini al
const channelRes = await fetch(
`https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${channelId}&key=${apiKey}`
);
const channelData = await channelRes.json();
const uploadsId = channelData.items[0].contentDetails.relatedPlaylists.uploads;
// 2. Adım: Playlist'ten video ID'lerini çek
const playlistRes = await fetch(
`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${uploadsId}&maxResults=${maxResults}&key=${apiKey}`
);
const playlistData = await playlistRes.json();
const videoIds = playlistData.items.map((item: PlaylistItem) =>
item.snippet.resourceId.videoId
).join(",");
// 3. Adım: Video detaylarını (görüntüleme, süre) birleştir
const videoRes = await fetch(
`https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics,contentDetails&id=${videoIds}&key=${apiKey}`
);
const videoData = await videoRes.json();
return videoData.items.map(mapVideoToCreatorVideo);
}İçerik üreticisinin tüm sosyal medya istatistiklerini anlık olarak tek ara yüzde derleyen, markaların sponsorluk paketlerini kolayca keşfetmesini sağlayan ve kurumsal kimliği güçlendiren profesyonel bir dijital platform teslim edildi.
Canlı projeyi aç