Practical Programming
4 idées de projets perso pour développeur frontend débutant

4 idées de projets perso pour un développeur débutant

Inutile d’expliquer en quoi avoir des projets perso est essentiel quand on est développeur débutant. Seulement de nombreux développeurs parlent de projets perso, qu’ils ont fait ou sur lesquels ils ont contribué pendant leurs formations mais peu sont ceux qui ont quelque chose de tangible à montrer.

Sans plus attendre, voici 4 idées de projets perso à réaliser qui ne vous feront pas gagner un centime mais qui vous créeront peut être une opportunité d’emploi !

Projets perso #1: Construire un Blog statique

Même si ce projet ne semble pas être le plus fun, c’est un des projets perso les plus complet.

Le but ici n’est pas de développer un blog sur lequel vous allez vraiment publier des articles. Si tel est votre objectif, écrivez sur Medium ou créez un site WordPress vous irez plus vite à l’essentiel qui est la publication.

Dans notre cas, le but est de s’entraîner à mettre en place un site, via un générateur de site statique comme Next JS, Gatsby ou Nuxt, et de le déployer sur un hébergeur. Votre blog sera vraiment en ligne et vous aurez la possibilité de partager le frontend et l’accès à votre CMS Contentful auprès des recruteurs.

Exemple d'un blog qui peut être utilisé pour le développement d'un de vos projets perso
Exemple d’un blog dans le cadre de vos projets perso

Ce qui est intéressant dans ce projet est que vous apprendrez à manipuler une API avec contrôle d’accès, à générer un site statique via le framework que vous aurez choisi et à déployer votre application via votre terminal.

Prérequis

Pour pouvoir faire ce projet perso, il faut savoir manipuler React ou Vue et de découper son code en composants. Il faut également savoir faire un appel à une API.

Stack suggérée:

  • Gatsby ou Next.JS si vous faites du React – Nuxt si vous faites du Vue
  • TailwindCSS ou tout autre librairie pour vous aider avec le CSS
  • Contentful API pour le CMS
  • Vercel ou Netlify pour le déploiement

Features MVP

  • Afficher une liste d’articles comprenant chacun un titre, un body et un ou plusieurs tags
  • Afficher l’intégralité d’un seul article (son titre, son body et ses tags) sur une page à part entière
  • Avoir un affichage responsive sur la largeur de la page sans AUCUN autre style CSS

Remplissez le contenu de votre blog avec 10 articles. Utilisez un générateur de texte Lorem Ipsum pour générer des titres et articles.

Features V1

  • Créer une page auteur vous décrivant. Le contenu doit comporter une photo de vous ainsi que du texte. Le contenu doit être posté via contentful
  • Ajouter une image de couverture pour chaque article et affichez là dans la liste de tous les articles ainsi que pour chaque page article.
  • Mettez du style à votre blog en utilisant les composants de Tailwind (ou d’une autre librairie CSS)
  • Proposer une page par tag qui regroupe l’ensemble des articles contenant ce tag

Features additionnelles

  • Ajouter un menu Horizontal ou Vertical façon “hamburger menu” sur les petits écrans
  • Tests automatisés avec Jest

Ici le challenge n’est pas dans de la tech innovante. Le but est de prouvez que vous savez manipuler React ou Vue, créer des composants réutilisables, savoir organiser vos appels API.

Projets perso #2: Construire un site d’actualités

Qui dit site d’actualités dit récupérer de la donnée souvent et mettre à jour votre frontend. Dans ces cas là l’utilisation d’un Static Site Generator n’est, à priori, peut être pas la meilleur idée mais ce n’est pas forcément incohérent non plus.

Plusieurs solutions s’offrent à vous pour récupérer des news. Vous avez des API fournissant l’actualité, que vous pouvez régulièrement interroger et vous pouvez aller scrapper les sites d’actualités que nous connaissons pour récupérer les titres.

Un site d'actualité peut servir comme un très bon exemple de projets perso pour son portfolio
Exemple de site de news

Prérequis

Pour réaliser ce projet, pas plus de prérequis que le projet précédent. De bonnes connaissances JavaScript ainsi qu’en React ou Vue devraient vous permettre de réaliser ce projet.

Stack suggérée:

Que vous utilisiez une API ou que vous décidiez de scrapper vos données, vous aurez besoin d’un peu de code backend, ne serait-ce que pour “masquer” votre clé API.

  • Next.JS, Nuxt si vous choisissez le Server Side Rendering ou une API Express.js pour le backend avec Vue ou React pour le frontend
  • TailwindCSS ou autre pour le CSS
  • Puppeteer si vous souhaitez scrapper

Features MVP

  • Récupérer les news depuis une API
  • Afficher les titres, l’auteur et la description
  • Travailler une interface responsive en utilisant uniquement les composant Tailwind (ou autre librairie CSS)

Features V1

  • Proposer un filtre sur la source de la news
  • Classer les news par ordre décroissant

