Derniers projets personnels
🏄♂️ The Wave
Plateforme communautaire connectant les surfeurs du monde entier. Développé en solo comme projet de fin d'études et présenté devant un jury de professionnels lors des "Demo Days" de l'école. Curieuse d'explorer un univers qui m'était totalement inconnu, j'ai choisi ce sujet suggéré par l'écolepour relever un double défi thématique et technique. Entièrememt en anglais.
Stack : Next.js, Express.js (API REST), PostgreSQL (Neon), Prisma (ORM), JWT, Bcrypt, React Leaflet (Lazy Loading), Tailwind CSS.
Fonctionnalités : Carte interactive des spots
mondiaux, favoris, responsive design, authentification sécurisée
par tokens (JWT), et tableau de bord d'administration à trois
niveaux de droits : Utilisateur, Administrateur complet, et un
profil "Démo" innovant en lecture seule pour permettre d'explorer
l'interface d'administration en toute sécurité.
Défi Relevé : Gérer une architecture découplée
(Front/Back séparés) et optimiser la performance. Le temps de
chargement initial de la page d'accueil avec la carte était mon
principal point de blocage. En utilisant les DevTools de Chrome et
Lighthouse, j'ai analysé les métriques clés comme le CLS
(Cumulative Layout Shift). Grâce à la mise en place du lazy
loading sur les composants de la carte et à l'optimisation des
requêtes, j'ai optimisé le score de performance Lighthouse.
🎬 Fondu au noir
Fondu au noir est une Progressive Web App (PWA) de quiz interactif
et culturel combinant une frise chronologique et des flashcards
animées, pour explorer l'histoire du cinéma noir. Mon premier
projet en autonomie post-formation pour maîtriser React Vanilla.
Très cinéphile, j'ai conçu ce projet pour le plaisir de
retranscrire l'ambiance sombre et l'esthétique si particulière de
cette époque cinématographique, tout en me plongeant à fond dans
l'apprentissage de React.
Stack & Données : React (Vite), TypeScript, JSON Local (structure de données statique), Framer Motion, Canvas-Confetti, Vanilla CSS, LocalStorage.
Fonctionnalités : Cartes de films interactives
avec modale "En savoir +", frise temporelle historique, historique
des scores persistant et système de recommandation dynamique selon
le pourcentage de réussite.
Défi Relevé : Maîtriser l'asynchronisme et le
cycle de vie de React. J'ai volontairement banni Next.js pour
consolider les fondamentaux de React en utilisant une large
palette de hooks natifs (useState,
useEffect) et avancés (useMemo et
useCallback pour l'optimisation,
useRef pour l'accessibilité de la modale), ainsi
qu'un hook personnalisé useScore connecté à l'API
Context pour centraliser l'état global. Mes plus grands défis ont
été la conception CSS fluide de la timeline interactive, le
traitement et l'export optimisé des affiches de films depuis
Canva, et l'initiation à la configuration d'un Service Worker pour
transformer l'application en PWA installable.
💚 Waste4Good
WASTE4GOOD est une association de bénévoles qui sensibilise aux ramassages des déchets sauvages (mégots de cigarette, plastiques d’emballages, etc). Les déchets ramassés sont valorisés en points qui font l'objet de dons à des associations.
Refactorisation d'un projet école existant : ajout de fonctionnalités, authentification, gamification, et amélioration globale de l'UX/UI.
Stack : Next.js, Express.js (déployé en Serverless sur Vercel), PostgreSQL (Neon), React Leaflet, Tailwind CSS, Bcrypt.
Fonctionnalités : Double interface (bénévoles et
administrateurs), cartographie des collectes, dashboard de
statistiques, leaderboard des bénévoles et système de gamification
permettant de convertir le poids des déchets collectés en points,
puis en dons financiers reversés à des associations.
Défi Relevé : Concevoir un système de
gamification cohérent (calcul et conversion dynamique des points).
🚧 Projet en cours.
Projets école
💟 PassAges
Application de rencontres intergénérationnelles pour lutter contre l'isolement des aînés. Il s'agit d'une refonte complète et modernisée d'Adaence sous forme d'application web dynamique et sécurisée. Filtres avancés, authentification sécurisée et dashboard admin fonctionnel.
Stack : Next.js (Full-Stack Monorepo), React, TypeScript, PostgreSQL (Neon), Prisma (ORM), NextAuth, Bcrypt, Tailwind CSS, bibliothèque Lucide-react. Méthodologie : projet réalisé en binôme en méthode Agile.
Fonctionnalités : Filtres de recherche avancés
(activités/villes), formulaires interactifs de candidature,
authentification sécurisée et tableau de bord administrateur (CRUD
complet pour la validation, le refus ou la création des profils
bénévoles).
Défi Relevé : Premier projet d'envergure
full-stack. Au-delà de la découverte de l'ORM Prisma et de
Next.js, le plus grand défi a été notre initiation à TypeScript.
Lors du premier déploiement sur Vercel, l'absence de typage
rigoureux a généré des dizaines d'erreurs de compilation complexes
dans les logs. Nous avons dû analyser chaque message d'erreur,
comprendre la logique du compilateur et corriger méthodiquement
notre typage pour réussir à mettre l'application en production.
🎨 À vos musées !
Moteur de recherche et d'exploration des musées nationaux français. Regroupe les données des API de data.ouv.org "Musées de France" et "Architecture Remarquable", en partenariat avec l'association Latitudes. Visualisation de données (Dataviz) avec graphiques et cartographie interactive.
Stack & Outils : JavaScript (ES6), HTML5/CSS3, API Open Data (Muséofile & ACR), Leaflet.js, Vercel, Jira.
Méthodologie : Projet pédagogique engagé, développé en équipe de 4 personnes, Jira et réunions "daily".
Fonctionnalités : Recherche multi-critères
(régions, thématiques), carte interactive, graphiques de
visualisation de données (Dataviz) et suggestion automatique de 3
édifices labellisés "Architecture Contemporaine Remarquable" à
proximité du musée sélectionné.
Défi Relevé : Notre premier projet de
manipulation d'API externes. Le principal défi a été de s'adapter
à la diversité de l'Open Data : nous avons dû apprendre à extraire
des données provenant de deux plateformes distinctes, dont les
méthodes de requêtage, les formats et les structures de données
différaient totalement d'un site à l'autre. Il a ensuite fallu
nettoyer et croiser ces flux pour calculer la proximité
géographique des édifices, tout en gérant l'affichage
cartographique dynamique sur Leaflet.js.
👵🏻 Adaence
Plateforme sociale favorisant la mise en relation entre seniors et
bénévoles afin de briser l'isolement via le partage d'activités et
de moments conviviaux.
V1 historique du projet (brique
initiale de PassAges).
Stack & Outils : HTML5 sémantique, CSS3 (Flexbox/Grid), JavaScript (ES6), PostgreSQL (Neon), DrawSQL, Lucide Icons.
Fonctionnalités : Filtrage dynamique des profils
(via URLSearchParams), pagination des résultats, formulaire
interactif de bénévolat avec gestion d'erreurs et manipulation
dynamique du DOM.
Défi Relevé : Mon tout premier projet
d'intégration complet et ma première initiation aux bases de
données. Au-delà de la mise en page responsive avec CSS Grid, j'ai
conçu de zéro mon premier schéma relationnel SQL en le modélisant
visuellement sur DrawSQL (conception des tables, clés primaires et
clés étrangères). J'ai ensuite écrit les scripts de création et
d'insertion pour relier l'application à une base PostgreSQL
hébergée sur Neon.
🚀 Quiz de l'Espace
Quiz interactif axé sur la découverte de l'espace. Intègre des questions à choix multiples avec un calcul dynamique des scores en fin de parcours.
Stack & Outils : HTML5, CSS3, JavaScript (ES6), Canvas-Confetti (CDN), Canva, Trello.
Manipulation poussée du DOM et gestion fine des événements natifs.
Fonctionnalités : Questions à choix multiples,
barre de progression interactive matérialisée par une fusée
animée, gestion d'un score dynamique, compte à rebours de 10
secondes par question avec passage automatique à la suivante, et
explosion de confettis (Canvas-Confetti) en cas de sans-faute.
Défi Relevé : Notre premier projet de groupe Chez
Ada Tech School. Les grands défis techniques ont été la
manipulation intensive et dynamique du DOM en JS pur pour lier
l'avancée des questions à l'animation de la fusée, la gestion de
l'asynchrone avec un timer pour le temps de réponse.
Méthodologie :
nous avons travaillé en mob programming (codage en groupe
sur un écran commun) et structuré nos tâches quotidiennement via
Trello pour suivre l'avancement du projet.
Autres projets
🖼️ Galerie Art'Square
Création et mise en production autonome d'une boutique e-commerce
et galerie d'art en ligne.
Vente d'oeuvres, promotions, expositions, biographies des
artistes, blog éditorial, compte utilisateur, panier.
Stack : WordPress, Elementor, WooCommerce, CSS.
Fonctionnalités : Gestion du catalogue
WooCommerce, espace client sécurisé, système de blog, filtres
produits.
Défi Relevé : Ma première
mise en ligne d'un site. J'ai géré l'achat du nom de domaine, la
configuration de l'hébergement mutualisé (Nuxit), la sécurisation
HTTPS (certificat SSL), la création de la base de données SQL et
la migration du site local vers la production.
📣 Petites Annonces
Site web de petites annonces en ligne (type LeBonCoin). Reprise et refactorisation d'un ancien projet en PHP Procédural. Déploiement sur serveur mutualisé Nuxit avec base de données MySQL. CI/CD : GitHub Actions pour le déploiement automatique.
Stack & Outils : PHP 8 (POO), Architecture MVC, MySQL, CSS Bootstrap, GitHub Actions.
Fonctionnalités : Gestion complète du CRUD
(annonces, catégories, commentaires, utilisateurs), espace client
sécurisé, espace d'administration et modération des commentaires.
Défi Relevé : Refactorisation complète d'un
projet d'école Ifocop initialement conçu en PHP Procédural. J'ai
migré tout le code vers une architecture MVC propre et orientée
objet (POO) pour le sécuriser (requêtes SQL préparées) et le
rendre évolutif.
Le plus grand défi a ensuite été de gérer
l'intégralité de la mise en production sur un hébergement
mutualisé Nuxit : j'ai configuré un sous-domaine dédié, créé et
lié la base de données MySQL distante, puis mis en place un
pipeline CI/CD automatisé avec GitHub Actions pour s'affranchir
des déploiements manuels par FTP.