Eine der besten Methoden, um zu lernen, ist durch eigenes Tun. Aber oft kämpfen Entwickler mit der großen Frage „Was soll ich bauen?“

Hier sind 8 Projektideen, komplett mit Projektbeschreibungen und Layout-Ideen, um Ihnen den Einstieg ins Learning by Doing zu erleichtern.

• Business & Real-World: Map Statistics Dashboard
• Spaß & Interessant: Musikinstrument
• Persönlich & Portfolio: Blog
• Produktivität: Notebook
• Puzzles & Spiele: Space Invaders
• Tools & Bibliotheken: Framework Theme
• Projekt Add-Ons: Webmentions
• Klone: Product Hunt

Dies ist eine Vorschau auf das kostenlose ebook 50 Projects for React & the Static Web. Sie finden die vollständigen 50 Projektideen einschließlich dieser 8 unter 50reactprojects.com.

Map Statistics Dashboard

Kategorie: Business & Real-World

Erstelle ein Karten-Dashboard, das Statistiken und geografische Informationen über COVID-19 zeigt.

Kurzbeschreibung

Der Umgang mit einer globalen Pandemie bedeutet, dass Viren wie das Coronavirus die Welt je nach geografischem Standort unterschiedlich beeinflussen.

Eine Karte mit einer Aufschlüsselung der Statistiken der einzelnen Länder ist eine nützliche Möglichkeit, um festzustellen, welche Länder am stärksten betroffen sind.

Stufe 1

Die einfachste Möglichkeit, Statistiken für jedes Land zu sehen, ist eine Karte, die man durchblättern kann und auf der die Statistiken für jedes Land neben dem jeweiligen Land verfügbar sind.
Erstellen Sie eine Karten-App, die die disease.sh Coronavirus-API verwendet, um der Karte für jedes Land Markierungen zusammen mit der Anzahl der COVID-19-Fälle hinzuzufügen.

Stufe 2

Während die Statistiken für jedes Land hilfreich sind, könnte es nützlich sein, diese Statistiken mit der Anzahl der Fälle in der ganzen Welt vergleichen zu können.
Erstelle ein Statistik-Dashboard, das die Anzahl der COVID-19-Fälle in der ganzen Welt sowie andere nützliche Statistiken aus der API anzeigt.

Stufe 3

Aktuelle Statistiken sind ein guter Weg, um den aktuellen Zustand der Welt zu verstehen, aber wie sieht es im historischen Vergleich aus?
Verwenden Sie die API für historische Daten, um Diagramme auf dem Dashboard anzuzeigen, die den Kontext zum Wachstum und zur Verbreitung des Virus liefern.

Zu tun

• Erstellen einer neuen Karten-App
• Abrufen von API-Länderdaten
• Hinzufügen von Markierungen zur Karte
• Hinzufügen von Statistiken zu Markierungen
• Abrufen von globalen API-Daten
• Erstellen eines Statistik-Dashboards
• Hinzufügen von globalen Statistiken
• Abrufen von historischen API-Daten
• Hinzufügen von Diagrammen zur Karte

Toolbox

• Open Disease Data API (disease.sh)
• React Leaflet (react-leaflet.js.org)
• Gatsby Leaflet Starter (github.com)

Tutorials

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (freecodecamp.org)
• Wie man mit Gatsby eine Coronavirus (COVID-19)-Fallstatistik zu seinem React Map Dashboard hinzufügt (freecodecamp.org)
• Mapping mit React Leaflet (egghead.io)

Inspiration

• COVID-19 Dashboard vom Center for Systems Science and Engineering (CSSE) der Johns Hopkins University (JHU) (coronavirus.jhu.ed)
• Coronavirus (COVID-19) Dashboard Demo (coronavirus-map-dashboard.netlify.app)

Layout-Idee

Musikinstrument

Kategorie: Spaß &Interessant

Erstelle ein interaktives Klavier, mit dem du mit deiner Tastatur Musik spielen kannst.

Kurzbeschreibung

