SmartMovieBox

L’application complète de films personnalisés

Développement Web & Mobile

Réalisé par:

KTAIB Achraf - RAHAL Nguia

Qu’est-ce que SmartMovieBox ?

  • Une application web responsive qui centralise la recherche, la découverte et l’organisation de films et séries.

  • Basée sur l’API TMDb pour des données à jour et riches visuels.

Aperçu des interfaces de SmartMovieBox

  • Affiche dynamiquement les films, séries et suggestions

  • Permet la recherche en temps réel

  • Redirige vers les fiches détaillées

  • Applique les préférences utilisateur (thème, texte)

Accueil

  • Affiche toutes les informations sur un film ou une série

  • Permet d’ajouter ou retirer un film des favoris

  • Regarder la bande d'annonce

  • Personnalise le thème et la taille du texte

  • Gère l’email, le mot de passe et le compte utilisateur

  • Définit la langue, le pays et les préférences de lecture

  • Active ou désactive les notifications et le stockage local

Fiche détail

  • Affiche les films enregistrés par l’utilisateur

  • Permet d’en retirer ou d’en consulter les détails

  • Sauvegarde les données localement (même après actualisation)

Favoris

Paramètres

Authentification

Text

Interface : Authentification

  • Interface d’entrée permettant la connexion ou l’inscription

  • Front end prêt à être connecté à une API d’authentification ( Firebase ou Supabase)

Accueil | Fonction : chargerFilms()

Récupère les films les plus populaires depuis l’API TMDb et les affiche dans la section "Films populaires" de la page d’accueil.

// Fonction asynchrone pour charger les films populaires
async function chargerFilms() {
  try {
    // Appel à l’API TMDb pour récupérer les films populaires
    const response = await fetch(
      `${baseURL}/movie/popular?api_key=${apiKey}&language=fr-FR`
    );

    // Conversion de la réponse en objet JSON
    const data = await response.json();

    // Affichage des films dans le carrousel via une fonction dédiée
    afficherSection(
      'films-populaires',  // ID de la section HTML cible
      data.results,        // Données des films
      'Populaires',        // Titre affiché dans le badge
      'movie'              // Type d’élément (film)
    );

  } catch (error) {
    // Gestion des erreurs réseau ou API
    console.error('Erreur chargement films :', error);
  }
}

Accueil | Fonction : chargerSuggestions()

