Movie & TV Showcase

Web portal untuk menjelajahi katalog film dan acara TV (trending, rating, ulasan, dan trailer). Dibuat menggunakan Vue 3 dengan pendekatan Static Site Generation (SSG) untuk memastikan performa loading cepat dan optimasi SEO pada halaman-halaman katalog statis.

🎯 Tantangan

1. Performa Initial Load: Menampilkan ribuan katalog film dari API tanpa membuat beban render browser jadi berat.
2. Penghematan API Rate Limit: Mengelola kueri request ke API TMDB agar efisien dan tidak over-fetching.
3. Interaktivitas UI: Memastikan fitur pencarian, filter genre, dan navigasi berjalan mulus tanpa jeda (lag).

🛠️ Solusi & Fitur Teknis

1. Static Site Generation (Vue 3): Menerapkan pre-rendering untuk halaman katalog utama agar struktur HTML murni siap diindeks mesin pencari dan memuat cepat saat dibuka pertama kali.
2. Integrasi API TMDB: Membangun layer integrasi untuk mengambil data Trending, Top Rated, Now Playing, detail film, dan informasi pemeran (cast).
3. Debouncing pada Fitur Search: Menambahkan teknik debouncing pada kolom pencarian untuk membatasi request API saat user mengetik, sekaligus menghemat rate limit TMDB.
4. State Management (Pinia): Mengelola state lokal untuk fitur daftar favorit/bookmark dan preferensi tema pengguna.
5. Optimasi Media & Lazy Loading: Mengimplementasikan lazy loading pada poster dan gambar backdrop dari CDN TMDB untuk menghemat konsumsi kuota data.
6. Arsitektur Komponen Reusable: Membuat komponen UI modular (seperti Card Film, Modal Trailer, Skeleton Loader) agar struktur kode tetap rapi dan mudah dirawat.

📊 Hasil

1. Halaman statis termuat lebih cepat karena pengguna menerima HTML matang di initial render.
2. Penggunaan debouncing berhasil memangkas request API yang tidak perlu pada fitur pencarian.
3. Struktur HTML murni hasil pre-render membuat metadata film mudah terbaca oleh crawler mesin pencari.