Aplikasi Web · AI

Cinema App v2 — Movie Discovery & AI

Aplikasi penemuan film production-grade dengan fitur AI (Gemini) untuk rekomendasi personal, mood-based discovery, watchlist tersinkronisasi via Supabase, ratings & reviews, dan custom list management dengan Google OAuth.

React 19
React Router
Supabase
Gemini AI
TMDB API
CSS Modules

Screenshot proyek Cinema App v2 — Movie Discovery & AI

Live Demo Repositori GitHub

Latar Belakang

Cinema App v2 adalah evolusi dari aplikasi katalog film sederhana menjadi platform penemuan film yang dipersonalisasi. Data film berasal dari TMDB API, sedangkan Gemini digunakan untuk rekomendasi berbasis preferensi dan suasana hati.

Tanggung Jawab

Membangun seluruh frontend dengan React 19 dan React Router.
Mengintegrasikan TMDB API dan Supabase untuk watchlist, rating, dan review.
Mengimplementasikan Google OAuth dan manajemen daftar kustom.

Pencapaian Utama

Rekomendasi film personal dan mood-based discovery berbasis Gemini.
Watchlist tersinkronisasi antar perangkat melalui Supabase.

Cuplikan Kode

TypeScript

Hook yang menggunakan Gemini untuk menerjemahkan mood user menjadi parameter pencarian film TMDB yang tepat — genre, dekade, tone, dan kata kunci spesifik.

// src/hooks/useMoodSearch.ts
import { useState } from "react";

interface MoodResult {
  genres: number[];
  keywords: string[];
  sortBy: string;
  prompt: string;
}

export function useMoodSearch() {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<MoodResult | null>(null);

  const searchByMood = async (moodText: string) => {
    setLoading(true);
    try {
      const res = await fetch("/api/mood-translate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ mood: moodText }),
      });
      const data: MoodResult = await res.json();
      setResult(data);
    } finally {
      setLoading(false);
    }
  };

  return { loading, result, searchByMood };
}

// API Route: /api/mood-translate/route.ts
// Gemini menerjemahkan: "Pengen nonton yang bikin nangis tapi ada unsur sci-fi"
// → { genres: [878, 18], keywords: ["emotional", "space", "loss"],
//     sortBy: "vote_average.desc", prompt: "Tearjerker Sci-Fi" }

Kode nyata dari proyek ini — bukan ilustrasi.

UTF-8TypeScript

Cuplikan Kode

TypeScript

Hook yang menggunakan Gemini untuk menerjemahkan mood user menjadi parameter pencarian film TMDB yang tepat — genre, dekade, tone, dan kata kunci spesifik.

// src/hooks/useMoodSearch.ts
import { useState } from "react";

interface MoodResult {
  genres: number[];
  keywords: string[];
  sortBy: string;
  prompt: string;
}

export function useMoodSearch() {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<MoodResult | null>(null);

  const searchByMood = async (moodText: string) => {
    setLoading(true);
    try {
      const res = await fetch("/api/mood-translate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ mood: moodText }),
      });
      const data: MoodResult = await res.json();
      setResult(data);
    } finally {
      setLoading(false);
    }
  };

  return { loading, result, searchByMood };
}

// API Route: /api/mood-translate/route.ts
// Gemini menerjemahkan: "Pengen nonton yang bikin nangis tapi ada unsur sci-fi"
// → { genres: [878, 18], keywords: ["emotional", "space", "loss"],
//     sortBy: "vote_average.desc", prompt: "Tearjerker Sci-Fi" }

Kode nyata dari proyek ini — bukan ilustrasi.

UTF-8TypeScript