Project ini dibangun dengan Next.js (App Router) dan pendekatan modular supaya setiap bagian punya peran yang jelas dan mudah dikembangkan ke depannya. Strukturnya dibuat supaya stabil, mudah dimaintain, dan siap dipakai untuk project berskala besar. Setiap halaman punya error dan not-found handler sendiri, jadi kalau satu bagian bermasalah, tidak akan mengganggu bagian lain.

📸 Galeri Screenshot

⚙️ Pendekatan Teknis

Komponen disusun berdasarkan fungsinya:

• Global components seperti header, footer, dan context disiapkan untuk elemen yang muncul di seluruh halaman.
• Layout components seperti container, loader, dan slider dipakai buat menjaga konsistensi tampilan.
• Page components berisi bagian-bagian khusus tiap halaman, mulai dari Home, Detail, About, sampai List.

Untuk folder lib, semua logic tambahan seperti fetch data, context, dan type definition disimpan di sana.

Struktur ini bikin kode tetap bersih, mudah dibaca, dan scalable.

🎨 Inspirasi Desain UI

Secara visual, inspirasi utama datang dari website Netflix, khususnya dalam penggunaan layout berbasis grid, section berlapis, dan elemen interaktif seperti slider. Sisanya dibuat secara freestyle (mohon maaf bukan UI/UX Designer 🙏), dengan beberapa referensi tambahan dari project-project yang pernah dikerjakan sebelumnya.

🧩 Fitur & Implementasi

Bagian List dibuat dinamis, bisa menampilkan daftar karakter, episode, atau lokasi dari API, lengkap dengan fitur pencarian (search) dan pagination.

Untuk meningkatkan performa dan user experience, project ini juga menggunakan React Suspense dan lazy loading pada tiap section di halaman Home. Bagian seperti Characters, Episodes, dan Locations dimuat secara terpisah agar proses loading terasa lebih cepat dan efisien. Dengan pendekatan ini, user bisa mulai melihat konten yang sudah siap tanpa perlu menunggu seluruh halaman selesai dimuat, konsepnya mirip dengan progressive rendering.

Pendekatan yang sama juga diterapkan di halaman lain seperti About, List, dan Detail. Tiap komponen dibungkus dengan Suspense untuk menampilkan loading state secara halus saat proses pengambilan data dari server berlangsung. Dengan begitu, transisi antarhalaman terasa mulus tanpa tampilan kosong di layar.

🧱 Desain Arsitektur

Tujuan utama dari struktur ini adalah membuat aplikasi yang:

• Mudah didevelop dan dimaintenance
• Reusable antar komponen
• Aman dari error dengan bantuan TypeScript
• Fleksibel untuk update fitur atau tampilan

Dengan pendekatan ini, tiap bagian punya tanggung jawab jelas, sehingga project tetap rapi, ringan, dan efisien, bahkan saat terus developing.

💭 Tantangan dalam Proses Pengembangan

Salah satu tantangan terbesar dalam project ini adalah menentukan bagian mana yang sebaiknya dibuat dinamis. Awalnya, komponen Detail direncanakan hanya satu file dinamis saja untuk menampilkan tiap tipe data (character, episode, location). Tapi setelah dijalankan, ternyata strukturnya terlalu kompleks dan membuat kode jadi panjang serta susah dicustom jika ingin detail character berbeda tampilannya dengan detail episode atau detail location. Akhirnya, keputusan terbaik adalah memisahkan komponen Detail per tipe data; Character, Episode, dan Location. Sehingga, tiap halaman bisa fokus menampilkan datanya sendiri, lebih mudah diatur, dan lebih bersih secara struktur.

Selain itu adalah bagaimana cara menyeimbangkan antara SSR (Server-Side Rendering) dan CSR (Client-Side Rendering). Ada beberapa bagian yang lebih cocok dirender di server untuk performa, loading state(suspense) dan SEO, tapi ada juga yang butuh interaksi cepat di sisi klien seperti fitur pencarian dan pagination pada halaman List. Kombinasi keduanya akhirnya dibuat secara hybrid, supaya tetap efisien dan responsif.

Terakhir, banyak visi-visi kecil 🤏 yang ingin diwujudkan: misalnya menampilkan icon-icon characters di halaman episode detail, icon-icon residents di halaman location detail, atau melengkapi metadata di setiap halaman. Tapi sepertinya waktunya tidak cukup ya (huhu ✋✊✋✊) jadi beberapa ide disimpan untuk versi berikutnya saja.