Développement de l’interface JustStreamIt

Ce projet m’a permis de plonger au cœur du développement front-end.
Ma mission : concevoir l’interface complète de JustStreamIt, une application web fictive permettant d’afficher un classement de films depuis une API Python.

Le point de départ semblait simple : créer une interface claire, responsive et dynamique à partir de données issues d’une API REST.
Cependant, j’ai rapidement découvert que le backend fourni comportait de nombreuses anomalies, notamment des liens d’images cassés.
Ces erreurs nuisaient au rendu visuel du site et généraient des avertissements dans la console.

Comme l’un des critères d’évaluation exigeait zéro erreur, j’ai décidé d’aller bien plus loin que les attentes.
Je ne voulais pas livrer un projet partiellement fonctionnel.

Réparation du backend et fiabilisation des données

J’ai exploré le code de l’API et mis en place un script de web scraping.
Ce script extrait automatiquement des visuels valides à partir des URL IMDB liées à chaque film.
Lorsqu’aucune image n’était disponible, une icône SVG de secours s’affichait.
Grâce à cette méthode, j’ai obtenu une interface stable, homogène et cohérente.

Ainsi, j’ai pu fiabiliser le rendu et supprimer toutes les erreurs ou avertissements.
Le site fonctionnait enfin de manière fluide et sans messages parasites dans la console.

Réorganisation du projet

En parallèle, j’ai réorganisé le projet pour le rendre plus clair.
L’objectif était de séparer proprement les deux environnements :

• Un dossier backend/ pour l’API Python.
• Un dossier frontend/ pour le code du site.
• Un fichier README.md à la racine décrivant l’installation et le lancement.

Grâce à cette structure, la maintenance devient plus simple.
Les étapes de développement sont logiques et faciles à suivre, même pour un futur collaborateur.

Intégration de Node.js et Gulp

Côté front-end, j’ai configuré un environnement Node.js avec Gulp.
Ce pipeline compile automatiquement mes fichiers SCSS et JavaScript, puis génère un fichier unique global.css.

Même si j’utilise souvent Tailwind CSS, j’ai choisi Bootstrap 5 pour ce projet.
Je souhaitais explorer une approche différente du responsive design.
Cette expérience m’a permis de mieux comprendre les grilles, les breakpoints et les composants réutilisables.

De plus, l’usage de SCSS m’a aidé à garder un style clair, modulaire et facile à maintenir.

Logique JavaScript et gestion asynchrone

Pour la partie JavaScript, j’ai centralisé tous les appels à l’API dans une fonction getJSON() située dans assets/js/api.js.
Cette approche réduit la duplication du code et facilite la maintenance.

Chaque chargement de contenu — meilleur film, catégories, genres — se fait de façon asynchrone et ordonnée.
Ainsi, la page reste fluide, rapide et réactive.

En effet, la combinaison de async, await et fetch permet d’enchaîner les requêtes sans blocage.
Le résultat : un site rapide, ergonomique et agréable à utiliser.

Interface responsive et accessible

Le site respecte les standards W3C et PEP8, ainsi que la sémantique HTML.
Il s’adapte à toutes les tailles d’écran : mobile, tablette et ordinateur.
J’ai ajouté des animations légères, des modales accessibles et des boutons “Voir plus / Voir moins”.

Ainsi, la navigation est intuitive et agréable.
Le résultat final est une interface propre, sans erreurs et totalement responsive.
Même si certaines affiches manquent, chaque contenu disponible s’affiche correctement avec un texte de remplacement.

Le chargement est rapide, et les catégories se mettent à jour via AJAX.
L’ensemble reste fluide et cohérent, quelle que soit la plateforme utilisée.

Un apprentissage complet et formateur

Au-delà des aspects techniques, ce projet m’a appris à penser comme un développeur complet.
J’ai appris à analyser un problème, à concevoir une architecture claire et à automatiser les processus.
Finalement, j’ai livré un produit final robuste, propre et professionnel.