NoaStream : Clone Netflix & Explorateur Cinéma

Une application web immersive simulant une plateforme de streaming moderne. Développée entièrement en JavaScript natif, elle offre une expérience fluide sans rechargement de page.

---

Objectif du projet

Créer une interface utilisateur complexe et responsive (Mobile First) capable de gérer dynamiquement de grandes quantités de données (films, séries, acteurs) provenant d'une API externe, tout en conservant les préférences de l'utilisateur localement.

Fonctionnalités Clés

1. Expérience Utilisateur (UX/UI)

• Interface "Netflix-like" : Carrousels tactiles, Hero slider animé, Modales de détails instantanées.
• Navigation fluide : Architecture SPA (Single Page Application) simulant le routing sans rechargement.
• Responsive : Menu burger animé, grilles adaptatives et gestion tactile.

2. Algorithmes & Données

• Suggestions Intelligentes : Algorithme personnalisé proposant des contenus basés sur les sagas, les réalisateurs communs ou les acteurs principaux.
• Recherche Dynamique : Autocomplétion avec prévisualisation des résultats (Films, Séries et Personnes).
• Infinite Scroll : Chargement automatique des pages suivantes lors du défilement.

3. Architecture Technique

Composant	Technologie / Méthode
Données	API REST (The Movie Database v3)
Requêtes	fetch() avec async/await et gestion d'erreurs
Persistance	localStorage (Gestion de la liste "Favoris")
Performance	Debouncing (Recherche) & Lazy Loading (Images)

Ce que j'ai appris

Ce projet a été un excellent exercice pour manipuler des données asynchrones provenant d'une API. J'ai pu mettre en pratique les concepts de promesses, `async/await` et `Promise.all` pour optimiser les appels réseau. La gestion de l'état de l'application (films favoris, etc.) avec le `localStorage` a également été une expérience très formatrice.

Extrait de Code (Logique de Suggestion)

Exemple de la fonction agrégant plusieurs sources pour recommander du contenu pertinent :

async function getSmartSuggestions(type, id) {
    // Récupération parallèle des détails et des crédits
    const [details, credits] = await Promise.all([
        fetchData(`/movie/${id}`),
        fetchData(`/movie/${id}/credits`)
    ]);

    let suggestions = [];
    
    // 1. Ajout des films de la même collection (Saga)
    if (details.belongs_to_collection) { ... }

    // 2. Ajout des films du même réalisateur
    const director = credits.crew?.find(p => p.job === 'Director');
    if (director) { ... }

    return suggestions;
}