Développeur web front-end

Traduire une maquette en une page HTML sémantique et un CSS organisé, fidèles au pixel près sur grand écran, en adoptant dès le départ Git et une méthode de nommage des classes.

Les organisateurs d'un festival de jazz à Saint-Louis du Sénégal ont reçu de leur graphiste une maquette Figma pour la page de la prochaine édition : programme par soirée, artistes, billetterie, informations pratiques et partenaires. Ils n'ont personne pour l'intégrer. Vous réalisez l'intégration de cette page sur grand écran, sans framework ni bibliothèque CSS. La structure HTML doit refléter le sens du contenu (titres hiérarchisés, listes, sections), et le CSS doit rester lisible : variables pour les couleurs et les espacements, convention de nommage des classes, mises en page en Flexbox et en Grid. Le travail est versionné dans un dépôt Git par petits commits explicites. En soutenance, le mentor compare votre page à la maquette et vous demande d'ajouter une section en direct pour vérifier que votre CSS se prête aux évolutions.

Adapter une interface à toutes les tailles d'écran en partant du mobile et la rendre utilisable par tous : navigation au clavier, lecteurs d'écran, contrastes, formulaires accessibles.

Une mutuelle de santé basée à Lille reçoit des plaintes : son espace adhérent est inutilisable sur téléphone et des adhérents malvoyants ne parviennent pas à déclarer un remboursement. Elle vous confie trois pages statiques de cet espace (connexion, tableau des remboursements, formulaire de déclaration). Vous commencez par un audit : tests au clavier seul, avec un lecteur d'écran, vérification des contrastes, des intitulés de champs et des messages d'erreur, rendu sur trois tailles d'écran. Vous classez chaque problème par gravité. Vous corrigez ensuite les pages en adoptant une approche mobile d'abord, sans dégrader l'affichage sur ordinateur, et en rendant le tableau lisible sur petit écran. Le livrable final met côte à côte l'état initial, les corrections et les points qui demanderaient une décision de la mutuelle.

Maîtriser les bases du langage JavaScript moderne : types, fonctions, tableaux et objets, modules, gestion des erreurs, et savoir structurer une logique métier indépendante de l'affichage.

Un atelier de menuiserie de Bafoussam reçoit chaque semaine des demandes de devis pour des étagères, des portes et des placards sur mesure. Le patron calcule tout à la main et voudrait que ses clients obtiennent une première estimation en ligne. Vous écrivez en JavaScript moderne le moteur de calcul du simulateur : choix de l'essence de bois, dimensions, finitions, options de pose, frais de déplacement selon la distance, remise au-delà d'un certain montant. Cette logique est organisée en modules et entièrement séparée de l'affichage. Une page simple permet ensuite de saisir les paramètres et d'afficher le détail du devis. Le mentor vérifiera que vos fonctions sont courtes et bien nommées, que les saisies incohérentes sont refusées avec un message clair et que l'ajout d'un nouveau type de meuble ne demande de modifier qu'un seul endroit.

Construire une interface dynamique en JavaScript natif : manipuler le DOM, gérer les événements, appeler une API REST de manière asynchrone et traiter proprement les états de chargement, de vide et d'erreur.

Lagune Naturelle, une marque de cosmétiques naturels d'Abidjan, vend aujourd'hui par messagerie. Elle veut une boutique en ligne et sera votre cliente jusqu'au sprint 7. Une API de démonstration vous est fournie avec ses produits, ses catégories et ses stocks. Pour cette première étape, sans framework, vous construisez la page catalogue : liste des produits chargée depuis l'API, filtres par catégorie et par type de peau, recherche, tri par prix, fiche produit en fenêtre modale. Les appels sont asynchrones et chaque situation est prévue : chargement en cours, aucun résultat, API indisponible, produit en rupture. L'adresse de la page reflète les filtres actifs pour pouvoir être partagée. En soutenance, le mentor coupera l'API pendant la démonstration : votre interface doit rester compréhensible pour l'utilisateur.

