🦸♂️ Marvel – 📌 Présentation
Marvel est une application Full-Stack développée dans le cadre d’un test technique. Elle permet de parcourir l’univers Marvel à travers ses personnages et comics, avec un système de recherche, de pagination et de favoris, le tout via l’API Marvel personnalisée.
Le design est entièrement libre et réalisé avec l’objectif de proposer une expérience utilisateur moderne et agréable.
🎯 Objectifs du projet
Consommer une API externe
Mettre en place une architecture Frontend / Backend
Créer une application React avec routing
Implémenter des fonctionnalités courantes : recherche, pagination, favoris
Sécuriser les clés API
Déployer une application complète (frontend + backend)
🛠️ Technologies utilisées Frontend
React
React Router
Axios
CSS / Styled Components / autre (selon ton choix)
Local Storage pour la gestion des favoris
Hébergement : Netlify
Backend
Node.js
Express
Axios
dotenv
Hébergement : NorthFlank
🔐 API
API utilisée : API d'un centre de formation
Toutes les requêtes API sont effectuées depuis le backend
La clé API est stockée dans des variables d’environnement et n’est jamais exposée côté client
📂 Fonctionnalités 🧑🎤 Personnages
Liste des personnages Marvel (100 par page)
Affichage sous forme de fiches :
Image
Nom
Description
Recherche par nom
Pagination
Ajout / suppression des favoris
Accès à une page dédiée affichant les comics liés à un personnage
📚 Comics
Liste des comics Marvel
Tri alphabétique
Affichage sous forme de fiches :
Image
Titre
Description
Recherche par titre
Pagination
Ajout / suppression des favoris
⭐ Favoris
Gestion des favoris pour les personnages et les comics
Sauvegarde des favoris dans le Local Storage
Page dédiée aux favoris
🧭 Navigation
Header avec :
Logo MARVEL
Menu :
Personnages
Comics
Favoris
Routing géré avec React Router
🚀 Déploiement
Frontend (Netlify)
Backend (NorthFlank) :
🧠 Axes d’amélioration possibles
Authentification utilisateur
Sauvegarde des favoris en base de données
Optimisation des performances
Mode sombre / clair
Animations UI
👨💻 Auteur
Projet réalisé par Aurore Catoire Dans le cadre d’un test technique Full-Stack