9 projets pour s'entrainer à coder

Cet article est libre d'accès pour tous grâce à la générosité des abonnés de Mindsers Blog qui soutiennent notre blog indépendant. Si vous appréciez le contenu que je propose, je vous invite à vous abonner dès aujourd'hui.

C'est une des questions que l'on me pose le plus souvent : quel projet coder pour améliorer ces compétences en développement web ? J'avoue que je suis toujours un peu pris au dépourvu et que je ne sais jamais trop que répondre. Alors, je réponds toujours un peu la même chose : une todo list ?

Cette fois, je me suis posé et j'y ai réfléchi. Voici mes 9 idées de projets que vous pourrez utiliser pour vous entrainer ou agrémenter votre portefolio pendant les vacances d'été.

Pour commencer : les projets niveau débutant

Le jeu du morpion

Je jouais à ce jeu à l'école primaire. Il est simple, mais possède déjà des aspects challengeant qui mettront vos nerfs à rude épreuve.

Avec ce projet, vous travaillerez des notions de développement frontend et les langages JavaScript et CSS.

🧐
Vous voulez voir le code de ce projet avant/pendant/après avoir codé votre propre version ? J'ai listé le code source de tous mes projets à la fin de l'article. Vous pouvez les utiliser comme vous le souhaitez.

Mes idées de fonctionnalités pour apprendre davantage

  • Rendre modifiable le nombre de colonnes et de lignes
  • Ajouter une IA qui peut jouer contre l'utilisateur s'il est seul
  • Rendre le pion du joueur modifiable (autre chose que "x" ou "o")
  • Garder l'historique des précédents scores
  • Donner la possibilité d'exporter l'état final du jeu en JPG

Un tableau blanc

L'idée de ce projet est de permettre à un utilisateur de dessiner sur un tableau blanc avec plusieurs pinceaux, plusieurs tailles de pinceaux, plusieurs couleurs, etc.

Un projet full frontend où vous allez apprendre à gérer la souris et ses évènements ainsi que des notions de création d'image en HTML et JS que l'on connait moins.

Mes idées de fonctionnalité pour apprendre davantage

  • Ajouter la gestion de la communication temps réel pour que des spectateurs puissent se connecter et observer le dessin de l'utilisateur. Il serait même possible de dessiner à plusieurs simultanément
  • Gérer plusieurs tableaux pour que plusieurs groupes de personne puissent simultanément dessiner
  • Ajouter des rôles à l'application pour permettre de décider qui peut dessiner ou pas
  • Ajouter la possibilité d'exporter le dessin réalisé sous forme d'image (png, jpeg) pour sauvegarder son dessin
  • Permettre la création de tableaux protégés par mot de passe

Une calculatrice

La calculatrice est un projet classique qui permet de travailler un peu plus la logique que le graphisme.

Vous pouvez réaliser le projet par étape : commencez par faire fonctionner votre calculatrice uniquement dans la console du navigateur, ensuite, vous pouvez construire l'interface web qui utilisera la logique que vous avez déjà écrite.

Mes idées de fonctionnalités pour apprendre davantage

  • Ajouter les boutons complémentaires ("AC", "%", "+/-", etc.)
  • Ajouter les fonctions scientifiques (sin, cos, etc.)
  • Gérer les calculs complexes (précédence des opérations ou des parenthèses, etc.)

Les projets niveau intermédiaire

Bien que certaines de mes suggestions étaient de niveau intermédiaire, dans cette partie, les projets sont entièrement pensés pour des développeurs de niveau intermédiaire.

Ne les sous-estimez pas et amusez-vous bien à les concevoir !

Un tchat instantané

Tout le monde voit ce qu'est un tchat permettant de communiquer de façon instantanée avec des personnes n'importe où dans le monde. C'est ce que vous devez faire.

Commencez simple : une page avec un formulaire de message et un bloc permettant de voir les messages reçus ainsi que ceux envoyés dans une conversation.

Ce projet peut être entièrement réalisé côté front, mais plus vous le perfectionnerez, plus il nécessitera du backend aussi.

🧐
Vous voulez voir le code de ce projet avant/pendant/après avoir codé votre propre version ? J'ai listé le code source de tous mes projets à la fin de l'article. Vous pouvez les utiliser comme vous le souhaitez.

Mes idées de fonctionnalités pour apprendre davantage

  • permettre de se connecter à un compte utilisateur
  • permettre d'enregistrer des paramètres de compte.
  • permettre de créer des tchats privés
  • ajouter les fonctionnalités de dessin du projet « tableau blanc » pour permettre des jeux comme le Pictionnary

Un convertisseur de devise

Le convertisseur de devise est une version améliorée du projet « calculatrice ».

