A minimalist fullscreen app that displays your currently playing Spotify track's lyrics in large, animated text with automatic Turkish translation.
🌐 Live Demo · ▶ Watch on YouTube
- Tracks your currently playing Spotify song in real time
- Displays lyrics word-by-word with large, fullscreen animations
- Automatically translates non-Turkish lyrics to Turkish
- Animated wave dots with progress indicator during instrumental sections
- Dynamic color palette extracted from the album cover
- Completely free — no external API keys required (lrclib + Lingva)
- Go to the Spotify Developer Dashboard and log in.
- Click "Create app".
- Enter any name and description.
- Add the following Redirect URI:
http://localhost:3000/callback - Check "Web API" and save.
- After creation, open Settings and copy:
Client IDClient Secret
git clone https://github.com/inalbaransel/Spotify-lyrics.git
cd Spotify-lyrics
npm installCreate a .env.local file in the project root:
NEXT_PUBLIC_SPOTIFY_CLIENT_ID=your_client_id_here
NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000/callback
SPOTIFY_CLIENT_SECRET=your_client_secret_hereNote:
SPOTIFY_CLIENT_SECRETis only used server-side and is never exposed to the browser.
npm run devOpen http://localhost:3000, log in with your Spotify account and start playing music.
- Import the repo into Vercel.
- Add the three environment variables from
.env.localunder Environment Variables. - Update
NEXT_PUBLIC_REDIRECT_URIto your production URL:https://your-app.vercel.app/callback - Add the same URL as a Redirect URI in the Spotify Developer Dashboard.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19 + TypeScript |
| Styling | Tailwind CSS v4 (CSS-first config) |
| Font | Playfair Display via next/font |
| Auth | Spotify OAuth 2.0 — PKCE flow (client secret server-side only) |
| Now Playing | Spotify Web API |
| Lyrics | lrclib.net — free, no auth, LRC format |
| Translation | Lingva Translate — Google Translate proxy, no key needed |
| Color palette | Dynamically extracted from album art via CSS filter |
├── app/
│ ├── page.tsx # Home page
│ ├── callback/page.tsx # OAuth callback
│ └── api/auth/token/ # Token exchange (server-side)
├── components/
│ ├── LyricsPlayer.tsx # Main orchestrator
│ ├── LyricLine.tsx # Word-by-word animated lyric line
│ ├── TranslationPanel.tsx # Turkish translation panel
│ ├── InstrumentalDots.tsx # Instrumental section indicator
│ └── NowPlayingBar.tsx # Bottom info bar
├── hooks/
│ ├── useSpotifyPlayer.ts # Polling + drift compensation
│ ├── useLyrics.ts # lrclib fetch + cache
│ ├── useWordSync.ts # Binary search word sync
│ └── useTranslation.ts # Translation + prefetch + Turkish detection
└── lib/
├── spotify-client.ts # API wrapper + token refresh mutex
├── token-store.ts # localStorage token management
└── lrc-parser.ts # LRC → [{timeMs, text}]
MIT
Spotify'da çalan şarkının sözlerini büyük, animasyonlu bir şekilde gösteren; Türkçe çeviri sunan minimalist bir ekran uygulaması.
🌐 Canlı Demo · ▶ Tanıtım Videosu
- Spotify'da çalan şarkıyı gerçek zamanlı takip eder
- Sözleri büyük, tam ekran animasyonla kelime kelime gösterir
- Türkçe olmayan sözleri otomatik olarak Türkçe'ye çevirir
- Enstrümantal bölümlerde dalga animasyonlu ilerleme göstergesi
- Albüm kapağından dinamik renk paleti üretir
- Tamamen ücretsiz — harici API anahtarı gerekmez (lrclib + Lingva)
- Spotify Developer Dashboard'a git ve hesabınla giriş yap.
- "Create app" butonuna tıkla.
- Uygulama adı ve açıklama gir (ne yazarsan yaz).
- Redirect URI alanına şunu ekle:
http://localhost:3000/callback - "Web API" seçeneğini işaretle ve kaydet.
- Uygulamayı oluşturduktan sonra Settings sayfasından şunları kopyala:
Client IDClient Secret
git clone https://github.com/inalbaransel/Spotify-lyrics.git
cd Spotify-lyrics
npm installProjenin kök dizininde .env.local adında bir dosya oluştur ve içine şunları yaz:
NEXT_PUBLIC_SPOTIFY_CLIENT_ID=buraya_client_id_yaz
NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000/callback
SPOTIFY_CLIENT_SECRET=buraya_client_secret_yazNot:
SPOTIFY_CLIENT_SECRETdeğeri yalnızca sunucu tarafında kullanılır, tarayıcıya hiçbir zaman iletilmez.
npm run devTarayıcıda http://localhost:3000 adresini aç, Spotify hesabınla giriş yap ve müzik çalmaya başla.
- Repoyu Vercel'e import et.
- Environment Variables bölümüne
.env.localiçindeki üç değişkeni ekle. NEXT_PUBLIC_REDIRECT_URIdeğerini production URL'inle güncelle:https://your-app.vercel.app/callback- Spotify Developer Dashboard'da bu URL'yi de Redirect URI olarak ekle.
| Katman | Teknoloji |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19 + TypeScript |
| Stil | Tailwind CSS v4 (CSS-first config) |
| Font | Playfair Display via next/font |
| Auth | Spotify OAuth 2.0 — PKCE akışı (sunucuda client secret) |
| Şarkı verisi | Spotify Web API |
| Sözler | lrclib.net — ücretsiz, kayıtsız, LRC formatı |
| Çeviri | Lingva Translate — Google Translate tabanlı, key gerektirmez |
| Renk paleti | Albüm kapağından CSS filter ile dinamik üretim |
├── app/
│ ├── page.tsx # Ana sayfa
│ ├── callback/page.tsx # OAuth callback
│ └── api/auth/token/ # Token exchange (server-side)
├── components/
│ ├── LyricsPlayer.tsx # Ana orkestratör
│ ├── LyricLine.tsx # Kelime kelime animasyonlu satır
│ ├── TranslationPanel.tsx # Türkçe çeviri paneli
│ ├── InstrumentalDots.tsx # Enstrümantal bölüm göstergesi
│ └── NowPlayingBar.tsx # Alt bilgi çubuğu
├── hooks/
│ ├── useSpotifyPlayer.ts # Polling + drift compensation
│ ├── useLyrics.ts # lrclib fetch + cache
│ ├── useWordSync.ts # Binary search ile kelime senkronizasyonu
│ └── useTranslation.ts # Çeviri + prefetch + Türkçe tespiti
└── lib/
├── spotify-client.ts # API wrapper + token mutex
├── token-store.ts # localStorage token yönetimi
└── lrc-parser.ts # LRC → [{timeMs, text}]
MIT