Sebagai bagian dari Final Project Bootcamp React JS Frontend, peserta mengembangkan CINEMATA, sebuah website katalog film yang dirancang untuk membantu pengguna menemukan dan menjelajahi berbagai judul film melalui antarmuka yang modern, terstruktur, dan mudah digunakan.
Project ini menjadi sarana bagi peserta untuk menerapkan materi yang telah dipelajari selama bootcamp ke dalam studi kasus yang menyerupai pengembangan aplikasi frontend di dunia nyata. Peserta tidak hanya dituntut membuat tampilan yang menarik, tetapi juga menyusun struktur halaman, komponen antarmuka, serta alur interaksi pengguna secara sistematis.
Studi Kasus Project
CINEMATA mengangkat studi kasus berupa platform pencarian dan eksplorasi film. Pengguna dapat melihat daftar film yang sedang populer melalui bagian Trending Now, mencari judul film menggunakan kolom pencarian, serta mengakses menu seperti Home, Watchlist, dan Login.
Setiap film ditampilkan dalam format kartu yang memuat beberapa informasi utama, seperti:
- Judul film
- Tahun rilis
- Jenis konten
- Nilai atau rating film
Beberapa film yang ditampilkan dalam project ini antara lain Obsession, Toy Story 5, Disclosure Day, Moana, The Devil Wears Prada 2, The Shawshank Redemption, Project Hail Mary, The Odyssey, dan Mortal Kombat II.
Untuk menjaga tampilan halaman tetap terorganisasi ketika jumlah data cukup banyak, peserta juga menyediakan fitur Muat Lebih Banyak. Fitur ini memungkinkan pengguna menampilkan film tambahan secara bertahap tanpa memenuhi seluruh halaman sejak awal.
Implementasi React JS pada Frontend
Teknologi utama yang digunakan dalam pengembangan project ini adalah React JS. Melalui teknologi tersebut, peserta membangun halaman dengan pendekatan berbasis komponen agar setiap bagian antarmuka dapat dikelola secara lebih terstruktur.
Elemen seperti navigasi, kolom pencarian, bagian Trending Now, kartu film, informasi rating, dan tombol Muat Lebih Banyak dapat dipisahkan menjadi komponen yang memiliki tanggung jawab masing-masing. Pendekatan ini membantu membuat kode lebih mudah dibaca, dikembangkan, dan digunakan kembali.
Peserta juga menerapkan pengelolaan data dan perubahan tampilan secara dinamis. Daftar film tidak hanya disusun sebagai konten statis, tetapi ditampilkan melalui proses pengolahan data pada sisi frontend. Dengan demikian, struktur aplikasi dapat tetap konsisten meskipun setiap film memiliki judul, tahun, dan rating yang berbeda.
Fitur yang Dikerjakan
Pada final project ini, peserta mengerjakan beberapa bagian utama, yaitu:
Pencarian film
Kolom Search movies disediakan untuk membantu pengguna menemukan film berdasarkan judul. Fitur pencarian menjadi latihan bagi peserta dalam menghubungkan input pengguna dengan data yang ditampilkan pada halaman.
Daftar film trending
Bagian Trending Now menampilkan kumpulan film populer dalam format yang konsisten. Peserta perlu mengatur bagaimana data film diproses dan diterjemahkan menjadi elemen visual yang mudah dipahami.
Informasi film
Setiap kartu menyajikan judul, rating, tahun rilis, serta kategori Movie. Informasi tersebut disusun dengan hierarki visual agar pengguna dapat mengenali film secara cepat.
Watchlist
Menu Watchlist menggambarkan kebutuhan pengguna untuk menyimpan atau mengelompokkan film yang ingin ditonton. Fitur ini memperkenalkan konsep pengelolaan pilihan pengguna dalam sebuah aplikasi.
Login
Menu Login menjadi bagian dari rancangan navigasi dan menggambarkan pengembangan aplikasi yang dapat dilanjutkan menuju sistem autentikasi pengguna.
Muat lebih banyak
Tombol Muat Lebih Banyak membantu mengontrol jumlah data yang muncul pada tampilan awal dan memberikan pengalaman eksplorasi yang lebih nyaman.
Insight yang Diperoleh Peserta
Melalui pengembangan CINEMATA, peserta memperoleh insight bahwa aplikasi frontend tidak hanya berfokus pada desain visual. Struktur komponen, pengelolaan data, konsistensi tampilan, serta respons aplikasi terhadap interaksi pengguna memiliki peran yang sama pentingnya.
Peserta juga mempelajari bahwa daftar data dengan jumlah besar perlu ditampilkan secara efisien. Penggunaan fitur pencarian dan Muat Lebih Banyak membantu pengguna menemukan konten tanpa harus melihat seluruh data sekaligus.
Selain itu, project ini memberikan pemahaman mengenai pentingnya membangun komponen yang dapat digunakan kembali. Karena setiap film memiliki bentuk tampilan yang serupa, peserta dapat menggunakan satu struktur kartu untuk menampilkan banyak data dengan isi yang berbeda.
Benefit Final Project
Final project CINEMATA memberikan pengalaman kepada peserta dalam membangun sebuah aplikasi React JS dari sisi frontend dengan studi kasus yang jelas. Peserta berlatih mengubah kebutuhan pengguna menjadi fitur, mengolah data menjadi komponen visual, serta menyusun halaman yang memiliki navigasi dan alur interaksi.
Hasil project ini juga dapat digunakan sebagai bagian dari portofolio peserta untuk menunjukkan kemampuan dasar pengembangan frontend, khususnya dalam penggunaan React JS, pembuatan reusable component, pengelolaan data, pencarian konten, dan penyusunan user interface.
Melalui CINEMATA, peserta berhasil menerapkan pembelajaran Bootcamp React JS Frontend ke dalam sebuah website eksplorasi film yang fungsional, terstruktur, dan relevan dengan kebutuhan aplikasi digital modern.