Sophie Bluel - Architecte

Vue d'ensemble du projet

Ma mission consistait à créer la page web dynamique avec Javascript du site portfolio d’une architecte d’intérieur.
Et principalement à :
● créer la page de présentation des travaux de l'architecte (à partir du HTML fourni).
● créer la page de connexion de l'administrateur du site (le client) (code à créer de zéro).
● créer la modale permettant d'uploader de nouveaux médias (code à créer from scratch).

Les étapes du projet :
● Mettre en place l'environnement de développement : installer Node.js et npm, installer le back-end et le front-end du site, prendre connaissance du Kanban, cloner le repo GitHub, installer les dépendances du dossier Backend, découvrir la documentation Swagger de l’API et tester la route de récupération des travaux de l’architecte, via Swagger ou Postman
● Créer la page de présentation des travaux à partir du HTML existant.
● Récupérer les travaux depuis le back-end en faisant appel à l’API avec fetch afin de récupérer dynamiquement les projets de l’architecte et utiliser JavaScript pour ajouter à la galerie les travaux de l’architecte récupéré.
● Réaliser le filtre des travaux par catégorie.
● Coder la page de connexion pour administrer le site.
● Intégrer la page de connexion en suivant le design de la maquette.
● Authentifier l’utilisateur pour et le rediriger vers la page d’accueil quand la connexion est confirmée ou afficher un message d’erreur quand les informations utilisateur / mot de passe ne sont pas correctes.
● Créer une fenêtre modale pour ajouter des médias dans la galerie.
● Supprimer des travaux existants en communiquant avec l’API (fetch) et en actualisant le DOM.
● Envoyer un nouveau projet au back-end via le formulaire de la modale.
● Traiter la réponse de l’API pour afficher dynamiquement la nouvelle image de la modale en actualisant de manière dynamique le DOM.

Le projet se basait sur des éléments préparés au préalable :
● Le Figma du design pour créer les nouvelles fonctionnalités.
● Le code back-end pour faire persister les données et tester les fonctionnalités.
● Le code front-end d’origine avec la version statique de la page de l’architecte.
● Le Kanban de la mission, pour voir les tâches qui me sont attribuées.

Les compétences évaluées étaient :
● Gérer les événements utilisateurs avec JavaScript
● Manipuler les éléments du DOM avec JavaScript
● Récupérer les données utilisateurs dans le JavaScript via des formulaires

Pour mener à bien ce projet, j'ai suivi les cours OpenClassrooms suivants :
● Apprenez à programmer avec JavaScript
● Créez des pages web dynamiques avec Javascript
● Adoptez les API REST pour vos projets web
● Apprenez à utiliser la ligne de commande dans un terminal

N’hésitez pas à consulter le code et le visuel du projet en visitant les liens correspondants ci-dessous.