Projets développeur d’application JavaScript React

Faites passer une librairie jQuery vers React

Ma mission principale était de refondre les pages clés de l’application en remplaçant les plugins jQuery existants par des composants React, en utilisant TypeScript pour assurer une typage statique robuste et Vite.js pour un environnement de développement rapide et moderne.

J’ai utilisé Zustand pour la gestion de l’état global de l’application, simplifiant ainsi la logique de gestion de l’état des composants React par rapport à l’ancienne approche jQuery. Le composant modale a été transformée en module NPM pour faciliter sa réutilisation. Pour cette tâche, j’ai utilisé TSDX, un outil de création de packages TypeScript optimisé, qui m’a permis de publier un module propre, maintenable et compatible avec la communauté React.

J’ai mesuré les performances de l’application avant et après la conversion, démontrant des améliorations significatives en termes de vitesse et d’efficacité. J’ai documenté le nouveau composant sous forme de module NPM, en détaillant son architecture, ses fonctionnalités, et les raisons de ses choix techniques, afin de garantir une utilisation et une maintenance efficaces.

Utilisez une API pour un compte utilisateur bancaire avec React

Dans ce projet j’ai travaillé sur le développement front-end d’une application bancaire en utilisant React et Redux. Ma mission principale consistait à intégrer le front-end avec le back-end en effectuant des appels à l’API REST, assurant ainsi une communication fluide entre le client et le serveur.

Pour définir les points d’accès de l’API et modéliser les interactions avec les données des transactions, j’ai utilisé Swagger, un outil qui facilite la documentation des routes et des actions nécessaires pour l’API.

Développez un tableau de bord d’analytics avec React

J’ai développé un tableau de bord d’analytics pour le coaching sportif en utilisant React pour l’interface utilisateur. Ma mission principale consistait à intégrer des graphiques et des diagrammes interactifs pour afficher des données d’analyse sportive de manière claire et attrayante. Pour cela, j’ai utilisé la bibliothèque graphique Recharts.

Pour récupérer les données depuis le back-end, j’ai utilisé Axios pour gérer les appels HTTP et interagir efficacement avec l’API. Le back-end de l’application était conteneurisé avec Docker, facilitant ainsi le déploiement et la gestion de l’environnement de développement.

Développez une application Web avec React et React Router

J’ai implémenté le front-end d’une application web en utilisant React et React Router. Mon travail a consisté à développer des composants React pour la logique de présentation des données, en suivant les maquettes fournies et en utilisant des données simulées à partir d’un fichier JSON.

J’ai également appris à mettre en œuvre des animations CSS et à utiliser SASS pour gérer et optimiser le CSS de l’application, améliorant ainsi l’expérience visuelle.

J’ai utilisé Create React App pour simplifier la configuration initiale et Node.js pour exécuter du code JavaScript en dehors du navigateur.

Définissez les besoins pour une app de soutien scolaire

Dans ce projet j’ai défini les besoins et la modélisation d’une solution technique pour une association de soutien scolaire en adoptant une méthodologie agile. Mon rôle consistait à créer des diagrammes de cas d’usage pour chaque fonctionnalité majeure du site afin de visualiser les interactions possibles des utilisateurs.

J’ai également développé des User Stories pour identifier les attentes des utilisateurs et définir clairement les objectifs à atteindre. Pour faciliter la communication des idées avec le client et l’équipe de développement, j’ai conçu des maquettes du site en utilisant Figma, servant de guide visuel pour le développement.

J’ai élaboré un tableau Kanban détaillé pour diviser le projet en blocs de fonctionnalités et sous-fonctionnalités, permettant de structurer le développement et de suivre efficacement l’avancement du projet.

Débuggez et testez un SaaS RH

Ma mission consistait à corriger les bugs identifiés dans l’application et à mettre en place une suite de tests pour garantir sa fiabilité. J’ai commencé par installer le back-end et le front-end depuis les dépôts spécifiques, puis j’ai utilisé le Chrome Debugger pour analyser le code et identifier les erreurs.

J’ai ensuite rédigé et implémenté des tests unitaires en JavaScript à l’aide de Jest pour vérifier le bon fonctionnement des différentes composantes de l’application. J’ai également développé des tests d’intégration pour assurer que toutes les parties de l’application interagissent correctement. En complément, j’ai élaboré un plan de test end-to-end manuel afin de simuler le parcours complet d’un utilisateur et d’assurer que toutes les fonctionnalités soient bien opérationnelles.

Développez un algorithme de recherche en JavaScript

Pour ce projet, j’ai développer un algorithme de recherche efficace pour une plateforme de recettes de cuisine. J’ai commencé par concevoir une interface utilisateur qui devait permettre aux utilisateurs de rechercher facilement des recettes à partir d’un fichier JSON.

Je devais développer deux versions d’un algorithme de recherche, capables de parcourir et de filtrer les données rapidement et efficacement. Une fois les algorithmes implémentés, j’ai analysé et comparé leurs performances à l’aide d’outils comme Jsben.ch, pour identifier celui qui offrait les meilleurs résultats.

En choisissant l’algorithme optimal, j’ai également documenté mon travail en expliquant pourquoi il était le plus adapté pour le site, tout en appliquant les principes du Green Code pour garantir que l’algorithme soit performant et respectueux de l’environnement.

Créez un site accessible pour une plateforme de photographes

Dans ce projet, l’objectif était de développer un site web pour une plateforme de photographes en mettant l’accent sur l’accessibilité et la modularité.

Mon travail a consisté à intégrer diverses fonctionnalités, telles que la récupération et l’affichage des données JSON des photographes, la navigation entre les pages, une modale de contact, une LightBox pour visualiser les médias, et un système de gestion des « likes ». L’accessibilité était une priorité, ce qui m’a permis d’apprendre à développer des applications web inclusives et faciles à utiliser pour tous les utilisateurs.

J’ai également appliqué des design patterns en JavaScript pour rendre le code modulaire et maintenable, tout en gérant efficacement les événements du site.

Dynamisez une page web avec des animations CSS

Dans ce projet, l’objectif était de dynamiser l’interface mobile-first d’un site web en utilisant des animations CSS. J’ai intégré les maquettes pour mobile et desktop en suivant le prototype Figma fourni, tout en appliquant une approche mobile-first pour garantir une adaptabilité optimale sur tous les écrans. En utilisant SASS, j’ai structuré et optimisé le CSS afin d’améliorer les performances et l’organisation du code. J’ai également implémenté des animations CSS pour rendre l’interface plus interactive et engageante, enrichissant ainsi l’expérience utilisateur.

Créez la page d’accueil d’une agence de voyage

Pour ce projet, il s’agissait de créer la page d’accueil d’une agence de voyage en utilisant HTML et CSS. L’objectif principal était d’intégrer de manière précise et responsive les maquettes fournies pour mobile, tablette et desktop, tout en assurant que la page soit pleinement fonctionnelle et esthétiquement cohérente sur tous les appareils. En écrivant mon propre code, plutôt que de m’appuyer sur les outils automatiques de Figma, j’ai approfondi ma compréhension de la structuration et du stylisme du code. Ce projet m’a permis de développer des compétences essentielles en design responsive, cruciales pour garantir une expérience utilisateur optimale sur toutes les plateformes.