L’une des meilleures façons d’apprendre est de faire. Mais souvent, les développeurs se débattent avec la grande question « que dois-je construire ? ».

Voici 8 idées de projets, accompagnées de descriptifs de projets et d’idées de mise en page, pour vous permettre de commencer à apprendre en faisant.

• Business & Real-World : Tableau de bord des statistiques cartographiques
• Fun & Intéressant : Instrument de musique
• Personnel & Portfolio : Blog
• Productivité : Carnet de notes
• Puzzles & Jeux : Space Invaders
• Outils &Bibliothèques : Thème Framework
• Ajouts de projets : Webmentions
• Clones : Product Hunt

Ceci est un aperçu de l’ebook gratuit 50 projets pour React & le Web statique. Vous pouvez trouver l’intégralité des 50 idées de projets, dont ces 8, sur 50reactprojects.com.

Tableau de bord des statistiques cartographiques

Catégorie : Affaires &Monde réel

Créer un tableau de bord cartographique qui montre des statistiques et des informations géographiques sur COVID-19.

Brief

S’occuper d’une pandémie mondiale signifie que des virus comme le Coronavirus ont un impact différent sur le monde en fonction de l’emplacement géographique.

Avoir une carte avec une ventilation des statistiques de chaque pays est un moyen utile de pouvoir déterminer des choses comme les pays qui ont été les plus impactés.

Niveau 1

La façon la plus simple de voir les statistiques pays par pays est d’avoir une carte que vous pouvez parcourir avec les statistiques de chaque pays disponibles à côté de ce pays.
Créer une application de cartographie qui utilise l’API Coronavirus de disease.sh pour ajouter des marqueurs sur la carte pour chaque pays avec le nombre de cas de COVID-19.

Niveau 2

Bien que disposer des statistiques pour chaque pays soit utile, il pourrait être utile de pouvoir comparer ces statistiques au nombre de cas dans le monde entier.
Ajouter un tableau de bord de statistiques qui montre le nombre de cas de COVID-19 dans le monde ainsi que toute autre statistique utile provenant de l’API.

Niveau 3

Avoir des statistiques actuelles est un bon moyen de comprendre l’état actuel du monde, mais comment cela se compare-t-il historiquement ?
Utiliser l’API de données historiques pour afficher des graphiques sur le tableau de bord qui fournissent un contexte à la croissance et à la propagation du virus.

À faire

• Créer une nouvelle application cartographique
• Recevoir les données API des pays
• Ajouter des marqueurs à la carte
• Ajouter des statistiques aux marqueurs
• Recevoir les données API mondiales

.

• Créer un tableau de bord de statistiques
• Ajouter des statistiques globales
• Recevoir les données historiques de l’API
• Ajouter des graphiques à la carte

Toolbox

• Ouvrir l’API de données sur les maladies (disease.sh)
• React Leaflet (react-leaflet.js.org)
• Gatsby Leaflet Starter (github.com)

Tutoriels

• Comment créer un tableau de bord Coronavirus (COVID-19) &Application cartographique en React avec Gatsby et Leaflet (freecodecamp.org)
• Comment ajouter des statistiques de cas de Coronavirus (COVID-19) à votre tableau de bord cartographique React avec Gatsby (freecodecamp.org)
• Cartographie avec React Leaflet (egghead.io)

Inspiration

• Tableau de bord COVID-19 par le Center for Systems Science and Engineering (CSSE) de l’Université Johns Hopkins (JHU) (coronavirus.jhu.ed)
• Démo du tableau de bord du coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)

Idée de mise en page

Instrument musical

Catégorie : Fun & Intéressant

Créer un piano interactif que vous pouvez utiliser pour jouer de la musique avec votre clavier.

Brief

Pas tout le monde a le luxe de posséder un instrument de musique, mais peut-être que ces personnes ont un ordinateur portable, un téléphone ou une tablette. Avoir un piano est un moyen puissant de permettre aux gens de jouer de la musique même s’ils n’en avaient pas l’occasion auparavant.

Niveau 1

En utilisant le navigateur et les API audio web, nous pouvons créer des sons qui, lorsqu’ils sont assemblés, peuvent réellement sonner comme de la musique.
Créer un ensemble de boutons qui jouent les notes d’une gamme lorsqu’on clique dessus.

Niveau 2

Bien que tout le monde n’ait pas déjà joué d’un instrument, le concept et l’interface d’un instrument comme un piano sont généralement plus intuitifs qu’un tas de boutons.
Créer une disposition de piano en utilisant des boutons qui fonctionnent soit en cliquant sur le bouton, soit en utilisant le clavier physique.

Niveau 3