Nicht jeder hat den Luxus, ein Musikinstrument zu besitzen, aber vielleicht haben diese Leute einen Laptop, ein Telefon oder ein Tablet. Ein Klavier ist eine gute Möglichkeit, Menschen Musik spielen zu lassen, auch wenn sie vorher keine Gelegenheit dazu hatten.

Stufe 1

Mit Hilfe des Browsers und der Web-Audio-APIs können wir Klänge erzeugen, die, wenn sie zusammengefügt werden, tatsächlich wie Musik klingen können.
Erstelle eine Reihe von Tasten, die Noten einer Tonleiter spielen, wenn sie angeklickt werden.

Stufe 2

Auch wenn nicht jeder schon einmal ein Instrument gespielt hat, ist das Konzept und die Oberfläche eines Instruments wie eines Klaviers im Allgemeinen intuitiver als eine Reihe von Tasten.
Erstelle ein Klavier-Layout mit Tasten, die entweder durch Anklicken der Taste oder mit der physischen Tastatur funktionieren.

Stufe 3

Wir haben zwar nur begrenzten Platz im Browser, aber es gibt eine große Auswahl an Noten, Tonleitern und Klängen, die ein elektrisches Keyboard mit einigen zusätzlichen Effekten erzeugen kann.
Erstelle Effekt-Kippschalter, die den Klang der Noten verändern, wenn sie eingeschaltet werden.

Zu tun

• Tasten erstellen
• Töne abspielen, wenn sie angeklickt werden
• Noten in einer Tonleiter anordnen
• Klavierlayout erstellen
• Tastaturereignisse setzen
• Effekt-Layout erstellen
• Audioeffekte umschalten

Toolbox

• React HotKeys (github.com)

Tutorials

• Ein Klavier mit React Hooks bauen (dev.to)
• How to Build a Piano Keyboard Using Vanilla JavaScript (freecodecamp.org)
• Ein Klavier mit tone.js bauen! (dev.to)
• Wie ich ein Klavier in nur 1kb JavaScript gebaut habe (frankforce.com)

Inspiration

• React Guitar (react-guitar.com)

Layout-Idee

Blog

Kategorie: Persönlich & Portfolio

Erstelle einen Blog, in dem du über deine beruflichen Erfahrungen und Projekte berichten kannst.

Kurzbeschreibung

Bei jeder Karriere ist ein Blog, in dem du deine Erfahrungen mitteilst, eine gute Möglichkeit, andere wissen zu lassen, woran du arbeitest, und anderen zu helfen, von deinen Erfahrungen zu lernen.

Es ist auch eine Möglichkeit, das Gelernte zu festigen, so dass Sie in Zukunft darauf zurückgreifen können.

Level 1

Um Ihre Erfahrungen weitergeben zu können, brauchen Sie eine Website-Struktur, die es Ihnen ermöglicht, neue Inhalte zu erstellen und bestehende Inhalte zu verwalten.

Eine Möglichkeit, dies zu tun, ist die Erstellung von Markdown-Dateien, die Ihre Website als Quelle für die Erstellung neuer Seiten und die Anzeige von Beiträgen verwendet.
Erstellen Sie einen Blog, der Markdown-Dateien als Inhaltsquelle verwendet.

Stufe 2

Die Verwaltung von Inhalten in Markdown-Dateien ist eine gute Möglichkeit, statische Inhalte zu verwalten, aber Sie möchten vielleicht nicht jedes Mal, wenn Sie einen Beitrag schreiben oder bearbeiten, Code bearbeiten müssen.
Integrieren Sie ein Content-Management-System, das es Ihnen ermöglicht, neue Inhalte hinzuzufügen oder bestehende mit einer ansprechenden Benutzeroberfläche zu bearbeiten.

Stufe 3

Wenn Sie Code in Ihrem Blog weitergeben, unterstützt HTML von Haus aus die Code- und Pre-Tags, die Ihnen helfen, den Code in einer lesbaren Form zu formatieren. Aber das beinhaltet keine Syntaxhervorhebung, die die Lesbarkeit verbessert.
Integrieren Sie eine Syntaxhervorhebung, die Codeblöcke besser lesbar macht.

Zu tun

• Einen Blog erstellen
• Ersten statischen Inhalt hinzufügen
• Statischen Inhalt einbinden
• Integrieren CMS
• Code zum Inhalt hinzufügen
• Syntaxhervorhebung hinzufügen

