Article original : 5 React Projects You Need In Your Portfolio
Vous avez travaillé dur et maintenant vous avez une solide compréhension de la bibliothèque React.
En plus de cela, vous maîtrisez bien JavaScript et utilisez ses fonctionnalités les plus utiles dans votre code React.
Vous avez fait beaucoup de progrès... mais maintenant, que faites-vous ?
Comment combler l'écart entre la connaissance des fondamentaux de React et devenir un développeur professionnel ?
De nombreux développeurs rencontrent ce problème lorsqu'ils atteignent ce stade intermédiaire de l'apprentissage de React ou de toute autre bibliothèque JavaScript. Ils connaissent la plupart de la bibliothèque elle-même ainsi que le JavaScript pour l'utiliser efficacement, mais ils ne savent pas quelle est la prochaine étape à franchir.
Pourquoi Vous Devriez Construire des Applications
Après avoir appris les bases de React, vous devez vous familiariser avec la construction d'applications en utilisant les compétences que vous avez acquises. Cette pratique est au cœur de l'efficacité d'un développeur React—savoir comment construire des applications par vous-même et utiliser les bons outils dans l'écosystème React pour le faire.
Mais quelles applications devriez-vous construire avec React pour améliorer vos compétences en tant que développeur ?
Dans cet article, nous allons passer en revue 5 types différents d'applications que vous devriez envisager de construire après l'application basique de liste de tâches. Le grand avantage de construire des applications est que, une fois déployées, elles peuvent être liées à votre portfolio comme un moyen puissant et immédiat de montrer aux employeurs votre expertise.
Pour chaque type d'application, je vais couvrir des exemples populaires que vous pouvez utiliser comme inspiration, les outils que je recommande pour construire chaque fonctionnalité, ainsi qu'une courte démonstration d'une telle application que j'ai personnellement réalisée en utilisant React.
Comment Commencer à Construire des Applications avec React
Contrairement à l'apprentissage de React lui-même, où vous pouvez trouver des dizaines d'articles pour approfondir n'importe quel concept lié, le processus de construction d'une application est largement une activité auto-dirigée sans beaucoup de guidance.
Si vous commencez à construire des applications par vous-même, je vous recommande de rechercher des articles qui vous enseignent les bases de la construction d'une application et de plonger dans le code source de l'application qu'ils fournissent. Même le processus de lecture de code lui-même vous rendra meilleur développeur.
Si ces exemples semblent trop intimidants à construire vous-même, rappelez-vous ce que vous savez en tant que développeur React—décomposer les applications en composants composables. Chaque application doit être construite pièce par pièce, composant par composant. Concentrez-vous sur la construction d'une fonctionnalité à la fois. Avec la pratique, vous aurez une meilleure idée des outils dont vous aurez besoin pour chaque fonctionnalité ainsi que des modèles courants derrière la construction d'applications en général.
Note : Une idée fausse que j'avais lorsque j'ai commencé à construire des applications réelles comme celles-ci était que je devais construire un backend/API complet avec Node ou Python pour obtenir la fonctionnalité dont j'avais besoin.
Vous n'avez pas besoin de le faire. Regardez les technologies serverless puissantes comme Firebase, AWS Amplify, ou Hasura qui vous donnent un backend complet prêt à l'emploi sans avoir besoin de créer et de déployer un vous-même. Investissez dans des outils qui vous rendent plus productif et vous font gagner du temps.
Construire une Application de Réseau Social
Si je devais recommander une seule application à ajouter à votre portfolio, ce serait une application de réseau social. Twitter, Facebook et Instagram sont assez sophistiqués et incluent un nombre toujours croissant de fonctionnalités pour garder les utilisateurs engagés. En plus de cela, c'est le type d'application que vous connaissez probablement le mieux en ce qui concerne son fonctionnement.
Il y a un certain nombre de fonctionnalités communes à presque toutes les applications de réseaux sociaux :
- la possibilité pour les utilisateurs de faire des publications avec du texte et/ou des fichiers multimédias,
- un fil d'actualité en direct de ces publications,
- permettre à d'autres utilisateurs d'aimer et de commenter les publications,
- ainsi que l'authentification des utilisateurs.
Et une fois que vous avez maîtrisé cela, vous pouvez ajouter des profils pour chacun de vos utilisateurs, où ils peuvent personnaliser leur compte ainsi que gérer les utilisateurs qu'ils suivent.
Exemples d'applications : Instagram, Twitter, Snapchat, Reddit
Technologies à utiliser :
- Create React App ou Next.js pour créer une UI dynamique de publications, likes et messages
- Firebase, AWS Amplify ou Hasura (en utilisant GraphQL avec des abonnements) pour les données en temps réel
- Fonctions serverless comme AWS Lambda ou Firebase Functions pour les notifications
- Cloudinary ou Firebase storage pour le téléchargement de photos ou de vidéos
Construire une Application d'E-Commerce
Choisissez quelques-uns de vos sites préférés et je garantis qu'au moins l'un d'entre eux a une application d'e-commerce intégrée, même si ce n'est qu'une petite vitrine. Les applications d'e-commerce sont omniprésentes, et je parie que vous serez appelé à en construire une à un moment donné dans votre carrière de développeur.
Il est tentant de construire une plateforme d'e-commerce impressionnante et à grande échelle comme Amazon, mais je recommande de travailler sur quelque chose de plus petit et plus ciblé.
Au lieu d'un marché qui fournit tout à tout le monde, optez pour un secteur qui vous intéresse. Par exemple, si vous aimez les articles pour la maison, vous pourriez jeter un coup d'œil à ce que Crate & Barrel ou Williams-Sonoma ont construit pour leurs sites.
En plus des produits, les applications d'e-commerce peuvent fournir un service aux consommateurs. Si c'est un service fourni localement, une carte interactive pourrait être ajoutée à l'application pour permettre au fournisseur de services et au client de connaître les positions de chacun. Les applications de livraison de nourriture comme UberEats et Doordash, qui nécessitent la localisation de la personne commandant la nourriture, viennent à l'esprit.
Quoi qu'il en soit, que ce soit physique ou virtuel, chaque application d'e-commerce comprendra une vitrine avec les détails du produit ou du service. Si les utilisateurs peuvent acheter plusieurs produits à la fois, elle doit avoir un panier où les utilisateurs peuvent gérer les produits qu'ils souhaitent acheter.
Enfin, chaque application d'e-commerce a besoin d'un processus de paiement où les utilisateurs peuvent soit acheter leurs produits anonymement, soit une fois qu'ils sont authentifiés.
Exemples populaires : Airbnb, Uber, UberEats, Doordash, Etsy, Udemy
Technologies à utiliser :
- Create React App ou Gatsby pour la vitrine et l'affichage des produits
- Stripe avec le package react-stripe-elements pour le traitement des paiements
- Fonction serverless comme Netlify / AWS Lambda pour gérer le processus de paiement
- Algolia pour une recherche de produits ultra-rapide
- Snipcart pour créer facilement un panier et gérer les produits du panier
Construire une Application de Divertissement
C'est la catégorie la plus large de toutes. Que veux-je dire par divertissement ? Une application centrée autour d'un certain type de média. Cela pourrait être des films, des podcasts ou de la musique, pour n'en nommer que quelques-uns.
Quelques excellents exemples de cela, respectivement, seraient Netflix, Audible, et Soundcloud ou Spotify. Si vous incluez l'art ou le design dans cette catégorie, nous pourrions ajouter des sites comme Behance ou Dribbble à la liste.
Ce qui est intéressant dans cette catégorie, c'est que de nombreuses applications de divertissement bordent les applications de réseaux sociaux. Par exemple, une application comme Tiktok, qui présente des vidéos courtes et imaginatives, est alimentée par une forte engagement des utilisateurs. Une autre application comme YouTube est centrée sur les interactions des utilisateurs à travers les likes, les commentaires et les abonnements.
Pensez au type de média ou de divertissement qui vous intéresse le plus et voyez si vous pouvez construire une plateforme simple autour de celui-ci, où les utilisateurs peuvent se connecter et sauvegarder le contenu qu'ils aiment. Après cela, regardez comment ajouter des éléments sociaux qui permettent d'ajouter des commentaires, des likes et de partager du contenu avec d'autres utilisateurs sur la plateforme.
Exemples populaires : YouTube, Netflix, Audible, Spotify, Tiktok
Technologies à utiliser :
- Create React App, Next.js ou Gatsby pour créer l'UI de l'application
- Package npm react-player pour lire les médias
- Cloudinary ou Firebase storage pour le téléchargement de médias
- Algolia pour rechercher des médias par nom (c'est-à-dire piste audio, vidéo, film, etc.)
Construire une Application de Messagerie
Les applications de messagerie sont énormes. Vous avez probablement un service de messagerie gratuit comme WhatsApp ou Viber sur votre téléphone, ou un intégré à votre plateforme de réseau social comme Facebook Messenger. Des services comme Intercom avec messagerie instantanée sont également disponibles en tant qu'applications web afin que les entreprises puissent fournir un support client immédiat à leurs utilisateurs.
Toute application de messagerie consistera en une conversation avec deux personnes ou plus où les messages sont envoyés en temps réel. Similaire à l'application de réseau social, je recommande un service comme Firebase ou Hasura qui transporte les données via WebSockets pour que les messages soient affichés immédiatement dans la conversation.
La majorité des applications de messagerie sont sur des appareils mobiles ou des tablettes. Si ce n'est pas votre première application clonée, c'est une excellente occasion de dépasser le web et de construire une application mobile avec React Native. Mieux encore, vous pourriez construire une application de messagerie web et mobile simultanément avec un package comme React Native Web.
Exemples populaires : WhatsApp, Viber, Discord, Messenger, Slack
Technologies à utiliser :
- React Native ou React Native Web pour construire une application mobile ou hybride (web + mobile)
- Firebase, AWS Amplify ou Hasura (en utilisant les abonnements GraphQL) pour envoyer des messages en temps réel
- Cloudinary ou Firebase storage pour envoyer des messages avec du contenu image ou vidéo
- Package npm emoji-mart pour un sélecteur d'emojis élégant comme Slack pour que les utilisateurs puissent inclure dans leurs messages
Construire une Application de Productivité
C'est probablement le type d'application le plus facile avec lequel commencer, étant donné qu'il existe tant de tutoriels sur les applications de productivité de base. Lorsque je parle d'applications de productivité, je fais référence aux applications de prise de notes, aux applications pour gérer les équipes et aux listes de tâches. En général, tout ce qui vous aide à accomplir une certaine tâche ou à être plus productif.
Ce qui est génial dans la construction d'une application de productivité en premier, c'est qu'elle fournit une bonne introduction à la construction d'applications en raison de la simplicité relative de nombreuses fonctionnalités.
Vous pouvez commencer par quelque chose de simple, comme un éditeur de texte pour écrire du texte formaté avec markdown facilement, puis l'étendre. Ensuite, ajoutez la possibilité de sauvegarder le texte sous forme de fichiers individuels sur votre ordinateur. Après cela, une fonctionnalité pour exporter ce markdown en HTML pour écrire des emails formatés.
Pour commencer à construire une application de productivité, demandez quelles fonctionnalités une application pourrait avoir pour faciliter votre emploi du temps quotidien et partez de là.
Exemples populaires : Todoist, Notion, Things, etc.
Technologies à utiliser :
- Create React App pour le web ou React Native pour le mobile
- Package npm react-markdown pour afficher le markdown dans votre UI d'application
- Package npm react-codemirror2 pour écrire du code dans vos notes
- Package npm react-draggable pour réorganiser le contenu de la liste en cliquant et en glissant
Bonne chance dans votre parcours de construction d'applications et je vous retrouverai dans le prochain article.
Devenir un Développeur React Professionnel
React est difficile. Vous ne devriez pas avoir à le comprendre par vous-même.
J'ai mis tout ce que je sais sur React dans un seul cours, pour vous aider à atteindre vos objectifs en un temps record :
Présentation : Le React Bootcamp
C'est le cours que j'aurais aimé avoir lorsque j'ai commencé à apprendre React.
Cliquez ci-dessous pour essayer le React Bootcamp par vous-même :
Cliquez pour commencer