Il s'agit d'être obligé d'apprendre à manipuler les API qu'elles soient RESTfull ou pas. Il n'y a pas d'opération compliquée à faire. Cependant, pour avoir des taux de conversion à jour, vous serez obligé d'utiliser une API.

Mes idées de fonctionnalités pour apprendre davantage

  • rendre le convertisseur plus interactif (conversion instantanée des valeurs lorsque vous les tapez, etc.)
  • permettre à l'utilisateur de convertir en plusieurs devises simultanément
  • si vous n'êtes pas reparti du projet « calculatrice » pour coder celui-là, implémenter la possibilité d'effectuer des calculs dans le convertisseur
  • permettre des calculs entre différentes devises
  • rendre le convertisseur capable de reconnaitre les devises à partir des sigles et symboles tapés par l'utilisateur

Un gestionnaire de quizz

Une application de quizz simple qui permet de créer des questions personnalisables depuis une interface d'administration et d'exécuter le quiz complet depuis une interface utilisateur simple.

Les réponses des utilisateurs aux questions devraient pouvoir être visible dans l'interface d'administration.

Mes idées de fonctionnalités pour apprendre davantage

  • améliorer l'interface d'administration pour gérer plusieurs quizz en même temps
  • ajouter une vue de statistique basée sur les réponses et l'utilisation des quizz
  • ajouter plus de type de question (date, nombre, question à choix multiple, question d'échelles, audio, video, etc.)
  • permettre de filtrer (poser ou ne pas poser) les questions à partir des réponses aux questions précédentes

Les projets niveau confirmé

Au niveau confirmé, vous savez coder. Vous savez mener à bien le développement d'une application simple. Et, vous êtes maintenant prêt pour des applications un peu plus complexes.

💡
N'oubliez pas, la clé pour réaliser des applications complexes est de les découper en plus petits blocs de fonctionnalités indépendants.

Une application de facturation

L'application de facturation est un classique. Presque tous les développeurs ont travaillé un moment sur ce type de logiciel dans leur carrière.

L'idée est de pouvoir rentrer des produits ou des services avec un prix unitaire, une quantité et une potentielle remise et de laisser le logiciel calculer le total HT ou avec TVA.

Pour simplifier la vie des utilisateurs, le maximum d'option devrait être automatisé (la date d'émission, la numérotation continue, application des taxes, etc).

Mes idées de fonctionnalités pour apprendre davantage

  • permettre à l'utilisateur de choisir son format d'exportation (excel, pdf, etc.)
  • ajouter une partie CRM à l'application pour pouvoir sauvegarder les informations du client et simplifier l'édition des factures
  • permettre l'ajout de différents types de facture : facture de vente, facture de débours, facture d'avoir, etc.

Un site e-commerce

Vendre sur internet est devenu tellement mainstream qu'aujourd'hui certains développeurs travaillent uniquement sur des sites e-commerce.

Le concept est simple. Vous devez coder un site avec des produits que les utilisateurs pourront ajouter à leur panier et acheter en payant directement par carte bancaire.

Bien sûr, il vous faudra une interface d'administration où vous pourrez modifier les produits et gérer les commandes passées par vos clients.

Mes idées de fonctionnalités pour apprendre davantage

  • rendre le système de paiement modulaire pour pouvoir en changer simplement
  • ajouter la gestion des catégories d'articles
  • permettre la gestion fine de l'expédition (différents coûts d'expédition en fonction de l'adresse du destinataire)
  • gérer les taxes selon le type du produit et de l'adresse de l'acheteur

Un blog personnel

Il s'agit d'un autre standard de site web bien connu. Le blog était le format de site web par défaut il y a encore quelques années tant il était à la mode.

Pour coder un blog, vous devrez séparer vos fonctionnalités en deux parties :

  • la partie publique du blog ou les lecteurs peuvent lire le contenu
  • la partie privée du blog ou les contributeurs peuvent écrire du contenu et le publier.

Mes idées de fonctionnalités pour apprendre davantage

  • gérer les commentaires sur les articles (et la modération dans l'interface administrateur)
  • permettre l'ajout d'information pour améliorer le SEO des articles (titre méta, descriptions, etc)
  • ajouter des options de partage sur les réseaux sociaux
  • permettre aux lecteurs de voter pour leurs articles préférés
  • on peut même imaginer de permettre aux lecteurs de proposer des idées d'articles qui ne seront publiées que si vous les validées

Voilà quelques idées de projets qui devraient vous tenir occupé tout l'été. Si vous essayez, n'hésitez pas à m'envoyer un message sur les réseaux sociaux. Je serais ravi de tester vos versions !

En attendant, retrouvez ci-dessous ma version de certaines de ces idées de projets :

This free post contains additional content for Full Mindsers Blog and Friend of Mindsers Blog members only

Join the 100+ developers and entrepreneur, premium members of our community and get full access to our library of private posts and additional content.

Become a member

Already a member? Log in