Front-End-Training: Klone von Discord, Jira, SoundCloud, Apple Stock, Schach, Sprachausgabe und Wechselkursen erstellen

Wir machen Sie auf Ideen / Aufgaben (keine Lösungen) für das Selbststudium und die Verbesserung Ihrer Fähigkeiten aufmerksam.



Bild



SoundCloud-Klon



SoundCloud ist eine Online-Plattform für Audioverteilung und Musikaustausch. Auf der Website können Sie Songs wie diese herunterladen und freigeben.



Bild



Was Sie beim Erstellen eines SoundCloud-Klons lernen werden:



  • Laden und Speichern von Songs in der Datenbank.
  • Alle Grundlagen der Arbeit mit einem Media Player - wie Titel abgespielt, zurückgespult, angehalten usw. werden
  • So teilen Sie Tracks mit Freunden.
  • So zeigen Sie ein Diagramm an, das die Dauer und den Fortschritt eines Songs zeigt.


Jira-Klon



Jira wird für die Fehlerverfolgung, Problemverfolgung und Projektverwaltung verwendet. Der Name "Jira" kommt eigentlich vom japanischen Wort "Gojira", was "Godzilla" bedeutet.



Bild



Was Sie lernen werden, wenn Sie einen Jira-Klon erstellen:



  • Drag & Drop-API in HTML .
  • Die Bildung von Rollen und Benutzerrechten.
  • Zuweisen und Neuzuweisen von Aufgaben zwischen verschiedenen Benutzern.
  • Markieren von Aufgaben als erledigt und Archivieren, Löschen und Bearbeiten verschiedener Aufgaben.


Apple Stocks Klon



Apple Stocks macht es einfach, Aktien und den Aktienmarkt zu verfolgen. Zeigen Sie Angebote und die tägliche Dynamik in einer anpassbaren Liste an und klicken Sie auf ein Element, um ein interaktives Diagramm und wichtige Details anzuzeigen.



Bild



Was Sie lernen werden, wenn Sie einen Klon von Apple Stocks erstellen:



  • So erhalten Sie Aktienkurse asynchron über die API.
  • So erstellen Sie Aktienkurscharts.
  • Senden von Preisbenachrichtigungen. Wenn der Aktienkurs beispielsweise um 10% steigt oder fällt, senden Sie eine Warnung.
  • Eine Liste Ihrer Lieblingsaktien, denen Sie aktiv folgen.


Verwenden Sie diese API , um Informationen zu Aktienkursen zu erhalten. Wenn Sie eine kostenlose und öffentliche API für die Börse kennen, veröffentlichen Sie diese bitte in den Kommentaren unten.



Schachklon



Schach ist ein Zwei-Spieler-Strategie-Brettspiel, das auf einem Schachbrett mit 64 Feldern in einem 8x8-Raster gespielt wird.



Bild



Was lernen Sie, wenn Sie einen Schachklon erstellen:



  • So zeigen Sie ein 8x8-Raster an.
  • Jedes Stück hat bestimmte Regeln, die vorschreiben, wie es sich auf dem Schachbrett bewegen kann. Daher ist es notwendig, eine für das Spiel wichtige Logik zu implementieren, damit das Spiel den traditionellen Schachregeln entspricht. Hier sind die Regeln für das Schachspielen .
  • Drag & Drop-API in HTML .
  • Wie man Punkte verfolgt, Gewinne, Verluste und Unentschieden verfolgt. Speichern von Ergebnissen in einer PostgreSQL-Datenbank .


Voice over Text



Eine Text-to-Speech-App für Menschen mit Sprachbehinderungen. Text-to-Speech-Lösungen machen Ihre Produkte und Dienstleistungen für verschiedene Benutzergruppen attraktiver.



Bild



Was Sie lernen werden, wenn Sie einen Klon eines Textlesers erstellen:



  • Verwendung der Web Speech API .
  • So erstellen Sie eine reaktionsschnelle Benutzeroberfläche.
  • So wechseln Sie zwischen verschiedenen Stimmen und Akzenten.


Währungsrechner



Der Währungskursrechner berechnet die Differenz zwischen zwei oder mehr Währungen und ihren Kursen.



Bild



Was Sie lernen werden, wenn Sie einen Währungsrechner-Klon erstellen:



  • So erhalten Sie Wechselkurse von der API - verwenden Sie diese API .
  • Anzeigen von Kosten und Wechselkursen für beide Währungen.
  • So aktualisieren Sie Werte in Echtzeit in Abhängigkeit von Wertänderungen einer Währung.


Discord-Klon



Discord ist ein All-in-One-Sprach- und Text-Chat für Gamer. Er ist kostenlos, sicher und funktioniert sowohl auf dem Desktop als auch auf Smartphones. Discord ist äußerst beliebt für die Kommunikation zwischen Entwicklern, Spielern und Gelegenheitsbenutzern.



Bild



Was Sie lernen werden, wenn Sie einen Discord-Klon erstellen:



  • Websocket-API . Websockets werden in Chatrooms für die Echtzeitkommunikation verwendet.
  • Die Bildung verschiedener Benutzerrollen und Berechtigungen (z. B. Administratoren, Inhaltsmoderatoren und reguläre Benutzer).
  • Aktivieren Sie die Mikrofone und starten Sie die Sprachkommunikation.
  • Erstellen mehrerer Chats und Verwenden mehrerer Websockets.


Bild


Erfahren Sie, wie Sie einen begehrten Beruf von Grund auf neu erlernen oder Ihre Fähigkeiten und Ihr Gehalt verbessern können, indem Sie bezahlte Online-Kurse von SkillFactory absolvieren:












All Articles