Features additionnelles

  • Scrappez un site populaire de news et ajoutez les au flux
  • Allez régulièrement récupérer les news de vos différentes sources pour récupérer les actualités fraîches
  • Les actualités fraîches s’ajoutent sans avoir à actualiser la page (regardez côté socket.io pour vous aider)

Projets perso #3: Le Dealabs des cours en ligne

Si tu ne connais pas Dealabs, tu perds de l’argent ! C’est un site communautaire qui permet de référencer les bonnes affaires. Chacun est libre de poster une bonne affaire qu’il aurait repéré et les utilisateurs vont venir voter + ou – pour chaque deal.

Ton challenge est de recréer Dealabs mais en récupérant les cours en ligne de Udemy et Coursera. Pour cet exercice, pas d’autre choix que de scrapper la donnée.

Le site Dealabs peut être recréé dans le cadre d'un projets perso
Le site dealabs référence les bonnes affaires et peut être facilement recréé dans un projet perso

Stack suggérée:

Ce projet perso peut être mené à bien avec les mêmes stacks que le précédent.

Features

  • Lister les deals avec Nom, prix, votes, auteur
  • Pouvoir ajouter des deals
  • Pouvoir voter + ou – sur chaque deal

Projets perso #4: Recréez lodash

Ce projet perso est un pur challenge d’algorithmie qui va challenger vos connaissances en JavaScript. Bien qu’il n’ait pas d’aspect frontend à mettre en avant, ce projet perso va vous permettre de progresser et de montrer à d’éventuels recruteurs votre maîtrise de JavaScript.

Pour ce projet perso, seul votre connaissance de JavaScript (ES6 et plus moderne) est nécessaire.

Libre à vous de choisir les fonctions que vous souhaitez reconstruire. Rendez-vous sur la documentation de lodash et commencez à coder.

Vous pouvez regrouper l’ensemble de vos fonctions dans un seul fichier JavaScript.

Choisi un seul projet et mène le au bout

La difficulté du projet perso n’est pas de le démarrer, mais plutot de le terminer. Dans ce cas, votre projet perso a uniquement pour vocation de prouver vos compétences auprès d’un futur employeur. Alors ne vous formalisez pas avec le design, si ça n’est pas aligné, les couleurs ne sont pas terrible, c’est que c’est bien. L’important est d’avancer dans les fonctionnalités pour proposer un projet le plus complet possible.

N’essaye pas de faire plusieurs projets en même temps. Choisissez en un et menez le au bout.

Rayed Benbrahim

Rayed Benbrahim

Développeur freelance Node.JS depuis 2017, j'ai créé le media Practical programming afin d'aider les développeurs web dans l'avancé de leur carrière de débutant à senior.

2 commentaires

  • Je trouve ces idées de projet trop complexes pour un développeur débutant.

    Dépendre d’un serveur et de frameworks pour apprendre à créer des sites web c’est à mon avis contre productif.

    Je vous propose plutôt de s’inspirer de https://quandjaipasinternet.com pour créer un CV accessible uniquement lorsque l’utilisateur est déconnecté.

    La première étape est de créer un CV au format HTML5 utilisant les balises sémantiques (header, footer, article…) et respectant au mieux les bonnes pratiques, surtout en matière d’accessibilité.

    Ne vous préoccupez pas du style à cette étape ! Ce qu’il faut obtenir c’est un squelette qui montre que vous savez organiser une page/application web de manière logique. Le contenu de votre CV doit pouvoir être lu par un lecteur d’écran (NVDA sous windows, VoiceOver sous Mac et iPhone, Talkback sous Android) avec navigation rapide par titre, description des images et des tableaux.

    Ensuite vous allez pouvoir utiliser le Javascript pour n’afficher le contenu “cv” que si l’utilisateur est hors ligne.

    Enfin vous pourrez utiliser le framework CSS de votre choix pour rendre votre CV plus agréable à l’oeil, responsive, etc…

    Utilisez par exemple une police de caractère et des icônes vectorielles (SVG) pour apporter couleurs et dynamisme, permettez à l’utilisateur de choisir parmi plusieurs styles CSS (clair / sombre), et n’oubliez pas de créer un style CSS pour l’impression de votre chef d’oeuvre 😉

    Dernier challenge : essayez de créer un bookmarklet (URL commençant par “javascript://”) qui tienne dans un QR code imprimable sur une carte de visite.

  • Étant récemment diplômé d’un dut, j’ai du faire un projet pour remplacer le stage a cause de la pandémie, durant tout le confinement, j’ai réalisé entièrement un site statique pour ma professeure d’expression communication avec Vuejs et une API, et au moins je suis rassuré que ce projet puisse m’être utile pour mon CV. Ça a été très dur mais il est achevé et la prof était très contente. Je trouve que les trois autres projets sont davantage complexes qu’un blog statique mais après, quand on a la motivation on peut. Merci pour ces conseils, je compte dès à présent créer un site pour une autre professionnelle utilisant une base de données et lui permettant de mettre a jour ses propres contenues.
    Bonne continuation.

Retrouvez nous

N'hésitez pas à nous suivre sur les différents réseaux sociaux !

Most popular

Most discussed

Share This