README.md English Ver.
Proyek ini adalah pembangunan ulang modern dari halaman film di aplikasi web buatan saya, Rinema. Dibuat ulang sebagai Single Page Application (SPA) berbasis React, proyek ini terhubung langsung dengan API live Rinema untuk menampilkan sistem pencarian dan filter film yang dinamis. Portofolio ini menunjukkan kemampuan saya dalam pengembangan front-end React, manajemen state secara efisien, interaksi dengan API eksternal, serta penerapan pola desain dan optimasi performa tingkat lanjut.
- Terhubung Langsung dengan API: Mengambil data film dan genre secara real-time dari API live Rinema, bukan lagi dari file JSON lokal.
- Sorting di Sisi Server: Opsi urutkan berdasarkan "Terbaru", "Terlama", atau "Populer" memanfaatkan endpoint API khusus untuk performa yang lebih cepat dan efisien.
- Fungsi Pencarian & Filter: Pencarian real-time berdasarkan judul dan filter berdasarkan genre yang diurutkan secara alfabetis.
- Desain Responsif: Dibangun dengan Tailwind CSS untuk antarmuka yang bersih, modern, dan ramah mobile di semua perangkat.
- Detail Film Lengkap: Memungkinkan pengguna untuk mengklik film dan melihat informasi detail di halaman terpisah menggunakan React Router.
- React: Framework utama untuk membangun antarmuka pengguna yang interaktif.
- Vite: Sebagai build tool modern yang memberikan pengalaman pengembangan super cepat.
- Axios: Untuk permintaan HTTP yang andal ke API Rinema.
- Tailwind CSS: Untuk styling dengan pendekatan utility-first yang cepat dan fleksibel.
- Custom Hooks: Mengemas logika untuk pengambilan dan penyaringan data (
useSearchPosts
danuseFilmDetail
) agar kode lebih bersih dan dapat digunakan kembali. - React Router DOM: Untuk menangani routing sisi klien ke halaman daftar film dan detail film.
- Debounce: Diterapkan untuk menunda query pencarian, mengurangi panggilan fungsi yang tidak perlu dan meningkatkan responsivitas aplikasi.
- Custom Hooks: Membuat
useSearchPosts
danuseFilmDetail
untuk mengelola state, panggilan API, dan logika filter, mendukung reusability dan pemisahan tanggung jawab. - Container-Presenter Pattern: Memisahkan logika (di
SearchContainer
danFilmDetailContainer
) dari tampilan (diSearchPresenter
danFilmDetailPresenter
) untuk kemudahan maintenance dan skalabilitas. - Facade Pattern: Digunakan dengan
apiClient
untuk menyederhanakan konfigurasi Axios dan interaksi API, menyembunyikan kompleksitasaxios
dan endpoint. - Single Responsibility Principle: Setiap komponen dan hook dirancang untuk menangani satu tugas utama, meningkatkan kejelasan dan kemudahan pengujian kode.
- Desain Responsif: Menggunakan kelas utilitas Tailwind untuk memastikan pengalaman pengguna yang mulus di berbagai ukuran layar.
- Clone repository:
git clone <your-repo-url>
- Masuk ke direktori proyek:
cd rebuild-rinema
- Install dependensi:
npm install
- Jalankan server pengembangan:
npm run dev
- Buka http://localhost:5173 (atau port lain yang ditampilkan di terminal) di browser Anda.
- Gunakan dropdown untuk mengurutkan film (misalnya, "Terbaru") atau klik tombol genre yang diurutkan untuk memfilter.
- Ketik di kolom pencarian untuk mencari film berdasarkan judul.
- Jelajahi detail film termasuk poster dan sinopsis.
- Klik "Lihat Detail" untuk melihat halaman informasi lengkap film.
Semua request ditujukan ke base URL: https://rinemaa.paramadina.ac.id/api
GET /films/allFilm
: Menampilkan semua film.GET /films/latest
: Menampilkan film terbaru.GET /films/oldest
: Menampilkan film terlama.GET /films/popular
: Menampilkan film populer.GET /films/allGenre
: Mengambil daftar genre yang tersedia.GET /films/films/{film}
: Menyediakan informasi detail untuk film tertentu berdasarkan ID.
rebuild-rinema/
βββ public/
β βββ index.html
β βββ favicon.ico
βββ src/
β βββ api/ # Klien API terpusat (Facade Pattern)
β βββ components/
β β βββ Search/ # Komponen pencarian (Container & Presenter)
β β β βββ SearchContainer.jsx
β β β βββ SearchPresenter.jsx
β β βββ FilmDetail/ # Komponen detail film (Container & Presenter)
β β β βββ FilmDetailContainer.jsx
β β β βββ FilmDetailPresenter.jsx
β βββ hooks/ # Custom hooks untuk state & logic
β β βββ useSearchPosts.js
β β βββ useFilmDetail.js
β βββ App.jsx # Komponen utama App dengan routing
β βββ index.jsx # Titik masuk aplikasi
β βββ index.css # Style global
β βββ tailwind.config.js # Konfigurasi Tailwind
β βββ package.json # Dependensi proyek
Kontribusi sangat diterima! Silakan baca Kode Etik untuk pedoman cara berinteraksi dengan komunitas. Untuk berkontribusi:
- Fork repository ini.
- Ajukan isu atau pull request dengan peningkatan (misalnya, pagination, fitur rating).
Proyek ini dilisensikan di bawah Lisensi MIT, yang memungkinkan penggunaan, modifikasi, dan distribusi gratis dengan menyertakan pemberitahuan hak cipta.
- Dibangun dan terinspirasi dari aplikasi web buatan saya, Rinema (https://rinemaa.paramadina.ac.id).
- Data bersumber dari file JSON lokal yang meniru struktur API Rinema buatan saya.
- Menambahkan pagination atau infinite scroll untuk menangani daftar film yang sangat panjang secara efisien.
- Meningkatkan halaman detail film dengan fitur yang lebih interaktif (misalnya, pengiriman rating pengguna).
- Memperbaiki penanganan error dengan menampilkan pesan yang lebih informatif dan ramah pengguna.
- Menambahkan unit test dan integration test untuk memastikan keandalan kode.