Toolbox

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

Tutorials

• Erstellen eines Gatsby-Blogs mit Netlify CMS (gatsbyjs.org)
• Wie man einen Blog mit Gatsby und MDX von Grund auf neu erstellt (freecodecamp.org)

Inspiration

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

Layout-Idee

Notizbuch

Kategorie: Produktivität

Erstelle eine Notizbuch-App, um eine Gruppe von Notizen hinzuzufügen, zu verwalten und zu organisieren.

Kurzbeschreibung

Notizen zu machen ist eine großartige Möglichkeit, um sicherzustellen, dass wir unsere Gedanken im Auge behalten oder uns an die wichtigsten Erkenntnisse aus einer Besprechung erinnern. Die Möglichkeit, sie zu verwalten und zu organisieren, ist wichtig, um sie später wiederzufinden!

Level 1

Die erste Anforderung an ein Notizbuch ist die Fähigkeit, Notizen zu machen. Das kann am Anfang ziemlich einfach sein, wobei man eigentlich eine Art von Eingabe braucht, die sammelt, was man schreibt, und es irgendwo für später speichert.
Erstelle ein Formular, um neue Notizen hinzuzufügen und sie in einer Liste zu sehen.

Level 2

Um deine Notizen später wiederzufinden, brauchst du eine Möglichkeit, diese Notizen zu organisieren und sie nachzuschlagen. Dazu gehört das Hinzufügen von Kategorien oder ein Tagging-System sowie eine Benutzeroberfläche für die Suche.
Fügen Sie die Möglichkeit hinzu, Notizen zu taggen oder zu kategorisieren und eine Eingabe, um sie zu durchsuchen.

Level 3

Ob wir uns dessen bewusst sind oder nicht, können wir Verbindungen zwischen unseren Gedanken und, noch wichtiger, unseren Notizen finden, wobei wir dieses Netzwerk von Gedanken für unser Notizbuch nutzen können.
Fügen Sie die von Roam Research unterstützte Verknüpfung von Notizen hinzu, um ein Netzwerk von Gedanken zu schaffen.

Zu tun

• Ein Formular erstellen
• Neue Notizen speichern
• Notizen auflisten
• Tags oder Kategorien hinzufügen
• Notizensuche hinzufügen
• Notizennetzwerk hinzufügen

Toolbox

• Gatsby Brain Theme (github.com)
• Fuse.js (fusejs.io)

Tutorials

• How to Add Search to a React App with Fuse.js (freecodecamp.org)

Inspiration

• Foam (foambubble.github.io)
• Roam Research (roamresearch.com)
• Gatsby Garden Theme (github.com)

Layout-Idee

Space Invaders

Kategorie: Puzzles & Spiele

Erstelle ein Space Invaders-Raumschiff-Shooter-Spiel, um mehrere Wellen von feindlichen Schiffen abzuschießen.

Kurzbeschreibung

Space Invaders ist ein Arcade-Klassiker, der dich in einem Raumschiff gegen eine Alien-Invasion antreten lässt. Während du versuchst, sie abzuschießen, feuern sie zurück, und du hast nur eine begrenzte Menge an Schutz, bevor du getroffen wirst.

Level 1

Der Kern des Spiels besteht darin, dass du dich in einem Raumschiff bewegst und versuchst, einen Haufen Aliens mit deinen Waffen zu treffen. Du bist zwar nur einer, aber es gibt viele von ihnen.
Erstelle ein Raumschiff, das sich bewegen kann und schieße auf Außerirdische, die sich nicht bewegen.

Level 2

Was das Spiel knifflig macht, ist, dass die Außerirdischen sich ständig bewegen. Jedes Mal, wenn sie den Rand des Spielfelds erreichen, fallen sie herunter und werden schneller, so dass sie sich deinem Schiff nähern.
Die Aliens bewegen sich von einer Seite zur anderen auf dem Spielfeld. Jedes Mal, wenn die Aliens eine Seite erreichen, sollten sie eine Ebene tiefer fallen. Sie sollten auch in bestimmten Abständen schneller werden.

