Créer un portfolio JavaScript au Maroc : un projet concret, étape par étape

Choisir un projet adapté à son niveau

Pour un premier projet, privilégiez une application dont vous pouvez expliquer l’utilité en une phrase. Le tableau de suivi de demandes proposé ici permet d’ajouter une demande, de lui attribuer un statut, de la rechercher et de la supprimer. Il peut représenter, par exemple, le suivi de demandes de maintenance, de réservations ou de tâches internes.

Ce projet est assez simple pour être découpé en petits exercices pratiques JavaScript, mais il permet aussi de montrer plusieurs compétences : manipuler des données, réagir aux actions de l’utilisateur, mettre à jour l’affichage et traiter les erreurs de saisie. Il peut d’abord fonctionner sans serveur ni compte utilisateur, ce qui limite le périmètre.

Adaptez la difficulté à votre expérience. Si vous débutez, construisez d’abord une version avec quelques demandes écrites dans le code. Ajoutez ensuite un formulaire et des filtres. Si vous maîtrisez déjà ces bases, vous pouvez enregistrer les données dans le navigateur, ajouter un tri ou concevoir une interface responsive. N’ajoutez pas de fonctionnalités simplement pour rendre le projet plus impressionnant : chaque fonction doit servir le besoin.

• Définissez une version minimale que vous pouvez terminer et tester.
• Écartez les fonctions qui nécessitent des comptes, des paiements ou des données réelles si elles ne sont pas indispensables.
• Choisissez un sujet proche d’un métier ou d’un secteur que vous aimeriez découvrir.

Partir d’un besoin concret

Un projet de portfolio est plus convaincant lorsqu’il part d’une situation observable. Une petite équipe reçoit des demandes par plusieurs canaux et ne sait plus lesquelles sont nouvelles, en cours ou terminées. Votre application permet de regrouper ces demandes et de consulter leur état.

Ce scénario est volontairement général : il ne prétend pas représenter le fonctionnement d’une entreprise précise. Vous pouvez le personnaliser pour un commerce, une association ou un service administratif, en utilisant des exemples inventés. Si vous vous inspirez d’une expérience professionnelle, demandez-vous d’abord si vous avez le droit de réutiliser les informations et les visuels concernés.

Avant de coder, écrivez un brief d’une page. Il aide à garder le projet à une taille réaliste et donne au futur lecteur du portfolio un contexte pour comprendre vos choix.

• Objectif : permettre à une personne de consulter et de mettre à jour une liste de demandes.
• Utilisateurs visés : une personne qui suit les demandes d’une petite équipe.
• Fonctions essentielles : afficher les demandes, en ajouter une, modifier son statut, filtrer par statut et supprimer une entrée.
• Hors périmètre initial : connexion réelle, notifications, paiement, synchronisation entre plusieurs utilisateurs et intégration à un outil d’entreprise.
• Livrables : application fonctionnelle, code organisé, fichier README, captures d’écran et liste des limites connues.

Préparer les données, fichiers ou ressources

Un projet réussi commence par des données simples et cohérentes. Préparez quelques demandes fictives avec un titre, une catégorie, une date et un statut. Par exemple : « Vérifier le matériel de la salle », « Confirmer une réservation » ou « Préparer un devis ». N’utilisez ni noms, ni coordonnées, ni demandes de clients ou d’employeurs sans autorisation.

Pour une première version, vous pouvez conserver les données dans un tableau JavaScript. Une fois l’ajout et le filtrage fonctionnels, vous pouvez tester leur sauvegarde locale dans le navigateur. Expliquez clairement que cette sauvegarde est locale : elle ne remplace pas une base de données partagée et ne permet pas à plusieurs personnes de voir les mêmes modifications.

Préparez aussi les fichiers du projet : une page HTML, une feuille CSS et un fichier JavaScript. Selon votre niveau, vous pouvez séparer le code en modules. Gardez des noms de fichiers et de variables compréhensibles, et évitez d’ajouter une bibliothèque que vous ne savez pas expliquer.

• Utilisez des données entièrement fictives pour la démonstration.
• Vérifiez les droits d’utilisation des images, icônes, polices et extraits de code.
• Ne publiez pas de mots de passe, clés d’API, fichiers internes ou informations personnelles.
• Précisez dans la documentation si les données restent dans le navigateur ou sont réinitialisées au rechargement.

Réaliser le projet par étapes

Avancez par petites étapes et vérifiez le résultat après chacune. Cette méthode permet de repérer plus tôt les erreurs et de raconter clairement votre démarche dans le portfolio. Vous pouvez conserver une liste des tâches terminées et des problèmes rencontrés.

