5 projets React dont vous avez besoin dans votre portefeuille

Vous avez fait le travail 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 que faites-vous maintenant?

Comment combler le fossé entre connaître les fondamentaux de React et devenir développeur professionnel?

De nombreux développeurs rencontrent ce problème lorsqu'ils atteignent cette étape intermédiaire d'apprentissage de React ou de toute autre bibliothèque JavaScript. Ils connaissent la majeure partie de la bibliothèque elle-même ainsi que le JavaScript pour l'utiliser efficacement, mais ils ne connaissent pas la prochaine étape à franchir.

Pourquoi vous devriez créer des applications

Une fois que vous avez appris les bases de React, vous devez vous familiariser avec la création d'applications avec les compétences que vous avez acquises. Cette pratique est essentielle pour être un développeur React efficace - savoir comment créer des applications par vous-même et utiliser les bons outils de l'écosystème React pour ce faire.

Mais quelles applications devriez-vous créer avec React pour améliorer vos capacités en tant que développeur?

Dans cet article, nous allons passer en revue 5 types d'applications différents que vous devriez envisager de créer après l'application todo de base. Le grand avantage de la création d'applications est que, une fois déployées, elles peuvent être liées à votre portefeuille comme un moyen puissant et immédiat de montrer aux employeurs votre expertise.

Pour chaque type d'application, je couvrirai des exemples populaires que vous pouvez utiliser comme source d'inspiration, les outils que je recommanderais pour créer chaque fonctionnalité, ainsi qu'une courte démonstration d'une telle application que j'ai personnellement créée en utilisant React.

Comment commencer à créer des applications avec React

Contrairement à l'apprentissage de React lui-même, où vous pouvez trouver des dizaines d'articles pour approfondir tout concept connexe, le processus de création d'une application est en grande partie une activité autonome sans beaucoup de conseils.

Si vous commencez à créer des applications vous-même, je vous recommande de rechercher des articles qui vous apprennent les bases de la création d'une application et de vous plonger dans le code source de l'application qu'ils fournissent. Même le processus de lecture du code lui-même fera de vous un meilleur développeur.

Si ces exemples semblent trop intimidants pour être construits 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 création d'une fonctionnalité à la fois. Avec de la pratique, vous aurez une meilleure idée de la manière dont les outils dont vous aurez besoin pour chaque fonctionnalité, ainsi que des modèles courants de création d'applications en général.

Remarque: Une idée fausse que j'ai eue lorsque j'ai commencé à créer de vraies applications comme celles-ci était que je devais créer un backend / API complet avec Node ou Python pour obtenir les fonctionnalités dont j'avais besoin. Vous n'avez pas besoin de le faire. Examinez de puissantes technologies sans serveur comme Firebase, AWS Amplify ou Hasura qui vous offrent un backend complet prêt à l'emploi sans avoir besoin d'en 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.

Créer une application de médias sociaux

Si je devais vous recommander une seule application à ajouter à votre portefeuille, ce serait une application de médias sociaux. 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 quant à son fonctionnement.

Il existe un certain nombre de fonctionnalités communes à presque toutes les applications de médias sociaux:

  • la possibilité pour les utilisateurs de publier des messages avec du texte et / ou des fichiers multimédias,
  • un flux 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 compris, 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:

  • Créez une application React ou Next.js pour créer une interface utilisateur dynamique de publications, de mentions J'aime et de messages
  • Firebase, AWS Amplify ou Hasura (en utilisant GraphQL avec des abonnements) pour des données en temps réel
  • Fonctions sans serveur comme AWS Lambda ou Firebase Functions pour les notifications
  • Stockage Cloudinary ou Firebase pour télécharger des photos ou des vidéos

Créer une application de commerce électronique

Choisissez quelques-uns de vos sites préférés et je vous garantis qu'au moins l'un d'entre eux a une application de commerce électronique intégrée, même s'il ne s'agit que d'une petite vitrine. Les applications de commerce électronique sont omniprésentes et je parie que vous serez appelé à en créer une à un moment donné de votre carrière de développeur.

Il est tentant de créer une plateforme de commerce électronique impressionnante à grande échelle comme Amazon, mais je recommanderais de travailler sur quelque chose de plus petit et plus ciblé.

Au lieu d'un marché qui offre tout à tout le monde, optez pour une industrie qui vous intéresse. Par exemple, si vous aimez les articles ménagers, vous pouvez jeter un œil à ce que Crate & Barrel ou Williams-Sonoma ont construit pour leurs sites.

Outre les produits, les applications de commerce électronique peuvent fournir un service aux consommateurs. S'il s'agit d'un service fourni localement, une carte interactive peut être ajoutée à l'application pour permettre au fournisseur de services et au client de se connaître mutuellement. Les applications de livraison de nourriture telles que UberEats et Doordash, qui nécessitent l'emplacement de la personne qui commande la nourriture, viennent à l'esprit.

Indépendamment de ce qui est vendu, physique ou virtuel, chaque application de commerce électronique comprendra une vitrine avec les détails du produit ou du service. Si les utilisateurs peuvent acheter plusieurs produits à la fois, il doit disposer d'un panier dans lequel les utilisateurs peuvent gérer les produits qu'ils souhaitent acheter.