On a peut-être un espace limité dans le navigateur, mais il y a une large gamme de notes, de gammes et de sons qu’un clavier électrique pourrait être capable de faire avec quelques effets ajoutés.
Créer des bascules d’effets qui changent le son des notes lorsqu’elles sont activées.

À faire

• Créer des boutons
• Jouer un son lorsqu’on clique dessus
• Changer les notes dans une gamme
• Créer une disposition de piano

.

• Définir les événements clavier
• Créer une disposition d’effets
• Dégager les effets audio

Toolbox

• React HotKeys (github.com)

Tutoriels

• Construire un piano avec des crochets React (dev.to)
• Comment construire un clavier de piano en utilisant Vanilla JavaScript (freecodecamp.org)
• Construire un piano avec tone.js ! (dev.to)
• Comment j’ai fait un piano en seulement 1kb de JavaScript (frankforce.com)

Inspiration

• React Guitar (react-guitar.com)

Idée de mise en page

Blog

Catégorie : Personnel &Portefeuille

Créer un blog que vous pouvez utiliser pour partager vos expériences de carrière et vos projets.

Brief

Avec toute carrière, avoir un blog pour partager vos expériences est un bon moyen de faire savoir aux gens sur quoi vous travaillez et d’aider les autres à apprendre de vos expériences.

C’est aussi un moyen de renforcer ce que vous avez appris pour pouvoir vous y référer à l’avenir.

Niveau 1

Pour pouvoir partager vos expériences, vous avez besoin d’une structure de site web qui vous permettra de créer du nouveau contenu et de gérer le contenu existant.

Une façon de le faire est de créer des fichiers markdown que votre site web source pour créer de nouvelles pages et afficher les articles.
Créer un blog en utilisant des fichiers markdown comme source de contenu.

Niveau 2

Avoir votre contenu dans des fichiers markdown est une bonne façon de gérer le contenu statique, mais vous pourriez ne pas vouloir avoir à modifier le code chaque fois que vous écrivez ou modifiez un article.
Intégrez un système de gestion de contenu qui vous permet d’ajouter du nouveau contenu ou de modifier l’existant avec une interface utilisateur agréable.

Niveau 3

Si vous partagez du code sur votre blog, HTML prend en charge nativement les balises code et pre qui vous aident à formater le code de manière lisible. Mais cela n’inclut pas la coloration syntaxique qui aide à améliorer la lisibilité.
Intégrez un surligneur syntaxique qui rend les blocs de code plus lisibles.

À faire

• Créer un blog
• Ajouter un premier contenu statique
• Sourcez du contenu statique
• Intégrer. CMS
• Ajouter du code au contenu
• Ajouter une coloration syntaxique

Toolbox

• CMS Netlify (netlifycms.org)
• Prism.js (prismjs.com)

Tutoriels

• Faire un blog Gatsby avec Netlify CMS (gatsbyjs.org)
• Comment construire votre blog de codage à partir de zéro en utilisant Gatsby et MDX (freecodecamp.org)

Inspiration

• Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Idée de mise en page

Notebook

Catégorie : Productivité

Créer une application de carnet de notes pour ajouter, gérer et organiser un groupe de notes.

Brief

Prendre des notes est un excellent moyen de s’assurer que nous gardons une trace de nos pensées ou que nous nous souvenons des points importants à retenir d’une réunion. Pouvoir les gérer et les organiser facilement est important pour les retrouver plus tard !

Niveau 1

La première exigence d’un carnet de notes est de pouvoir prendre des notes. Cela peut être assez simple pour commencer, où vraiment vous avez besoin d’une sorte d’entrée qui recueille ce que vous écrivez et le stocke quelque part pour plus tard.
Créer un formulaire pour ajouter de nouvelles notes et les afficher dans une liste.

Niveau 2

Pour trouver vos notes plus tard, vous voulez un moyen d’organiser ces notes et un moyen de les rechercher. Cela comprend l’ajout de catégories ou d’un système d’étiquetage ainsi qu’une interface utilisateur pour faire des recherches à partir de.
Ajouter la possibilité d’étiqueter ou de catégoriser les notes et une entrée pour les rechercher.

Niveau 3

Que nous le réalisions ou non, nous pouvons trouver des connexions entre nos pensées et plus important encore nos notes, où nous pouvons tirer parti de ce réseau de pensées pour notre carnet de notes.
Ajouter des liens de notes inspirés de Roam Research pour créer un réseau de pensées.

À faire

• Créer un formulaire
• Stocker de nouvelles notes
• Lister les notes
• Ajouter des tags ou des catégories
• Ajouter une recherche de notes
• Ajouter un réseau de notes

