# README HiMovies

Une application inspirée de Netflix, réalisée avec le framework React. Elle propose un système de recherche et de gestion des favoris. Pour quitter l’application ou revenir au portfolio, il suffit d’appuyer sur le logo puis de confirmer.

# I) Technologies utilisées

  1. React pour la structure de l’application
  2. React avec Tailwind CSS pour le style de l’application
  3. React pour les fonctionnalités de l’application

# II) Fonctionnalités

  1. Liste de films dynamique
  2. Recherche en temps réel
  3. Filtres par catégories
  4. Système de favoris
  5. Page de détail
  6. Framework React

# III) Actions

`Liste` de films dynamique

Les films sont affichés de manière dynamique. Les données se mettent à jour sans rechargement de la page, offrant une expérience fluide et instantanée.

`Recherche` en temps réel

Pour effectuer une recherche, il suffit de saisir un texte dans la barre de recherche. Étant donné que la liste de films est dynamique, les résultats sont mis à jour instantanément. Si aucun résultat n’est trouvé, aucun film n’est affiché.

`Filtres` par catégories

Sélectionnez les catégories de films que vous souhaitez afficher. Les films correspondants s’affichent instantanément. Les filtres prennent également en compte la recherche en cours.

Système de `favoris`

En cliquant sur l’icône en forme de cœur présente sur la carte d’un film, celui-ci est ajouté aux favoris. Pour le retirer, il suffit de cliquer à nouveau sur le cœur. La liste des favoris est accessible via le lien Favoris dans le header.

`Page de détail`

Vous pouvez consulter le détail d’un film en cliquant directement sur sa carte. Vous serez alors redirigé vers une page dédiée au film.

`Framework React`

Ce projet utilise React Router pour la gestion des routes dynamiques (/movie/:id) et une navigation en Single Page Application (SPA). Il met en œuvre les hooks React useState et useEffect, le lifting state up, des props contrôlées, des composants réutilisables, une séparation claire entre pages et composants, React Router v6 (Routes, Route), la gestion de l’état dérivé (films filtrés) ainsi que Tailwind CSS pour le style.

Retour Tester