• 1. Dessiner l’écran : prévoir le formulaire, la liste, les filtres et les messages d’état.
• 2. Préparer les données : créer quelques demandes fictives et définir les statuts autorisés.
• 3. Afficher la liste : construire une fonction qui transforme les données en éléments visibles à l’écran.
• 4. Ajouter une demande : lire les champs du formulaire, vérifier leur contenu et mettre à jour les données.
• 5. Modifier le statut et supprimer : relier chaque action à la bonne demande, sans ambiguïté.
• 6. Ajouter la recherche ou le filtre : afficher uniquement les entrées qui correspondent aux critères.
• 7. Soigner l’interface : rendre les libellés explicites, afficher les erreurs près des champs et vérifier l’usage sur petit écran.
• 8. Enregistrer les données si nécessaire : expliquer la portée et les limites du stockage local.
• 9. Relire et publier : tester les parcours principaux, nettoyer les exemples et préparer une démonstration.

Tester, corriger et documenter

Une démonstration fluide ne suffit pas : testez aussi les cas ordinaires et les erreurs possibles. Faites les vérifications vous-même avec une liste reproductible et demandez, si possible, à une autre personne de suivre les consignes sans aide.

Le README doit présenter le projet comme à quelqu’un qui ne connaît pas votre code. Décrivez le besoin, les principales fonctions, la manière de lancer l’application, les technologies utilisées et les limites. Expliquez les choix importants avec des mots simples : par exemple, pourquoi vous avez utilisé des données locales ou pourquoi certaines fonctions ne font pas partie de la première version.

Pour documenter sans exposer de données confidentielles, remplacez les exemples réels par des données inventées, masquez les notifications ou noms visibles dans les captures et vérifiez que les fichiers publiés ne contiennent aucun secret. N’affirmez pas que l’application a été utilisée par une entreprise si elle est seulement une démonstration personnelle.

• Checklist de tests et de contrôle qualité :
• La page s’ouvre sans erreur visible dans la console du navigateur.
• Une demande valide apparaît après l’envoi du formulaire.
• Un champ obligatoire vide ou une saisie incorrecte déclenche un message compréhensible.
• Le statut d’une demande peut être modifié et le bon élément est mis à jour.
• La recherche et les filtres donnent des résultats cohérents, y compris lorsqu’aucun élément ne correspond.
• La suppression demande une action explicite ou propose un moyen d’éviter une suppression accidentelle.
• L’application reste lisible sur écran étroit et les contrôles sont utilisables au clavier.
• Les données affichées sont fictives, et les captures comme les fichiers publiés ne révèlent aucune information privée.
• Le README indique ce qui fonctionne, les limites et les étapes nécessaires pour essayer le projet.

Présenter son travail dans un portfolio

La présentation doit permettre de comprendre rapidement le problème, votre solution et votre contribution. Commencez par un titre descriptif et un court résumé. Ajoutez une capture de l’écran principal, puis une seconde montrant une action utile, comme le filtrage des demandes. Si vous fournissez une démonstration, vérifiez qu’elle est accessible et qu’elle ne révèle aucun compte ou contenu privé.

Décrivez le projet dans l’ordre : besoin, choix du périmètre, fonctions réalisées, difficultés rencontrées et améliorations envisagées. Indiquez clairement les technologies réellement utilisées et ce que vous avez personnellement construit. Si le projet a été réalisé en groupe, nommez les tâches que vous avez prises en charge sans vous attribuer le travail des autres.

Une limite présentée honnêtement peut montrer que vous comprenez le projet. Par exemple, vous pouvez préciser que la version de démonstration stocke les données sur un seul navigateur et ne gère pas les droits d’accès. Proposez ensuite une amélioration réaliste, sans faire passer une idée future pour une fonction déjà livrée.

• Présentez le besoin et la fonction principale avant les détails techniques.
• Ajoutez des captures légendées et des instructions pour essayer l’application.
• Fournissez un code lisible et un README à jour.
• Mentionnez les limites, les améliorations possibles et votre contribution exacte.

Le parcours, étape par étape

1. 1Définir le besoin et le périmètre — Rédigez le brief, identifiez l’utilisateur visé et fixez une version minimale. Gardez les fonctions essentielles et placez les idées secondaires dans une liste d’améliorations.
2. 2Préparer les données et l’interface — Créez des exemples fictifs, définissez les statuts et dessinez les principaux écrans avant d’écrire les interactions.
3. 3Construire les interactions JavaScript — Affichez les données, ajoutez le formulaire, validez les saisies, puis implémentez les actions de changement de statut, de suppression et de filtrage.
4. 4Tester les parcours — Suivez la checklist sur les cas normaux, les erreurs de saisie, les résultats vides, les petits écrans et l’usage au clavier. Corrigez les problèmes avant la présentation.
5. 5Documenter et présenter — Rédigez un README, préparez des captures propres, expliquez les limites et indiquez votre contribution. Contrôlez les fichiers avant toute publication.

Formations et programmes au Maroc

Compétences clés

Questions fréquentes

Sources

1. Formation JavaScript — FormaGroup formagroup.ma
2. JobInTech jobintech.academy
3. Formation intra-entreprise — OFPPT ofppt.ma