Level 3

Du bist auf dich allein gestellt, aber zum Glück kannst du dich etwas schützen. Du hast Schilde, hinter denen du dich verstecken kannst und die dich schützen, solange sie halten.
Erstelle mehrere Schilde vor dem Spieler-Raumschiff, die eine begrenzte Menge an Schaden abfangen können.

Zu tun

• Ein neues Spiel erstellen
• Statische Aliens erstellen
• Ein Spieler-Raumschiff erstellen
• Raumschiffsteuerungen hinzufügen
• Raumschiffwaffen hinzufügen
• Alien-Schaden konfigurieren Schaden
• Außerirdische zurückschießen lassen
• Außerirdische bewegen lassen
• Außerirdische Intervalle hinzufügen
• Schilde hinzufügen

Tutorials

• JavaScript lernen, indem man 7 Spiele baut (freecodecamp.org)

Inspiration

• Space Invaders (codepen.io)

Layout-Idee

Framework Theme

Kategorie: Tools & Bibliotheken

Erstelle ein Gatsby-Theme, das ein Projekt mit dem Tailwind-CSS-Framework einrichtet.

Kurzbeschreibung

Als Entwickler müssen wir in der Regel jedes Mal, wenn wir ein neues Projekt erstellen, eine Reihe ähnlicher Schritte durchführen. Aber Werkzeuge wie Themes ermöglichen es uns, diese Schritte zu abstrahieren und sie in einer einfach zu bedienenden Art und Weise zu verpacken, die für jedes neue Projekt funktionieren kann.

Level 1

Gatsby Themes sind ein Plugin-ähnliches System, bei dem wir die Vorteile der Gatsby-Pipeline nutzen können, um Funktionalität als Paket auf npm zu teilen.

Das öffnet die Tür, um wirklich alles zu tun, was wir in einer Gatsby-Site tun würden, macht es aber für jede Gatsby-Site wiederverwendbar.
Erstelle ein neues Gatsby-Theme, das, wenn es verwendet wird, eine neue Styleguide-Seite in jedem Projekt erstellt, dem es hinzugefügt wird.

Level 2

Das Ziel von Themes ist es nicht nur, Seiten zu erstellen, sondern Funktionen hinzuzufügen, die uns produktiv machen. Dazu gehören Dinge wie Frameworks und Projektkonfigurationen.
Fügen Sie dem Gatsby-Theme ein CSS-Framework hinzu, damit das Projekt, dem es hinzugefügt wird, dieses Framework verwenden kann.

Stufe 3

Manchmal sind Themes nur als Werkzeuge besser, manchmal ist es hilfreich, eine eigene Meinung zu haben. Eine Möglichkeit, einem CSS-Framework nützliche Funktionen hinzuzufügen, ist die Erstellung von Bestandskomponenten.
Erstelle wiederverwendbare React-Komponenten mit dem CSS-Framework, die in dem Projekt verwendet werden können, dem das Theme hinzugefügt wird.

Zu tun

• Ein neues Thema erstellen
• Zu Beispielprojekt hinzufügen
• Eine neue Style-Seite erstellen
• CSS-Framework hinzufügen
• CSS im Beispiel verwenden
• Komponenten erstellen
• Komponenten verwenden

Toolbox

