Movie Finder App

Description

Ce projet est une application web construite avec React, TypeScript, Vite et TailwindCSS. Elle permet de rechercher et d’afficher des films populaires à partir de l’API de The Movie Database (TMDB), avec une page de détails pour chaque film.

---

Objectifs

• Découvrir l’intégration d’une API REST (TMDB) avec React.
• Manipuler les hooks React (useState, useEffect, useDebounce).
• Gérer la navigation entre plusieurs pages avec React Router.
• Styliser une interface moderne avec TailwindCSS.

---

Structure du Projet

src/
 ├── components/
 │    ├── MovieCard.tsx       → Carte d’un film
 │    ├── Search.tsx          → Champ de recherche
 │    ├── Spinner.tsx         → Loader animé
 │
 ├── pages/
 │    ├── Home.tsx            → Liste des films + recherche
 │    ├── MovieDetails.tsx    → Détails d’un film sélectionné
 │
 ├── types/
 │    └── Movie.ts            → Interface TypeScript du film
 │
 ├── App.tsx                  → Définition des routes principales
 ├── main.tsx                 → Point d’entrée de l’application
 ├── index.css                → Styles globaux (avec Tailwind)

---

Installation et Prérequis

Étape 1 : Cloner le Répertoire

git clone https://github.com/moqim-ghizlan/movie-finder-app.git
cd movie-finder-app

Étape 2 : Installer les Dépendances

npm install

Étape 3 : Configurer la clé API TMDB

Créez un fichier .env.local à la racine du projet et ajoutez votre clé API v3 de TMDB :

VITE_TMDB_API_KEY=PUT_YOUR_API_KEY_HERE

Étape 4 : Lancer le Projet

npm run dev

Le projet sera accessible à l’adresse : 👉 http://localhost:5173

---

Fonctionnalités

• Recherche de films en temps réel (avec debounce).
• Affichage des films populaires par défaut.
• Page de détails avec affiche, résumé, note et langue.
• Interface responsive, claire et fluide.
• Loader animé lors du chargement des données.

---

Résultats

L’application offre une interface rapide et intuitive permettant de :

• Consulter les films populaires de TMDB.
• Rechercher un film par titre.
• Visualiser les informations détaillées (note, date, langue, etc.).

---

Auteur

Moqim Ghizlan

---

Licence

Ce projet est sous licence libre.