Build CineSuper,
your own mini OTT platform

cinesuper-<jsoft-id>/
├── README.md
├── index.html
├── style.css
├── config.js
├── app.js
├── database/
│   ├── 01_tables.sql
│   ├── 02_seed.sql
│   ├── 03_security.sql
│   ├── 04_view.sql
│   ├── 05_queries.sql
│   └── 06_personalisation.sql
└── screenshots/

git add .
# Use the exact message shown in each PUSH box
git commit -m "Phase 3: create tables"
git push

// Replace both values with YOUR Supabase details from Phase 7
const SUPABASE_URL = "https://YOUR-PROJECT-ID.supabase.co";
const SUPABASE_KEY = "YOUR-PUBLISHABLE-OR-ANON-KEY";

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CineSuper - Mini OTT</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>🎬 CineSuper</h1>
    <p>Your mini OTT movie library</p>
  </header>

  <section class="controls">
    <input id="search" type="text" placeholder="🔍 Search movies...">
    <select id="genreFilter">
      <option value="">All Genres</option>
    </select>
  </section>

  <p id="status">Loading movies...</p>

  <main id="movieGrid" class="grid"></main>

  <!-- Movie detail popup -->
  <div id="modal" class="modal hidden">
    <div class="modal-content">
      <button id="closeModal" class="close">&times;</button>
      <div id="movieDetail"></div>

      <h3>Reviews</h3>
      <div id="reviewList"></div>

      <h3>Add your review</h3>
      <form id="reviewForm">
        <input id="reviewerName" type="text" placeholder="Your name" maxlength="50" required>
        <select id="reviewRating" required>
          <option value="">Select rating</option>
          <option value="5">⭐⭐⭐⭐⭐ (5)</option>
          <option value="4">⭐⭐⭐⭐ (4)</option>
          <option value="3">⭐⭐⭐ (3)</option>
          <option value="2">⭐⭐ (2)</option>
          <option value="1">⭐ (1)</option>
        </select>
        <textarea id="reviewComment" placeholder="Write your comment" maxlength="500" required></textarea>
        <button type="submit">Submit Review</button>
      </form>
    </div>
  </div>

  <footer>
    <p>Built by <strong>YOUR NAME</strong> · JSOFT ID: <strong>YOUR JSOFT ID</strong></p>
    <p>Jain School of Future Technology · Faculty: Sathish Kumar M</p>
    <p class="powered">Powered by Supabase</p>
  </footer>

  <!-- Order matters: 1) Supabase library  2) your keys  3) your app -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  <script src="config.js"></script>
  <script src="app.js"></script>
</body>
</html>

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #0f0f14;
  color: #f1f1f1;
  min-height: 100vh;
}

