Concevoir, coder et optimiser des solutions numériques adaptées aux besoins utilisateurs, en maîtrisant les technologies front-end et les bonnes pratiques du développement web moderne.
Utiliser un framework JavaScript moderne (React, Vue, Angular…) pour structurer une application web côté client, en respectant les paradigmes de composants et la gestion d'état.
Produire du code lisible, documenté et maintenable, en respectant les conventions de nommage, les principes SOLID et en utilisant des outils de versionnement (Git).
La compétence Développer est au cœur de ma spécialité BUT MMI Développement Web. Au fil des semestres, j'ai progressé d'un simple étudiant qui connaissait à peine les bases du HTML/CSS à un développeur capable de concevoir des applications web complètes, connectées à des APIs tierces et organisées en composants réutilisables.
Pour illustrer cette progression, j'ai sélectionné deux projets phares de mon parcours : une première application de calcul de BPM développée en JavaScript vanilla en S2, et une application Spoti'stats utilisant l'API Spotify, développée en React au S4. L'écart entre ces deux traces témoigne d'une évolution significative de mes compétences techniques et de mon rapport à l'architecture logicielle.
Chaque trace est un artefact concret de ma pratique. Comparées côte à côte, elles matérialisent la progression réalisée sur cette compétence.
// Application BPM — JavaScript Vanilla (S2) // Calcule le BPM en détectant les frappes de l'utilisateur let taps = []; let lastTap = 0; document.getElementById('btn-tap') .addEventListener('click', function() { const now = Date.now(); if (lastTap > 0) { taps.push(now - lastTap); } lastTap = now; updateBPM(); }); function updateBPM() { if (taps.length === 0) return; const avg = taps.reduce(function(a, b) { return a + b; }, 0) / taps.length; document.getElementById('bpm-display') .innerHTML = Math.round(60000 / avg); }
// Spoti'stats — React + Spotify API (S4) // Hook personnalisé pour récupérer les stats utilisateur import { useState, useEffect, useCallback } from 'react'; import { spotifyAPI } from '../services/spotify'; export const useSpotifyStats = (timeRange) => { const [stats, setStats] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchStats = useCallback(async () => { try { setLoading(true); const [tracks, artists] = await Promise.all([ spotifyAPI.getTopTracks(timeRange), spotifyAPI.getTopArtists(timeRange), ]); setStats({ tracks, artists }); } catch (err) { setError(err.message); } finally { setLoading(false); } }, [timeRange]); useEffect(() => { fetchStats(); }, [timeRange]); return { stats, loading, error, refetch: fetchStats }; };
Un regard critique et structuré sur ma progression, organisé en quatre axes d'analyse pour mettre en lumière l'évolution de cette compétence.
Entre la Trace 1 (application BPM en JavaScript vanilla, S2) et la Trace 2 (Spoti'stats en React, S4), l'évolution est substantielle à tous les niveaux.
En S2, je manipulais le DOM directement avec getElementById,
sans aucune séparation des responsabilités. Chaque fonction touchait à l'affichage, à la logique
et aux données simultanément — une approche qui devenait rapidement ingérable à l'échelle.
En S4, j'ai intégré les hooks React (useState, useEffect, useCallback)
et les hooks personnalisés pour encapsuler la logique métier. L'application
gère l'authentification OAuth 2.0, les requêtes asynchrones parallèles et la gestion
d'erreurs de manière professionnelle.
Promise.all
useSpotifyStats dans plusieurs composants
Si je devais refaire ce projet avec le recul acquis, plusieurs alternatives amélioreraient significativement l'architecture et les performances :
useEffect manuel.
Pour continuer à progresser sur la compétence Développer, j'ai identifié une feuille de route concrète sur les 12 prochains mois :