Test technique speechi

Temps de développement : ~14h

Répartition du temps :

• Structure du code: ~1h.
• Code des composants : ~2H
• Gestion de l'api: ~3H
• Gestion des erreurs / dubbage : ~4h
  • Gestion du typescript: ~3h
    Beaucoup d'erreur causer par la mauvaise définition des types
    Je n'avais jamais utiliser typescript avant ce projet.
  • Gestion des autres erreurs: ~1H
• Interface Utilisateur : ~2h, interface simple et propre. J'ai préféré partir en full css car j'aurais passé autant de temps sur la doc tailwind ou material UI pour moins bien je pense.
• Readme + relecture : ~ 1h

Application web React + TypeScript + Vite pour rechercher et afficher des films via l'API OMDB.

ViteJs : builder que j'ai toujours utilisé dans tous mes projets React. Permet d'avoir un serveur local de dev qui reload automatiquement et rapidement.

Fonctionnalités

• Recherche de films : Recherche en temps réel via l'API OMDB
• Affichage en grille : Présentation des films sous forme de cartes
• Détails des films : Clic sur une carte pour voir les détails
• Gestion des erreurs : Messages d'erreur clairs
• État de chargement : Loader pour l'affiche de la grille + affiche des détails d'un film
• Gestion des images manquantes : Placeholder pour les affiches non disponibles

Installation et lancement

Prérequis

• Node.js (version recommandée : >=18)
• npm (généralement installé avec Node.js)
• Vite (sera installé automatiquement via npm install)
• React et ReactDOM (installés automatiquement via npm install)

# Décompresser le fichier

# Se placer à la racine du répertoire

# Installation des dépendances + Lancement en mode développement
npm start

Choix de stucture du code

Architecture des composants

L'application suit une architecture en composants React :

• App.tsx : Composant racine qui orchestre toute l'application

  • Gère l'état global (films, recherche, loading, erreurs, film sélectionné)
  • Contient la logique de l'API OMDb avec useEffect
  • Coordonne les interactions entre tous les composants enfants

• SearchBar.tsx : Composant de recherche autonome

  • Gère son propre état local pour l'input
  • Remonte la valeur de recherche au parent via parentFunction
  • Validation et soumission du formulaire

• MovieGrid.tsx : Conteneur d'affichage des résultats

  • Reçoit la liste des films depuis App.tsx
  • Gère l'affichage conditionnel (vide/erreur)
  • Transmet les clics vers le parent via onMovieClick

• MovieCard.tsx : Carte individuelle de film

  • Affiche poster, titre, année avec gestion des images manquantes
  • Déclenche l'ouverture de la modal au clic

• InfoMovieCard.tsx : Modal de détails

  • Overlay modal avec fermeture par clic extérieur
  • Affiche les détails complets du film sélectionné
  • Gestion de la fermeture via onClose

Choix des types

• Movie : type simplifié pour représenter un film dans la liste (id, titre, année, poster optionnel), utilisé pour l'affichage rapide et la gestion de la sélection.

• OmdbRawMovieDataBySearch et OmdbApiResponse : types correspondant exactement à la structure des réponses de l'API OMDb brut, ce qui permet de typer précisément les données reçues et d'éviter les erreurs lors du mapping.

• MovieDetails : type détaillé pour la fiche complète d'un film (tous les champs retournés par l'API lors d'une recherche par ID), utilisé dans la modale de détails.

• OmdbApiResponse : permet de typer les réponses renvoyées par l'API OMDb, afin de mieux gérer leurs états ainsi que les erreurs en typeSscript.

Flux de données

App (état global)   
    → SearchBar (input)  
    → App (recherche API)  
    → MovieGrid  
    → MovieCard  
    → App (sélection)  
    → InfoMovieCard

Interface utilisateur

• CSS pure : Utilisation du css pure car je n'ai jamais utilisé tailwind css ou malterial UI

• j'ai déjà passer trop de temps sur les autres aspect du projet (typescript + gestion des erreurs)

Limites & améliorations possibles

Limites actuelles

• Recherche limitée aux films (pas de filtres par type)
• Pas de pagination (limité aux 10 premiers résultats de la 1ère page)
• Pas de cache des résultats
• Pas de favoris ou historique
• URL et clé api en dur dans le code
• Mauvaise répartition des responsabilité : Toute la logique d'intéraction avec l'api dans le composant App.tsx

Améliorations suggérées

• Pagination : Charger plus de résultats sur plusieurs page
• Filtres : Par année, type (film/série), note
• Cache local : Stockage des recherches récentes
• Tests : Tests unitaires et d'intégration
• Recherche avancée : Par combinaison acteur, réalisateur, genre etc.. + inférence de l'intention utilisateur en cas d'erreur d'écriture ou recherche floue.