Enfin, chaque application de commerce électronique nécessite un processus de paiement où les utilisateurs peuvent acheter leurs produits de manière anonyme ou une fois authentifiés.

Exemples populaires: Airbnb, Uber, UberEats, Doordash, Etsy, Udemy

Technologies à utiliser:

  • Créez une application React ou Gatsby pour la vitrine et l'affichage des produits
  • Stripe avec le package react-stripe-elements pour gérer le traitement des paiements
  • Fonction sans serveur 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

Créer une application de divertissement

C'est la plus large de toutes les catégories. Qu'est-ce que j'entends par divertissement? Une application centrée sur un certain type de média. Cela peut être des films, des podcasts ou de la musique pour n'en nommer que quelques-uns.

Quelques bons 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 se limitent aux applications de médias sociaux. Par exemple, une application comme Tiktok, qui propose des vidéos courtes et imaginatives, est motivée par un engagement élevé des utilisateurs. Une autre application comme YouTube est centrée sur les interactions des utilisateurs via des likes, des commentaires et des abonnements.

Pensez au type de média ou de divertissement qui vous intéresse le plus et voyez si vous pouvez créer une plate-forme simple autour de celui-ci, où les utilisateurs peuvent se connecter et enregistrer le contenu qu'ils aiment. Après cela, envisagez d'ajouter des éléments sociaux qui permettent d'ajouter des commentaires, des J'aime et de partager du contenu avec d'autres utilisateurs de la plate-forme.

Exemples populaires: YouTube, Netflix, Audible, Spotify, Tiktok

Technologies à utiliser:

  • Créez l'application React, Next.js ou Gatsby pour créer l'interface utilisateur de l'application
  • package npm react-player pour la lecture de médias
  • Stockage Cloudinary ou Firebase pour le téléchargement de médias
  • Algolia pour rechercher des médias par nom (par exemple, piste audio, vidéo, film, etc.)

Créer 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 service intégré à votre plateforme de médias sociaux comme Facebook Messenger. Des services comme Intercom avec messagerie instantanée sont également disponibles sous forme d'applications Web afin que les entreprises puissent fournir une assistance client immédiate à 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. Semblable à l'application de médias sociaux, je recommanderais un service tel que Firebase ou Hasura qui transporte des données via WebSockets pour que les messages soient affichés immédiatement dans la conversation.

La majorité des applications de messagerie se trouvent sur des appareils mobiles ou des tablettes. S'il ne s'agit pas de votre premier clonage d'application, c'est une excellente occasion d'aller au-delà du Web et de créer une application mobile avec React Native. Mieux encore, vous pouvez créer une application de messagerie Web et mobile simultanément avec un package tel que React Native Web.

Exemples populaires: WhatsApp, Viber, Discord, Messenger, Slack

Technologies à utiliser:

  • React Native ou React Native Web pour créer en tant qu'application mobile ou application hybride (web + mobile)
  • Firebase, AWS Amplify ou Hasura (à l'aide d'abonnements GraphQL) pour envoyer des messages en temps réel
  • Stockage Cloudinary ou Firebase pour l'envoi de messages avec du contenu image ou vidéo
  • npm package emoji-mart pour un sélecteur d'emoji de type Slack que les utilisateurs peuvent inclure dans leurs messages

Créer une application de productivité

C'est probablement le type d'application le plus simple avec lequel commencer, étant donné qu'il existe de nombreux didacticiels d'applications de productivité de base. Quand je parle d'applications de productivité, je fais référence aux applications de prise de notes, aux applications de gestion d'équipes et aux listes de tâches. De manière générale, tout ce qui vous aide à accomplir une certaine tâche ou à être plus productif.

Ce qui est génial dans la création d'une application de productivité, c'est d'abord qu'elle fournit une bonne introduction à la création d'applications en raison de la simplicité relative de bon nombre de ses fonctionnalités.

Vous pouvez commencer avec quelque chose de simple, comme un éditeur de texte pour écrire facilement du texte formaté avec markdown, puis le développer. Ajoutez ensuite la possibilité d'enregistrer du texte sous forme de fichiers individuels sur votre ordinateur. Après cela, une fonctionnalité pour exporter cette démarque au format HTML pour écrire des e-mails formatés.

Pour commencer à créer une application de productivité, demandez quelles fonctionnalités une application pourrait avoir pour faciliter votre emploi du temps quotidien et partir de là.

Exemples populaires: Todoist, Notion, Things, etc.

Technologies à utiliser:

  • Créer une application React pour le Web ou React Native pour mobile
  • package npm react-markdown pour afficher le démarque dans l'interface utilisateur de votre application
  • package npm react-codemirror2 pour écrire du code dans vos notes
  • npm package react-draggable pour réorganiser le contenu de la liste en cliquant et en faisant glisser

Bonne chance dans la création de votre application et je vous verrai dans le prochain article.

Vous voulez devenir un maître JS? Rejoignez le Bootcamp JS 2020

Rejoignez le Bootcamp JS 2020

Suivez + Dites bonjour! ? Twitter • codeartistry.io