Toolbox

• Thème du cerveau Gatsby (github.com)
• Fuse.js (fusejs.io)

Tutoriels

• Comment ajouter la recherche à une application React avec Fuse.js (freecodecamp.org)

Inspiration

• Foam (foambubble.github.io)
• Roam Research (roamresearch.com)
• Thème du jardin Gatsby (github.com)

Idée de mise en page

Space Invaders

Catégorie : Puzzles & Jeux

Créer un jeu de tir de vaisseaux spatiaux invaders pour abattre de multiples vagues de vaisseaux ennemis.

Brief

Space Invaders est un classique de l’arcade qui vous place dans un vaisseau spatial face à une invasion extraterrestre. Alors que vous essayez de les abattre, ils ripostent, et vous n’avez qu’une quantité limitée de protection avant d’être ouvert à être touché.

Niveau 1

La partie centrale du jeu est que vous vous déplacez dans un vaisseau spatial en essayant de frapper un tas d’aliens avec vos armes. Alors qu’il n’y a qu’un seul d’entre vous, il y en a beaucoup.
Créez un vaisseau spatial qui peut se déplacer et tirer sur des aliens qui ne se déplacent pas.

Niveau 2

Ce qui rend le jeu délicat, c’est que les aliens se déplacent constamment. Chaque fois qu’ils touchent le bord de l’aire de jeu, ils s’abaissent et accélèrent, se rapprochant de votre vaisseau.
Ajoutez du mouvement aux aliens qui vont d’un côté à l’autre de l’aire de jeu. Chaque fois que les aliens atteignent un côté, ils devraient descendre d’un niveau. Ils devraient également accélérer à certains intervalles.

Niveau 3

Vous êtes tout seul, mais heureusement vous pouvez obtenir une certaine protection. Vous avez des boucliers derrière lesquels vous pouvez vous cacher qui aident à vous protéger tant qu’ils durent.
Créer plusieurs boucliers devant le vaisseau spatial du joueur qui peuvent prendre une quantité limitée de dommages.

À faire

• Créer un nouveau jeu
• Créer des extraterrestres statiques
• Créer un vaisseau spatial de joueur
• Ajouter des contrôles de vaisseau spatial
• Ajouter une arme de vaisseau spatial
• Configurer les dommages aux extraterrestres. dommages
• Faire en sorte que les extraterrestres ripostent
• Faire en sorte que les extraterrestres se déplacent
• Ajouter des intervalles extraterrestres
• Ajouter des boucliers

Tutoriels

• Apprendre JavaScript en construisant 7 jeux (freecodecamp.org)

Inspiration

• Space Invaders (codepen.io)

Idée de mise en page

Thème d’encadrement

Catégorie : Outils & Bibliothèques

Créer un thème Gatsby qui met en place un projet avec le framework CSS Tailwind.

Brief

En tant que développeurs, nous devons couramment effectuer un tas d’étapes similaires chaque fois que nous créons un nouveau projet. Mais des outils comme les thèmes nous permettent d’abstraire ces étapes et de les empaqueter d’une manière facile à utiliser qui peut fonctionner pour n’importe quel nouveau projet.

Niveau 1

Les thèmes Gatsby sont un système de type plugin où nous pouvons profiter du pipeline Gatsby pour partager des fonctionnalités sous forme de paquet sur npm.

Cela ouvre la porte à vraiment faire tout ce que nous ferions dans un site Gatsby, mais en le rendant réutilisable à n’importe quel site Gatsby.
Créer un nouveau thème Gatsby qui, lorsqu’il est utilisé, crée une nouvelle page de guide de style sur tout projet auquel il est ajouté.

Niveau 2

Le but des thèmes n’est pas seulement de créer des pages, mais d’ajouter des fonctionnalités qui nous rendent productifs. Cela inclut des choses comme les frameworks et les configurations de projet.
Ajouter un framework CSS au thème Gatsby qui permet au projet auquel il est ajouté d’utiliser ce framework.

Niveau 3

Parfois, les thèmes sont meilleurs seulement en tant qu’outils, parfois il est utile d’avoir une opinion. Une façon d’ajouter des fonctionnalités utiles à un framework CSS est de créer des composants de stock.
Créer des composants React réutilisables en utilisant le framework CSS qui peuvent être utilisés dans le projet auquel le thème est ajouté.

À faire

• Créer un nouveau thème
• Ajouter au projet exemple
• Créer une nouvelle page de style
• Ajouter le framework CSS

.

• Utiliser le CSS dans l’exemple
• Créer des composants
• Utiliser des composants

Toolbox

