🎥 JustStreamIt – Développement d’un site web de classement de films

Contexte

Dans le cadre de ma formation chez OpenClassrooms, j’ai rejoint l’association JustStreamIt, spécialisée dans les classements cinématographiques, pour concevoir leur première application web. Le but est de permettre aux utilisateurs de visualiser en temps réel une sélection de films les mieux notés selon l’API interne OCMovies.

Passionné de cinéma et de développement web, j’ai proposé mes services pour réaliser cette interface utilisateur responsive et conforme aux standards du web.

Objectif

Développer le front-end complet du site JustStreamIt, à partir de maquettes Figma et d’un cahier des charges, avec les contraintes suivantes :

• Affichage dynamique des meilleurs films et des films par catégorie
• Fenêtre modale présentant les détails d’un film sélectionné
• Utilisation de l’API locale OCMovies pour charger dynamiquement les données
• Interface responsive adaptée aux écrans mobile, tablette et ordinateur
• Intégration HTML/CSS/JavaScript sans framework JS externe (Vanilla JS uniquement)

Défis techniques

• Intégration responsive multi-périphériques (mobile, tablette, desktop)
• Appels API REST en JavaScript natif via fetch
• Génération dynamique de contenus à partir des données retournées par l’API
• Création d’une fenêtre modale interactive affichant les détails complets d’un film
• Gestion des éléments masqués/affichés avec un bouton “Voir plus” selon la taille de l’écran
• Respect des bonnes pratiques front-end : W3C valid, code sémantique, et aucune erreur JS en console
• Hébergement d’un projet versionné sur GitHub avec README et structure propre

Compétences développées

• Développement d’une interface utilisateur dynamique avec HTML, CSS et JavaScript
• Intégration d’une API REST pour la récupération et l’affichage de données
• Conception d’une expérience utilisateur fluide et réactive
• Maîtrise des outils du développement front-end sans framework externe
• Utilisation d’un framework CSS (Tailwind ou Bootstrap) dans un environnement contraint
• Respect des standards de qualité du code et gestion de projet via Git

Liens utiles