header { text-align: center; padding: 30px 16px 10px; }
header h1 { font-size: 2.4rem; color: #e50914; }
header p  { color: #aaa; margin-top: 4px; }

.controls {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; padding: 16px;
}
.controls input, .controls select {
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid #333; background: #1c1c24; color: #fff;
  font-size: 1rem; min-width: 220px;
}

#status { text-align: center; color: #888; margin: 6px 0 12px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px; padding: 0 24px 40px;
  max-width: 1200px; margin: 0 auto;
}

.card {
  background: #1c1c24; border-radius: 10px; overflow: hidden;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(229, 9, 20, 0.35); }
.card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.card-body { padding: 10px; }
.card-body h3 { font-size: 1rem; margin-bottom: 4px; }
.card-body p  { font-size: 0.8rem; color: #aaa; }
.stars { color: #fbbf24 !important; margin-top: 4px; }

.modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 10;
}
.hidden { display: none; }
.modal-content {
  background: #1c1c24; border-radius: 12px;
  max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 24px; position: relative;
}
.close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer;
}
.modal-content h2 { color: #e50914; margin-bottom: 6px; }
.modal-content h3 { margin: 20px 0 10px; }
.meta { color: #aaa; font-size: 0.9rem; margin-bottom: 10px; }

.review { background: #26262f; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; }
.review strong { color: #fbbf24; }
.review small  { color: #777; display: block; margin-top: 4px; }

#reviewForm { display: flex; flex-direction: column; gap: 10px; }
#reviewForm input, #reviewForm select, #reviewForm textarea {
  padding: 10px; border-radius: 8px;
  border: 1px solid #333; background: #0f0f14; color: #fff; font-size: 0.95rem;
}
#reviewForm textarea { min-height: 70px; resize: vertical; }
#reviewForm button {
  padding: 12px; border: none; border-radius: 8px;
  background: #e50914; color: #fff; font-weight: bold; cursor: pointer;
}
#reviewForm button:hover { background: #b20710; }

footer {
  text-align: center; padding: 20px; line-height: 1.7;
  color: #888; font-size: 0.85rem; border-top: 1px solid #222;
}
footer strong { color: #e5e5e5; }
footer .powered { color: #555; font-size: 0.75rem; }

// 1. Connect to Supabase
const db = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);

// 2. Page elements
const grid        = document.getElementById("movieGrid");
const statusEl    = document.getElementById("status");
const searchInput = document.getElementById("search");
const genreFilter = document.getElementById("genreFilter");
const modal       = document.getElementById("modal");
const movieDetail = document.getElementById("movieDetail");
const reviewList  = document.getElementById("reviewList");
const reviewForm  = document.getElementById("reviewForm");

let movies = [];
let ratingsMap = {};
let currentMovieId = null;

// Stops users injecting HTML/JS through reviews (safe in text and attributes)
function escapeHtml(text) {
  return String(text ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

function showError(error) {
  console.error(error);
  statusEl.textContent = "❌ Error: " + error.message;
}

// 3. SELECT id, name FROM genres ORDER BY name
async function loadGenres() {
  const { data, error } = await db.from("genres").select("id, name").order("name");
  if (error) return showError(error);
  data.forEach((g) => {
    const opt = document.createElement("option");
    opt.value = g.id;
    opt.textContent = g.name;
    genreFilter.appendChild(opt);
  });
}

// 4. SELECT * FROM movie_ratings (the view)
async function loadRatings() {
  const { data, error } = await db.from("movie_ratings").select("id, avg_rating, review_count");
  if (error) return console.error(error);
  ratingsMap = {};
  data.forEach((r) => (ratingsMap[r.id] = r));
}

// 5. SELECT movies JOIN genres, with search and filter
async function loadMovies() {
  statusEl.textContent = "Loading movies...";

  let query = db
    .from("movies")
    .select("id, title, release_year, language, duration_min, description, poster_url, genres(name)")
    .order("release_year", { ascending: false });

  const search = searchInput.value.trim();
  const genreId = genreFilter.value;
  if (search)  query = query.ilike("title", `%${search}%`);
  if (genreId) query = query.eq("genre_id", genreId);

  const { data, error } = await query;
  if (error) return showError(error);

  movies = data;
  statusEl.textContent = data.length ? `${data.length} movie(s) found` : "No movies found 😕";
  grid.innerHTML = data.map(movieCard).join("");
  document.querySelectorAll(".card").forEach((card) =>
    card.addEventListener("click", () => openMovie(Number(card.dataset.id)))
  );
}

function movieCard(m) {
  const r = ratingsMap[m.id];
  const stars = r && r.avg_rating ? `⭐ ${r.avg_rating} (${r.review_count})` : "No ratings yet";
  return `
    <div class="card" data-id="${m.id}">
      <img src="${escapeHtml(m.poster_url)}" alt="${escapeHtml(m.title)}">
      <div class="card-body">
        <h3>${escapeHtml(m.title)}</h3>
        <p>${m.release_year} · ${escapeHtml(m.language)} · ${escapeHtml(m.genres?.name)}</p>
        <p class="stars">${stars}</p>
      </div>
    </div>`;
}

// 6. Movie detail popup
async function openMovie(id) {
  const m = movies.find((x) => x.id === id);
  if (!m) return;
  currentMovieId = id;
  movieDetail.innerHTML = `
    <h2>${escapeHtml(m.title)}</h2>
    <p class="meta">${m.release_year} · ${escapeHtml(m.language)} · ${escapeHtml(m.genres?.name)} · ${m.duration_min} min</p>
    <p>${escapeHtml(m.description)}</p>`;
  modal.classList.remove("hidden");
  await loadReviews(id);
}

// 7. SELECT * FROM reviews WHERE movie_id = ?
async function loadReviews(movieId) {
  reviewList.innerHTML = "<p>Loading reviews...</p>";
  const { data, error } = await db
    .from("reviews")
    .select("reviewer_name, rating, comment, created_at")
    .eq("movie_id", movieId)
    .order("created_at", { ascending: false });

  if (error) {
    reviewList.innerHTML = `<p>Error: ${escapeHtml(error.message)}</p>`;
    return;
  }
  reviewList.innerHTML = data.length
    ? data.map((r) => `
        <div class="review">
          <strong>${"⭐".repeat(r.rating)}</strong> — ${escapeHtml(r.reviewer_name)}
          <p>${escapeHtml(r.comment)}</p>
          <small>${new Date(r.created_at).toLocaleString()}</small>
        </div>`).join("")
    : "<p>No reviews yet. Be the first!</p>";
}

// 8. INSERT INTO reviews
reviewForm.addEventListener("submit", async (e) => {
  e.preventDefault();
  const newReview = {
    movie_id: currentMovieId,
    reviewer_name: document.getElementById("reviewerName").value.trim(),
    rating: Number(document.getElementById("reviewRating").value),
    comment: document.getElementById("reviewComment").value.trim(),
  };
  const { error } = await db.from("reviews").insert(newReview);
  if (error) {
    alert("Could not save review: " + error.message);
    return;
  }
  reviewForm.reset();
  await loadReviews(currentMovieId);
  await loadRatings();
  await loadMovies();
});

// 9. Close popup
document.getElementById("closeModal").addEventListener("click", () => modal.classList.add("hidden"));
modal.addEventListener("click", (e) => { if (e.target === modal) modal.classList.add("hidden"); });
document.addEventListener("keydown", (e) => { if (e.key === "Escape") modal.classList.add("hidden"); });

// 10. Search (waits until typing stops) and genre filter
let typingTimer;
searchInput.addEventListener("input", () => {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(loadMovies, 300);
});
genreFilter.addEventListener("change", loadMovies);

// 11. Start
async function init() {
  await loadGenres();
  await loadRatings();
  await loadMovies();
}
init();

# 🎬 CineSuper — Mini OTT Movie Database

**Live Demo:** https://YOUR-USERNAME.github.io/cinesuper-YOUR-JSOFT-ID/

**Student:** YOUR NAME | **JSOFT ID:** YOUR JSOFT ID
**Institution:** Jain School of Future Technology
**Course:** Database Management Systems | **Faculty:** Sathish Kumar M

## Tech Stack
- Supabase (PostgreSQL) – database
- HTML, CSS, JavaScript – frontend
- GitHub Pages – hosting

## Database
- genres (id, name)
- movies (id, title, release_year, language, duration_min, description, poster_url, genre_id → genres)
- reviews (id, movie_id → movies, reviewer_name, rating 1–5, comment, created_at)
- View: movie_ratings (average rating per movie)
- SQL scripts: see the `database/` folder

## Features
- Browse, search and filter movies
- Movie details with reviews
- Add a review (saved to the database)
- Row Level Security enabled

## My Personalisation
- New movies added: …
- New column: …
- Extra feature: …

-- example
alter table movies add column director text;
update movies set director = 'Jeethu Joseph' where title = 'Drishyam';
update movies set director = 'Christopher Nolan'
where title in ('Memento', 'The Dark Knight', 'Inception', 'Interstellar', 'Oppenheimer');

drop view  if exists movie_ratings;
drop table if exists reviews, movies, genres cascade;