• Thèmes Gatsby (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutoriels

• Construire un thème (gatsbyjs.org)
• Qu’est-ce que Tailwind CSS et comment puis-je l’ajouter à mon site Web ou à mon application React ? (freecodecamp.org)

Inspiration

• Thème Gatsby Tailwind (github.com)

Idée de mise en page

Webmentions

Catégorie : Projet Add-Ons

Ajouter l’intégration de webmentions à un site Web qui montre les interactions Twitter avec le site Web.

Brief

L’interaction sociale est un moyen impactant d’apporter plus d’audience et de conversation aux sujets sur lesquels nous écrivons.

Avoir quelque chose sur un site Web montre que l’interaction peut être utile pour à la fois inspirer les gens à vouloir s’impliquer ou laisser les gens sentir qu’ils peuvent en faire partie.

Niveau 1

Pour utiliser les Webmentions, un site Web doit être configuré avec des balises méta pour fournir des informations.
Ajouter les balises méta appropriées à un site web et valider son utilisation avec webmention.io.

Niveau 2

L’API Webmentions est un moyen de voir de manière programmatique les connexions dans les interactions sociales à partir d’une URL de votre site web. Elle vous permet d’obtenir le type d’interaction et même l’avatar du profil de la personne.
Connectez un site web à Webmentions et ajoutez une liste d’interactions sociales aux pages des articles de blog.

Niveau 3

Maintenant que le site web montre toutes les interactions, il devrait y avoir un moyen facile de rejoindre la conversation.
Ajouter un lien social qui, lorsqu’il est cliqué, crée un tweet avec un lien vers la page.

À faire

• Ajouter des balises méta au site web
• Valider les balises méta
• Connecter à Webmention

.

• Connexion sociale à Bridgy
• Liste des interactions
• Ajouter un bouton de tweet

Toolbox

• Webmention.io (webmention.io)
• Bridgy (brid.gy)
• Gatsby Plugin Webmention (github.com)

Tutoriels

• Indieweb pt2 : Utiliser les webmentions dans Eleventy (mxb.dev)
• Webmentions côté client (swyx.io)
• Démarrer avec les webmentions dans Gatsby (knutmelvaer.no)
• Construire les webmentions du plugin Gatsby (christopherbiscardi.com)

Inspiration

• Knut Melvær (knutmelvaer.no)
• Swyx (swyx.io)

Idée de mise en page

Chasse aux produits

Catégorie : Clones

Créer un clone de Product Hunt qui permet aux gens de poster un nouveau produit avec des évaluations.

Brief

Nous vivons tous pour des produits, qu’il s’agisse de nos téléphones portables ou des applications que nous utilisons sur nos ordinateurs portables.

Bien qu’il y ait des tonnes de produits dans le monde, il peut être difficile de naviguer entre les bons et les mauvais. Des outils comme Product Hunt fournissent une plateforme pour découvrir de nouveaux outils et obtenir des réactions et des critiques d’autres personnes.

Niveau 1

La partie la plus importante de l’apprentissage de nouveaux produits est le produit lui-même. Nous voulons savoir ce qu’est le produit, à quoi il ressemble et comment il fonctionne.
Créer une page qui vous permet d’ajouter un nouveau produit à un site Web avec un titre, une image et une description.

Niveau 2

Lorsque nous apprenons à connaître les produits, les critiques sont un moyen de faire confiance à un produit avant de l’acheter. Cela nous aide à avoir confiance dans ce pour quoi nous sommes sur le point de dépenser notre argent ou notre temps.
Ajouter la possibilité pour les gens d’ajouter des critiques sur chaque produit.

Niveau 3

Les gens aiment les produits, il y en a donc des tonnes dans le monde. Il y en a beaucoup trop pour essayer de les trier manuellement, donc nous avons besoin d’un mécanisme de recherche et de navigation avec.
Ajouter la possibilité de rechercher des produits et de naviguer par catégorie.

À faire

• Créer un site web de produits
• Créer une base de données
• Ajouter un formulaire de produit
• Ajouter un produit à la base de données
• Demander un produit pour une page
• Ajouter un formulaire d’évaluation
• Ajouter des évaluations à la base de données
• Ajouter des évaluations au produit
• Ajouter une recherche de produit
• Ajouter des catégories de produits

Toolbox

• Hasura (hasura.io)

Tutoriels

• Construire une application clone de Product Hunt en utilisant Hasura et Next.js (logrocket.com)
• Comment construire une version basique de Product Hunt en utilisant React (freecodecamp.org)

Idée de mise en page

Plus de projets

Si vous voulez plus d’idées de projets, consultez 50 projets pour React & le web statique !

Téléchargement gratuit sur 50reactprojects.com

.