• Gatsby Themes (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutorials

• Ein Theme erstellen (gatsbyjs.org)
• Was ist Tailwind CSS und wie kann ich es meiner Website oder React App hinzufügen? (freecodecamp.org)

Inspiration

• Gatsby Tailwind Theme (github.com)

Layout-Idee

Webmentions

Kategorie: Projekt Add-Ons

Integration von Webmentions in eine Website, die Twitter-Interaktionen mit der Website anzeigt.

Kurzbeschreibung

Soziale Interaktion ist ein effektiver Weg, um mehr Publikum und Konversation zu Themen zu bringen, über die wir schreiben.

Wenn man etwas auf einer Website hat, zeigt das, dass Interaktion hilfreich sein kann, um Menschen zu inspirieren, sich zu engagieren oder ihnen das Gefühl zu geben, dass sie Teil davon sein können.

Stufe 1

Um Webmentions nutzen zu können, muss eine Website mit Meta-Tags konfiguriert werden, um Informationen bereitzustellen.
Fügen Sie die richtigen Meta-Tags zu einer Website hinzu und validieren Sie ihre Verwendung mit webmention.io.

Level 2

Die Webmentions-API ist eine Möglichkeit, programmatisch Verbindungen in sozialen Interaktionen von einer URL Ihrer Website aus zu sehen. Damit können Sie die Art der Interaktion und sogar den Profilavatar der Person abrufen.
Verbinden Sie eine Website mit Webmentions und fügen Sie eine Liste sozialer Interaktionen zu Blogpostseiten hinzu.

Stufe 3

Nun, da die Website alle Interaktionen anzeigt, sollte es eine einfache Möglichkeit geben, sich an der Konversation zu beteiligen.
Fügen Sie einen sozialen Link hinzu, der, wenn er angeklickt wird, einen Tweet mit einem Link zu der Seite erzeugt.

Zu tun

• Meta-Tags zur Website hinzufügen
• Meta-Tags validieren
• Verbinden mit Webmention
• Soziales mit Bridgy verbinden
• Interaktionen auflisten
• Tweet-Button hinzufügen

Toolbox

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

Tutorials

• Indieweb pt2: Using Webmentions in Eleventy (mxb.dev)
• Clientside Webmentions (swyx.io)
• Getting started with Webmentions in Gatsby (knutmelvaer.no)
• Building Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiration

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

Layout-Idee

Produktjagd

Kategorie: Klone

Erstelle einen Product Hunt-Klon, der es den Leuten ermöglicht, ein neues Produkt mit Bewertungen zu posten.

Kurzbeschreibung

Wir alle leben für Produkte, egal ob es unsere Mobiltelefone oder die Apps sind, die wir auf unseren Laptops benutzen.

Es gibt zwar tonnenweise Produkte auf der Welt, aber es kann schwierig sein, sich zwischen den guten und den schlechten zu entscheiden. Tools wie Product Hunt bieten eine Plattform, um neue Tools kennenzulernen und Reaktionen und Bewertungen von anderen zu erhalten.

Level 1

Der wichtigste Teil beim Kennenlernen neuer Produkte ist das Produkt selbst. Wir wollen wissen, was das Produkt ist, wie es aussieht und wie es funktioniert.
Erstelle eine Seite, auf der du ein neues Produkt mit einem Titel, einem Bild und einer Beschreibung zu einer Website hinzufügen kannst.

Stufe 2

Wenn wir uns über Produkte informieren, sind Bewertungen eine Möglichkeit, einem Produkt zu vertrauen, bevor wir es kaufen. Es hilft uns, Vertrauen in das zu gewinnen, wofür wir unser Geld oder unsere Zeit ausgeben wollen.
Füge die Möglichkeit hinzu, dass Leute Bewertungen zu jedem Produkt hinzufügen können.

Stufe 3

Die Menschen lieben Produkte, deshalb gibt es tonnenweise davon auf der Welt. Es sind viel zu viele, um sie manuell zu sortieren, also brauchen wir einen Mechanismus zum Suchen und Stöbern.
Füge die Möglichkeit hinzu, Produkte zu suchen und nach Kategorien zu stöbern.

Zu tun

• Produktwebseite erstellen
• Datenbank erstellen
• Produktformular hinzufügen
• Produkt zur Datenbank hinzufügen
• Produkt für Seite anfordern
• Hinzufügen Bewertungsformular
• Bewertungen zur Datenbank hinzufügen
• Bewertungen zum Produkt hinzufügen
• Produktsuche hinzufügen
• Produktkategorien hinzufügen

Toolbox

• Hasura (hasura.io)

Tutorials

• Eine Product Hunt-Klon-App mit Hasura und Next.js erstellen (logrocket.com)
• Wie man eine Basisversion von Product Hunt mit React erstellt (freecodecamp.org)

Layout-Idee

Mehr Projekte

Wenn Sie mehr Projektideen wollen, schauen Sie sich 50 Projekte für React & das Static Web an!

Kostenloser Download auf 50reactprojects.com