Movie & TV Showcase

Web portal katalog film dan acara TV yang menyediakan berbagai informasi seperti film trending, rating, ulasan, trailer, genre, dan detail pemeran.

Dalam proyek ini, saya berkontribusi sebagai Frontend Developer dengan fokus pada pengembangan antarmuka menggunakan Vue 3, integrasi REST API TMDB, optimasi performa, Static Site Generation (SSG), serta pengelolaan state dan interaksi pengguna.

🎯 Tantangan

1. Performa Initial Load

Menampilkan katalog film dalam jumlah besar tanpa membuat proses rendering halaman membebani browser.

2. Efisiensi API Request

Mengoptimalkan request ke TMDB API agar fitur pencarian dan navigasi katalog tidak menghasilkan request yang berlebihan.

3. SEO untuk Halaman Katalog

Memastikan konten katalog dapat dirender menjadi HTML yang dapat dibaca crawler, bukan hanya bergantung pada rendering JavaScript di browser.

4. Interaktivitas UI

Menjaga pencarian, filtering, favorit, trailer, dan navigasi tetap responsif meskipun data berasal dari API eksternal.

🛠️ Solusi & Fitur Teknis

1. Static Site Generation — Vue 3

Menerapkan pre-rendering pada halaman katalog sehingga HTML sudah tersedia pada initial response dan konten dapat lebih mudah diproses oleh crawler.

2. TMDB REST API Integration

Membangun integrasi API untuk mengambil data trending, top rated, now playing, detail film, genre, trailer, dan informasi pemeran.

3. Debounced Search

Menggunakan debouncing pada fitur pencarian untuk membatasi request API ketika pengguna mengetik dan mengurangi request yang tidak diperlukan.

4. State Management — Pinia

Menggunakan Pinia untuk mengelola state seperti daftar favorit/bookmark dan preferensi pengguna.

5. Lazy Loading & Media Optimization

Menerapkan lazy loading pada poster dan backdrop agar resource gambar tidak langsung dimuat seluruhnya ketika halaman pertama kali dibuka.

6. Reusable Component Architecture

Membangun komponen UI modular seperti film card, trailer modal, skeleton loader, dan komponen katalog agar lebih mudah digunakan kembali dan dipelihara.

📊 Hasil

Optimized Initial Rendering

Halaman katalog dapat menyajikan HTML hasil pre-render pada initial load sehingga pengguna tidak harus menunggu seluruh proses rendering client-side.

Reduced API Requests

Debouncing membantu mengurangi request API yang tidak diperlukan terutama pada fitur pencarian.

Search Engine Friendly Pages

Konten katalog yang telah di-pre-render menghasilkan struktur HTML yang lebih mudah dibaca crawler.

Maintainable Frontend Architecture

Komponen UI yang reusable membuat pengembangan dan pemeliharaan fitur katalog menjadi lebih terstruktur.