Adopter le framework choisi : découper une interface en composants réutilisables, faire circuler les données, gérer l'état local et les effets, et organiser un projet comme une équipe professionnelle.

Le catalogue du sprint 4 plaît, mais l'équipe de Lagune Naturelle prévoit déjà un panier, un compte client et une page de promotions. Le code natif deviendrait vite difficile à maintenir. Vous reconstruisez le catalogue dans le framework de votre stack. Vous identifiez d'abord les composants à partir de l'interface existante (carte produit, liste, barre de filtres, badge de stock, modale), puis vous les développez en les rendant réutilisables et configurables. Vous gérez l'état des filtres et de la recherche, les appels à l'API et leurs états. Vous ajoutez enfin un panier, conservé entre deux visites, avec mise à jour des quantités et du total. Un catalogue de composants (page de démonstration ou outil dédié) présente chaque composant dans ses différents états, pour que la future équipe de la marque puisse s'en servir.

Transformer l'application en un produit complet : plusieurs pages reliées par le routage, un état partagé maîtrisé, des formulaires robustes avec validation, et une authentification côté interface.

La marque veut ouvrir les ventes en ligne. Il faut un vrai parcours d'achat, utilisable sur un téléphone d'entrée de gamme et sur une connexion lente. Vous ajoutez le routage de l'application : accueil, catalogue, fiche produit avec une adresse propre, panier, commande, compte client. Vous mettez en place un état partagé pour le panier et la session, en justifiant l'outil retenu dans votre stack. Le tunnel de commande comprend les coordonnées, le choix de livraison (retrait en boutique ou livraison à domicile selon la commune) et le récapitulatif. Chaque formulaire est validé au fil de la saisie, avec des messages accessibles, et gère les erreurs renvoyées par l'API. L'espace client permet de se connecter et de consulter ses commandes ; les pages qui le composent sont protégées.

Fiabiliser et optimiser l'application : tests de composants et de parcours, mesure et amélioration des performances, rendu serveur ou statique quand il se justifie, référencement naturel, mise en production.

La date de lancement est fixée et une campagne sur les réseaux sociaux va amener d'un coup des milliers de visiteurs, souvent sur mobile. La marque veut une boutique rapide, bien référencée et qui ne casse pas à la première modification. Vous écrivez des tests de composants pour les éléments critiques (panier, filtres, formulaires) et au moins deux tests de parcours de bout en bout, dont un achat complet. Vous mesurez ensuite les performances sur un profil mobile, identifiez les causes de lenteur (images, poids des scripts, rendu) et appliquez les corrections. Selon votre stack, vous rendez les pages publiques côté serveur ou en statique, et vous soignez le référencement : titres, descriptions, données structurées des produits, plan du site. L'application est enfin mise en ligne avec un pipeline qui lance les tests à chaque modification.

Réaliser une application front-end à partir d'un besoin client réel issu d'une mission Formuloo, la livrer en conditions professionnelles et la défendre devant un jury avec l'ensemble de son portfolio.

Ce dernier sprint vous confie un besoin client réel issu d'une mission Formuloo : une interface à créer ou une application existante à faire évoluer, par exemple pour une ONG, une PME ou une plateforme de commerce en ligne. Vous recevez au début du sprint la maquette, l'API ou sa documentation et les contraintes du client, anonymisées si nécessaire. Vous menez le projet comme en entreprise : lecture critique de la maquette, découpage en tickets, développement dans le framework choisi, accessibilité, tests, optimisation et mise en ligne. Le mentor tient le rôle de référent technique et un membre de l'équipe Formuloo celui du client, avec qui vous faites un point d'avancement à mi-sprint. La soutenance finale se déroule devant un jury : démonstration de l'application, présentation de votre portfolio des huit sprints et questions sur vos choix, vos compromis et vos pistes d'amélioration.