Affiche une sélection de films comme “suggestions” sur la page d’accueil (films à l'affiche), via l’API TMDb.

// Fonction pour charger les suggestions (films à l'affiche)
async function chargerSuggestions() {
  try {
    // Requête vers l’API pour obtenir les films actuellement à l'affiche
    const response = await fetch(
      `${baseURL}/movie/now_playing?api_key=${apiKey}&language=fr-FR`
    );

    // Conversion de la réponse en JSON
    const data = await response.json();

    // Appel de la fonction générique d’affichage pour la section "Suggestions"
    afficherSection(
      'suggestions',      // ID de la section HTML
      data.results,       // Données des films
      'À l’affiche',      // Nom affiché sur le badge
      'movie'             // Type d’élément
    );

Accueil | Fonction : activerRecherche()

Permet à l’utilisateur de rechercher un film ou une série en tapant dans la barre de recherche, avec des résultats qui s’affichent en direct.

function activerRecherche() {
  const barre = document.getElementById('barre-recherche');

  // À chaque frappe de touche, lancer la recherche
  barre.addEventListener('input', async () => {
    const query = barre.value;

    if (query.length > 2) {
      try {
        // Appel à l’API TMDb pour rechercher tout type de contenu
        const response = await fetch(
          `${baseURL}/search/multi?api_key=${apiKey}&query=${query}&language=fr-FR`
        );
        const data = await response.json();

        // Affiche les résultats dans la section dédiée
        afficherSection('resultats-recherche', data.results, 'Résultats', 'multi');

      } catch (error) {
        console.error('Erreur recherche :', error);
      }
    }
  });
}

Accueil | Fonction : afficherSection()

Génère l’affichage visuel d’une liste de films ou séries dans un carrousel horizontal. Utilisée par toutes les fonctions de chargement

function afficherSection(id, items, badge, type) {
  const section = document.getElementById(id);
  section.innerHTML = ''; // Vide la section avant de la remplir

  // Ajoute un titre avec badge
  const titre = document.createElement('h3');
  titre.textContent = badge;
  section.appendChild(titre);

  // Crée un conteneur horizontal
  const container = document.createElement('div');
  container.classList.add('carousel');

  // Pour chaque film ou série, créer une carte
  items.forEach(item => {
    const card = document.createElement('div');
    card.classList.add('card');

    // Image d'affiche
    const image = document.createElement('img');
    image.src = `${imageBase}${item.poster_path}`;
    card.appendChild(image);

    // Redirige vers la fiche détail au clic
    card.addEventListener('click', () => {
      window.location.href = `details.html?id=${item.id}&type=${type}`;
    });

    container.appendChild(card);
  });

  section.appendChild(container);
}

Text

Interface : Accueil​

Détails | Fonction : loadMovieDetails()

Affiche toutes les informations détaillées d’un film ou d’une série à partir de son ID (récupéré depuis l’URL), en interrogeant l’API TMDb.

// Fonction principale de la page détails
async function loadMovieDetails() {
  const movieId = new URLSearchParams(window.location.search).get('id');

  // Récupération des infos du film
  const response = await fetch(`${baseURL}/movie/${movieId}?api_key=${apiKey}&language=fr-FR`);
  const data = await response.json();

  // Insertion des infos dans le DOM
  document.getElementById('titre').textContent = data.title;
  document.getElementById('synopsis').textContent = data.overview;
  document.getElementById('backdrop').src = `${imageBase}${data.backdrop_path}`;
}

async function afficherBandeAnnonce(movieId) {
  // 1. Appel TMDb pour récupérer toutes les vidéos associées au film
  const res = await fetch(`${baseURL}/movie/${movieId}/videos?api_key=${apiKey}&language=fr-FR`);
  const data = await res.json();

  // 2. Filtre pour ne garder que la bande-annonce (type "Trailer")
  const trailer = data.results.find(v => v.type === 'Trailer');
  if (!trailer) return; // Rien à afficher si pas de trailer

  // 3. Création et insertion de l'iframe YouTube
  const iframe = document.createElement('iframe');
  iframe.src = `https://www.youtube.com/embed/${trailer.key}`;
  iframe.width = '100%';
  iframe.height = '360';
  document.getElementById('trailer-container').appendChild(iframe);
}

Détails | Fonction : afficherBandeAnnonce()

Récupère la bande-annonce officielle du film via l’API TMDb et l’intègre dans un lecteur YouTube embarqué sur la page Détails.

Text

Interface : Détails

Text

Interface : Détails

Favoris | Fonction : chargerFavoris()

Affiche dynamiquement les films que l’utilisateur a ajoutés à ses favoris, en les récupérant depuis le stockage local (localStorage).

function chargerFavoris() {
  const favoris = JSON.parse(localStorage.getItem('favoris')) || [];

  // Pour chaque film favori, créer une carte
  favoris.forEach(film => {
    const card = document.createElement('div');
    card.classList.add('card');

    const image = document.createElement('img');
    image.src = `${imageBase}${film.poster_path}`;
    card.appendChild(image);

    // Redirige vers la page de détails au clic
    card.addEventListener('click', () => {
      window.location.href = `details.html?id=${film.id}&type=movie`;
    });

    document.getElementById('contenu-favoris').appendChild(card);
  });
}

Favoris | Fonction : ajouterOuSupprimerFavori()

Permet à l’utilisateur d’ajouter ou retirer un film de ses favoris en cliquant sur une icône ou un bouton, tout en mettant à jour le localStorage.

function ajouterOuSupprimerFavori(film) {
  let favoris = JSON.parse(localStorage.getItem('favoris')) || [];

  const index = favoris.findIndex(f => f.id === film.id);

  if (index === -1) {
    favoris.push(film); // Ajouter si pas encore dans favoris
  } else {
    favoris.splice(index, 1); // Retirer s’il est déjà présent
  }

  localStorage.setItem('favoris', JSON.stringify(favoris));
}

Text

Interface : Favoris

Paramètres | Fonction : appliquerPreferences()

Applique automatiquement les préférences visuelles choisies par l’utilisateur (thème clair/sombre, taille de police, etc.) dès le chargement de la page.

function appliquerPreferences() {
  const theme = localStorage.getItem('theme') || 'sombre';
  const taille = localStorage.getItem('tailleTexte') || 'moyenne';

  // Applique le thème sélectionné
  document.body.classList.toggle('clair', theme === 'clair');

  // Applique la taille du texte
  document.body.style.fontSize = taille === 'grande' ? '18px' :
                                 taille === 'petite' ? '12px' : '16px';
}

Paramètres | Fonction changerMotDePasse() & effacerStockage()

Permet à l’utilisateur de changer son mot de passe et réinitialiser toutes les préférences sans supprimer le compte.

function changerMotDePasse(ancien, nouveau) {
  const pwd = localStorage.getItem('motDePasse');
  if (ancien === pwd) {
    localStorage.setItem('motDePasse', nouveau);
    alert('Mot de passe modifié.');
  } else {
    alert('Ancien mot de passe incorrect.');
  }
}

//////////////////


function effacerStockage() {
  localStorage.clear();
  alert('Stockage local effacé.');
  location.reload(); // Recharge la page avec les valeurs par défaut
}

Paramètres | Fonction : Langue, Notifications & Lecteur vidéo

  • Changer la langue d'affichage
  • Activer/Désactiver les notifications
  • Paramétrer le lecteur vidéo
function changerLangue(langue) {
  localStorage.setItem('langue', langue);
}

function changerNotifications(actives) {
  localStorage.setItem('notifications', actives);
}

function changerQualite(qualite) {
  localStorage.setItem('qualite', qualite);
}

function changerLangueSousTitres(langue) {
  localStorage.setItem('sousTitres', langue);
}

Interface : Paramètres

Interface : Paramètres

  1.  Connexion réelle des utilisateurs.
  2.  Favoris accessibles partout.
  3.  Suggestions plus intelligentes.
  4.  Affichage plus complet.

Améliorations possibles

Démonstration

Merci de votre attention

Palette

By nguia.rahal@gmail.com nguia

Made with Slides.com

Palette

  • 8

More from nguia.rahal@gmail.com nguia