WrappedMe adalah dashboard analitik musik berbasis Next.js yang memvisualisasikan data Spotify pengguna secara real-time. Aplikasi ini mengolah data dari Spotify Web API untuk menampilkan lagu, artis, dan album teratas serta estimasi waktu mendengarkan tanpa harus menunggu akhir tahun.
- Secure Authentication: Menggunakan NextAuth.js (OAuth 2.0) untuk login aman via akun Spotify.
- Real-Time Data: Mengambil tren musik terbaru langsung melalui Node.js API Routes.
- Smart Algorithms: Kalkulasi estimasi total menit mendengarkan berdasarkan data riwayat putar.
- High Performance: Optimasi pemuatan data secara paralel menggunakan
Promise.all. - Dynamic UI: Antarmuka modern dengan Tailwind CSS dan fitur animasi typing effect.
- Frontend: Next.js (App Router), React.js, Tailwind CSS.
- Backend: Node.js (Next.js API Routes).
- Autentikasi: NextAuth.js (Auth.js) dengan Spotify Provider.
- Integrasi API: Spotify Web API Node SDK.
-
Install Dependensi
npm install
-
Konfigurasi
.env.localDapatkan credentials di Spotify Developer Dashboard.SPOTIFY_CLIENT_ID=your_id SPOTIFY_CLIENT_SECRET=your_secret NEXTAUTH_SECRET=any_random_string NEXTAUTH_URL=http://localhost:3000
-
Run Development
npm run dev
Proyek ini menangani tantangan teknis terkait masa berlaku token Spotify yang singkat dengan mengimplementasikan Refresh Token Rotation pada server-side session. Hal ini memastikan pengguna tetap terautentikasi secara aman tanpa perlu login ulang saat mengakses data.