Fakeflix

Projet perso | Clone d'une Plateforme de streaming

PROBLEMATIQUE

Reproduction de l'interface et de ses fonctionnalités

Fonctionnalités

opérationnelles

👁️ Affiche une gallery de films par catégories

🔄 Bascule entre l'affiche et les informations du film

▶️ Joue le généric standard pour un film sélectionné

❤️ Ajoute un-des film-s à la liste de films à voir

❌ Supprime un-des film-s à la liste de films à voir

🔎 Recherche un film et affiche les résultats correspondants

à venir

• Personnalise le profil utlisateur
• Joue la bande-annonce officielle du film sélectionné
• Ajoute un vote (like / dislike) au film sélectionné (actualisation du compteur de votes)

Compétences développées

• Reproduction d'une application et de ses fonctionnalités
• Utilisation d'une base de données sur serveur distant
• Sécurisation de la clé d'authentification à l'API
• Optimisation des performances de chargement et de rendu

Méthodologie

🔘 Analyse · Synthèse · Personnalisation

🔘 Environnement local sécurisé

🔘 Appels asynchrones de l'API REST tmdb

🔘 Mise en cache des données

🔘 Gestion des données : itération, filtre, tri, adaptation

🔘 Traitement différé des fonctionnalités selon besoin

🔘 Fragmentation du code (bundle splitting)

🔘 Gestion locale & globale des états

🔘 Rendus conditionnels selon interaction

🔘 Mémorisation des valeurs et états selon besoin

🔘 Génération aléatoire d'affichage

Choix techniques

VOIR TAGS DE LA DESCRIPTION DU DEPÔT

Gestionnaires d'Etat

✔ useState
✔ useContext
✔ useReducer

Mémorisation de valeurs

✔ useRef
✔ useMemo

Actualisation de rendu

✔ useEffect

Gestionnaires de navigation

✔ React Router
✔ Nested Routes
✔ useLocation
✔ useNavigation

Hooks personnalisés

✔ usePopup
✔ useFetch

Optimisation des performances

✔ Axios
✔ Cache data
✔ Local storage
✔ Lazy / Suspens

Bibliothèque

React-JS

Installation

Editeur recommandé

• Visual Studio code

Prérequis

• Git pour cloner les repos
• nodeJS (version 17.8.0) pour exécuter les commandes
• npm (version 8.6.0) pour lancer l'application

Dépendances

• react (version 17.0.2)
• react-router-dom (version 6.0.2)
• prop-types (version 15.8.0)
• [axios] (https://axios-http.com/fr/docs/intro) (version 0.25.0)
• [MUI] (https://mui.com/) (version 5.3.0)
• [react-select] (https://react-select.com/home) (version 5.2.2)

Lancement du front-end

• Cloner le repo : git clone https://github.com/codexarama/WealthHealth.git
• Aller dans ce dossier : cd WealthHealth
• Installer ses dépendances : npm install
• Lancer l'application : npm start

URL de visualisation du rendu web : http://localhost:3000