Rapport de lancement

Phase de découverte

Découverte de l’entreprise et mise en place de l’environnement de travail

Lors de mon arrivée en entreprise, j’ai commencé par une phase de découverte de la structure, de son organisation interne, ainsi que des projets en cours. Cette étape m’a permis de mieux comprendre le contexte dans lequel j’allais évoluer et de m’approprier les objectifs de l’équipe technique.

J’ai ensuite procédé à l’installation et à la prise en main des outils nécessaires au développement :

• Visual Studio Code (VSC) en tant qu’éditeur de code principal,
• Git pour la gestion de versions et la collaboration sur le projet,
• Docker pour le déploiement et la gestion d’environnements de développement uniformisés,
• VPN de l’entreprise pour accéder aux ressources internes de manière sécurisée,
• Jira pour le suivi des tâches et la gestion de projet agile.

Analyse des besoins et préparation technique

Une fois l’environnement configuré, j’ai étudié en détail le cahier des charges et les maquettes fournies, afin de bien comprendre les attentes fonctionnelles et visuelles du projet. Cette phase m’a permis d’identifier les différentes fonctionnalités à développer, les contraintes techniques, ainsi que les priorités du projet.

J’ai également pris en main les technologies principales utilisées :

• Pour le front-end, le framework React, associé à la bibliothèque Material-UI (MUI),
• Pour le back-end, le framework Django (Python), qui structure la logique métier et l’accès aux données.

Développement des premières fonctionnalités

Dans un premier temps, j’ai décidé de développer deux éléments clés de l’interface :

• Le Header de l’application, incluant les éléments de navigation et les icônes,
• Un tableau de données interactif, réalisé à l’aide du composant DataGrid de la bibliothèque MUI, permettant l’affichage dynamique d’informations.

Dans le cadre de cette tâche, j’ai également installé et configuré des packages spécifiques pour la gestion des icônes, afin d’assurer la cohérence visuelle avec les maquettes.

Développement phase 1 : front-end utilisateur

Développement du front-end en React

Dans le cadre du développement du front-end, j’ai travaillé avec la bibliothèque React en utilisant Material-UI (MUI) pour concevoir une interface utilisateur moderne et fonctionnelle. Une partie importante de mon travail a concerné le développement des fonctionnalités du tableau de données. J’ai notamment créé :

• Un composant toggle permettant d’ouvrir ou de fermer un onglet de prévisualisation,
• Un composant bouton dropdown pour la sélection d’états,
• Un filtre personnalisé pour affiner les résultats affichés.

J’ai également amélioré le style global à l’aide de CSS et installé plusieurs packages complémentaires, notamment React Bootstrap pour la gestion du responsive.

Développement de pages supplémentaires et préparation des échanges avec l’API

Par la suite, j’ai développé plusieurs pages supplémentaires en créant des Routes afin d’étendre les fonctionnalités de l’application :

• Un onglet de prévisualisation détaillée,
• Une page d’édition des demandes,
• Une page de gestion des utilisateurs.

Dans une optique d’adaptation multi-supports, j’ai continué à travailler l’amélioration du responsive design avec React Bootstrap. Enfin, en vue d’intégrer les données dynamiques, j’ai préparé les requêtes vers l’API REST en m’appuyant sur l’outil Swagger. L'analyse des modèles dans Swagger m’a permis de comprendre la structure des endpoints, les paramètres attendus et les formats de réponse, en prévision de la connexion entre le front-end et le back-end.

Développement phase 2 : connexion à l'api

Intégration au back-end via une api

Tests et finalisation

Tests unitaires et d'intégration, correction des bugs, finalisation du css