Skip to content

πŸ› οΈ REBUILD RINEMA - Proyek ini adalah pembangunan ulang modern dari halaman film di aplikasi web Rinema https://rinemaa.paramadina.ac.id/film, yang dibuat ulang menggunakan React dan Tailwind

License

Notifications You must be signed in to change notification settings

ichramsyah/rinema-frontend-rebuild-filmPage

Repository files navigation

image

Rebuild Halaman Film Rinema

Lisensi: MIT Dideploy

React Tailwind CSS JavaScript

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.

Fitur

  • 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.

Teknologi yang Digunakan

  • 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 dan useFilmDetail) agar kode lebih bersih dan dapat digunakan kembali.
  • React Router DOM: Untuk menangani routing sisi klien ke halaman daftar film dan detail film.

Konsep Utama yang Diterapkan

  • Debounce: Diterapkan untuk menunda query pencarian, mengurangi panggilan fungsi yang tidak perlu dan meningkatkan responsivitas aplikasi.
  • Custom Hooks: Membuat useSearchPosts dan useFilmDetail untuk mengelola state, panggilan API, dan logika filter, mendukung reusability dan pemisahan tanggung jawab.
  • Container-Presenter Pattern: Memisahkan logika (di SearchContainer dan FilmDetailContainer) dari tampilan (di SearchPresenter dan FilmDetailPresenter) untuk kemudahan maintenance dan skalabilitas.
  • Facade Pattern: Digunakan dengan apiClient untuk menyederhanakan konfigurasi Axios dan interaksi API, menyembunyikan kompleksitas axios 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.

Cara Instalasi

  1. Clone repository:
    git clone <your-repo-url>
  2. Masuk ke direktori proyek:
    cd rebuild-rinema
  3. Install dependensi:
    npm install
  4. Jalankan server pengembangan:
    npm run dev
  5. Buka http://localhost:5173 (atau port lain yang ditampilkan di terminal) di browser Anda.

Cara Penggunaan

  • 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.

Endpoint API

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.

Struktur Proyek

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

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).

Lisensi

Proyek ini dilisensikan di bawah Lisensi MIT, yang memungkinkan penggunaan, modifikasi, dan distribusi gratis dengan menyertakan pemberitahuan hak cipta.

Penghargaan

  • 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.

Screenshot

/Film image

/DetailFilm image

Rencana Peningkatan

  • 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.

About

πŸ› οΈ REBUILD RINEMA - Proyek ini adalah pembangunan ulang modern dari halaman film di aplikasi web Rinema https://rinemaa.paramadina.ac.id/film, yang dibuat ulang menggunakan React dan Tailwind

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published