✅ Jedes Mal, wenn Sie eine To-Do-Listen-App erstellen, ein Welpe? stirbt ?

Sie wissen, wann Sie versuchen, etwas Neues zu lernen, aber es wird Ihnen immer langweilig, die Standard-Beispiel-App zu erstellen?

Das ist die motivation1 Motivation KILLER.

Ich möchte nicht, dass meine Schüler demotiviert werden und aufgeben.

Also habe ich diese gigantische Liste von 28 lustigen App-Ideen erstellt, die Sie erstellen können, während Sie lernen, mit Ruby on Rails zu reagieren.

In dieser Liste wird davon ausgegangen, dass Sie bereits mit Ruby on Rails (oder einem anderen Webentwicklungsframework) vertraut sind. Das Backend-Bit mag für Anfänger etwas komplex sein, aber das Front-End-React-Bit sollte relativ einfach sein.

Projekt Nr. 1: Eine Kalender-App zum Vereinbaren von Terminen (wie Google Kalender)

Dies kann als einfache App beginnen, die Sie schrittweise verbessern können, indem Sie weitere Funktionen und UX-Verbesserungen hinzufügen.

Es wird Ihnen helfen, die Verwendung verschachtelter Komponenten zu üben (z. B. eine Tageskomponente, eine verschachtelte Komponente innerhalb einer Woche oder eine verschachtelte Komponente innerhalb eines Monats).

Ich verwende dies als Beispiel-App in meinem Kurs "Kostenlose vollständige Reaktion auf Schienen". Probieren Sie es aus, wenn Sie dies ausprobieren möchten.

Den vollständigen Schritt-für-Schritt-Code finden Sie hier:

Learnetto / Calreact

calreact - React and Rails 5 Kalendertermin App github.com

Projekt Nr. 2: Eine Github Explorer-App zum Auffinden interessanter Code-Repositorys

Sie können den Suchteil nur auf der Clientseite erstellen, aber Sie können ihn unterhaltsamer gestalten, indem Sie die Suchvorgänge mithilfe von Rails in einer Datenbank speichern und die beliebtesten Suchvorgänge anzeigen.

Sie üben die Verwendung einer externen API und den Umgang mit der JSON-Antwort. Sie können mit dem Vorrendern der Komponente auf dem Server experimentieren.

Sehen Sie sich dieses Browser-Plugin von Algolia an, um Ihre Ideensäfte zum Fließen zu bringen:

Algolia / Github-Awesome-Autocomplete

github-awesome-autocomplete -: octocat: Fügen Sie der GitHub-Suchleiste github.com Sofort-Suchfunktionen hinzu

Projekt Nr. 3: Eine Notiz-App

Sie können die Leistungsfähigkeit von React beim Behandeln vieler Statusänderungen erkennen, indem Sie beispielsweise das automatische Speichern aktivieren. In Simplenote finden Sie ein gutes Beispiel für eine einfache, aber leistungsstarke Notizen-App.

Wenn dies als erste App zu schwierig ist, können Sie zunächst eine externe Texteditor-Komponente verwenden, um zu erfahren, wie sie funktioniert, und dann Ihre eigene implementieren:

Facebook / Draft-Js

Draft-Js - Ein React-Framework zum Erstellen von Texteditoren. github.com

Projekt 4: Fügen Sie Ihrer Site ein Slack-Chat-Widget hinzu

Verwenden Sie die React-Slack-Chat-Komponente, um Ihrer vorhandenen Rails-Site ein Chat-Widget hinzuzufügen. Die Komponente erledigt den größten Teil des schweren Hebens, aber Sie können Spaß haben, indem Sie Ihren eigenen Bot in Rails erstellen und das Widget in React anpassen.

Der Code für die Komponente befindet sich auf Github:

5punk / react-slack-chat

React-Slack-Chat - Ein wunderschönes Web-Integrations-Widget für Gooey / Material Design Slack Chat. github.com

Projekt Nr. 5: Meme Generator

Rails können eine Bildbibliothek und vorhandene Memes speichern und bereitstellen. Verwenden Sie React zum Rendern und Behandeln des Formulars zum Erstellen des Memes.

Sie können das Mem auf dem Server mit ImageMagick oder im Browser mit Canvas generieren. Sehen Sie dieses Repo von Hung Tran:

tranhungt / meme-maker

Meme-Maker - Erstelle deine Lieblingsmemes und sende sie an deinen Freund! github.com

Projekt Nr. 6: Kostenlose Echtzeit-Bildsuch-App

Verwenden Sie die Unsplash-API für die hochwertigen kostenlosen Fotos:

unsplash / unsplash_rb

unsplash_rb - Ruby-Wrapper für die Unsplash-API. github.com

Fügen Sie mit den React Animation Add-Ons coole Animationen hinzu.

Ermöglichen Sie Benutzern, ihre Lieblingsbilder mit einem Lesezeichen zu versehen. Sie können sogar experimentieren, indem Sie das Backend nur zu einer Rails-API-App machen und eine separate React-App für das Frontend erstellen.

Projekt Nr. 7: Buchclub

Eine einfache App, in der Sie und Ihre Freunde Ihre Lieblingsbücher teilen und diskutieren können (wie Goodreads). Das Backend könnte eine einfache Rails CRUD-App sein, aber Sie könnten das Frontend zu einer einseitigen React-App machen und mit React-Router und Redux spielen.

Projekt Nr. 8: Twitter-Webclient für mehrere Konten (wie Tweetdeck)

Eine Twitter-Webclient-App, in der Sie mehr als ein Twitter-Konto (mit OAuth) verbinden und dann der Benutzeroberfläche mehrere Spalten hinzufügen können - beispielsweise für Feeds, Benachrichtigungen, Suchen und Direktnachrichten.

Nutzen Sie das Twitter-Juwel von Erik Michaels-Ober:

sferik / twitter

twitter - Eine Ruby-Schnittstelle zur Twitter-API. github.com

Dies gibt Ihnen die beispiellose Freude, mit den lächerlichen API-Ratenbeschränkungen des entwicklerfreundlichsten Unternehmens der Welt umzugehen.

Sie können das automatische Abrufen neuer Tweets und Benachrichtigungen im Tweetdeck-Stil mithilfe von Polling oder Action Cable hinzufügen.

Viele verschachtelte Komponenten und Sie können einige einfache Animationen in React ausprobieren.

Am besten beginnen Sie mit dem Aufbau von Lesefunktionen. Sobald Sie das haben, können Sie die Möglichkeit hinzufügen, zu posten, zu mögen und zu retweeten.

Projekt Nr. 9: Benutzerdefinierte OpenStreetMap-Benutzeroberfläche

Wussten Sie, dass die OpenStreetMap-Website eine Rails-App ist?

Sie können das Repo hier herunterladen, es auf Ihrem eigenen Computer einrichten und dann mit React am Frontend basteln!

openstreetmap / openstreetmap-website

openstreetmap-website - Spiegel der Rails-Anwendung für //www.openstreetmap.org (gehostet unter git: // git… github.com

Projekt Nr. 10: Team-Lunch-Roulette

Eine Website, auf der Sie entscheiden können, wo Sie mit Ihrem Team zu Mittag essen möchten. Das Rails-Backend muss nur eine einfache CRUD-App sein, mit der Teammitglieder Ortsvorschläge eingeben können. Sie können die Foursquare-API für die Suche und automatische Vervollständigung verwenden.

Und benutze React für ein paar lächerliche Animationen!

Wenn Sie nicht gerne zu Mittag essen, machen Sie Kaffee oder Cocktails oder etwas anderes Aufregenderes.

Projekt Nr. 11: Super Procrastinator

Eine einzige Website, auf der Sie arbeiten können, um Arbeit zu vermeiden - lesen Sie Reddit, Hacker News, Product Hunt, Medium, Slashdot und mehr an einem Ort.

Verwenden Sie das Rails-Backend, um Benutzerkonten und Einstellungen zu speichern und mit den verschiedenen APIs zu sprechen. Sie können Daten auch direkt von der Clientseite aus den APIs abrufen.

Möchten Sie diese Apps mit mir erstellen? Schauen Sie sich meinen kostenlosen Kurs "Vollständige Reaktion auf Schienen" an, in dem ich Ihnen beibringe, wie Sie ein Profi in der Verwendung von "Reagieren mit Schienen" sind, während Sie einige lustige Dinge erstellen.

Projekt Nr. 12: Chatroom mit Aktionskabel

Zusätzlich zum Erlernen von React wäre dies ein großartiges kleines Projekt, um Action Cable auszuprobieren, eine coole neue Rails 5-Funktion, die Rails WebSocket-Unterstützung hinzufügt. Sehen Sie sich diese Beispiele an, um loszulegen:

Schienen / Actioncable-Beispiele

Aktionskabel-Beispiele - Aktionskabel-Beispiele github.com

Projekt Nr. 13: Extra klein (ein mittlerer Klon)

Schauen Sie sich diese Reihe von Blog-Posts von Andrea Mazzini an, in denen er ausführlich beschreibt, wie er einen Medium-Klon mit einer Rails-API-App, React und Flux erstellt hat.

FancyPixel / Small-Rails

Small-Rails - Klein, ein winziger Klon von Medium. Rails API github.com FancyPixel / kleines Frontend

kleines Frontend - Klein, ein winziger Klon von Medium. Reagieren + Flux Frontend github.com

Sie können es ohne Verwendung von Flux erstellen, aber es könnte einen Versuch wert sein, wenn Sie sich der Herausforderung stellen.

Projekt Nr. 14: Face Tagger

Eine App, mit der Sie Fotos hochladen und Personen markieren können (wie bei Facebook). Verwenden Sie das OpenCV Ruby-Juwel zur automatischen Gesichtserkennung:

ruby-opencv / ruby-opencv

ruby-opencv - Versionierte Gabel des OpenCV-Edelsteins für Ruby github.com

Projekt Nr. 15: ActiveAdmin gegen Steroide

Sie haben wahrscheinlich ActiveAdmin zum Verwalten Ihrer App-Datensätze verwendet. Aber die Benutzeroberfläche ist nicht gerade inspirierend. Sie können dies ändern, indem Sie jeweils eine Ansicht in eine gut gestaltete React-Komponente umwandeln.

Sehen Sie sich hier den ActiveAdmin-Code an:

activeadmin / activeadmin

activeadmin - Das Administrationsframework für Ruby on Rails-Anwendungen. github.com

Projekt Nr. 16: Ein E-Commerce-Shop

Marmelade, Bier, englische Flaggen, Curry, alles serviert von React on Rails. Wenn Sie die Store-Funktionen in Rails nicht aufbauen möchten, verwenden Sie einfach Spree und konzentrieren Sie sich darauf, die React-Komponenten für das Front-End zu üben.

Spree / Spree

spree - Spree ist eine vollständige Open-Source-E-Commerce-Lösung für Ruby on Rails. github.com

Erraten Sie, was? Ich baue diese Online-Shop-Idee in einer Reihe von Tutorials auf. Der erste wird direkt hier im freeCodeCamp-Blog veröffentlicht! Folgen Sie mir auf Medium und melden Sie sich bei Learnetto an, um es in Ihren Posteingang zu bekommen.

Projekt Nr. 17: Mailen Sie einfach keinen Schimpansen

Eine E-Mail-Newsletter-App mit einer guten Benutzeroberfläche, die Sie nicht dazu bringt, sich die Haare auszureißen. Und kein süßer Affenquatsch?

Sie können weiterhin die Mailchimp-API oder Sendgrid verwenden. Wenn Sie Mailchimp verwendet haben, wissen Sie, dass Sie eine Vielzahl von Funktionen erstellen können - Anzeigen / Filtern / Verwalten von Abonnenten, Entwerfen von Formularen, Erstellen von Kampagnen und mehr.

Wählen Sie einfach eine Funktion aus und versuchen Sie, sie zu erstellen. Bei den meisten Funktionen handelt es sich um eine Form. Daher sollte es empfehlenswert sein, die Benutzeroberfläche in React-Komponenten zu unterteilen, die den Status und einige zustandslose Funktionskomponenten verarbeiten.

Projekt Nr. 18: Google Mail auf Schienen

Google Mail hat eine ziemlich komplexe Benutzeroberfläche, aber Sie können zunächst nur die Benutzeroberfläche zum Auflisten und Lesen von E-Mails erstellen. Oder könnte die Suche mehr Spaß machen?

Verwenden Sie das Juwel von Google-API-Client und sehen Sie sich dieses fantastische React-Tutorial und Code-Repo von Mark Brown an, um loszulegen:

markbrown4 / gmail-reagieren

gmail-react - Ein Tutorial zu React.js - Gmail github.com

Projekt Nr. 19: DJ Spotify

Eine DJ'ing-App, die auf Spotify basiert. Erhalten Sie Empfehlungen, erstellen und mischen Sie Wiedergabelisten und erlauben Sie anderen, Songs zu Ihren Wiedergabelisten hinzuzufügen.

Verwenden Sie ein Ruby-Wrapper-Juwel für die Spotify-API:

guilhermesad / rspotify

rspotify - Ein Ruby-Wrapper für die Spotify-Web-API github.com

Ich habe damit schon eine winzige kleine App erstellt und sie ist recht einfach zu bedienen. Mit Spotify kann die Musik selbst nur mit ihren eigenen Apps abgespielt werden, sodass Sie die App weiterhin ausführen müssen.

Projekt Nr. 20: Heroku-Dashboard

Als Rails-Entwickler sind Sie mit Heroku wahrscheinlich sehr vertraut. Es ist ein großartiger Service zum schnellen Bereitstellen und Hosten von Rails-Apps - perfekt, wenn Sie viele kleine Dinge zum Lernen machen

Erstellen Sie ein einfaches Dashboard, in dem Ihre Apps aufgelistet sind und in dem Sie schnell wichtige Informationen zu den einzelnen Apps anzeigen können. Sie können als zweiten Schritt Bearbeitungsfunktionen hinzufügen.

Verwenden Sie dieses Juwel, um auf die Heroku-API zuzugreifen:

Heroku / Plattform-API

platform-api - Ruby HTTP-Client für die Heroku-API github.com

Projekt Nr. 21: AWS S3-Client

Erstellen Sie eine schöne moderne Benutzeroberfläche für die Verwaltung Ihres AWS S3-Kontos. Verwenden Sie das Ruby-Juwel und erstellen Sie zunächst eine einfache Dateibrowser-Komponente. Fügen Sie dann eine Formularkomponente hinzu, um Dateien hochzuladen.

aws / aws-sdk-ruby

aws-sdk-ruby - Das offizielle AWS SDK für Ruby. github.com

Projekt Nr. 22: Stripe Analytics-Dashboard

Ein Dashboard zum Anzeigen einiger Statistiken und Diagramme basierend auf Streifendaten. Die API ist sehr gut dokumentiert und dies ist eine großartige Gelegenheit, D3 mit React zu verwenden (siehe dies und das).

Projekt Nr. 23: Google Analytics-Dashboard

Das Standard-Web-Dashboard von Google Analytics ist überladen und verwirrend. Sie könnten eine einfachere erstellen, die nur die wichtigsten Informationen anzeigt.

Eine weitere Möglichkeit, D3 zu verwenden, oder Sie könnten eine andere Bibliothek ausprobieren.

Mit diesem Juwel können Sie auf die GA-API zugreifen.

Projekt Nr. 24: Habit Tracker

Erstellen Sie eine App, mit der Sie Ihre täglichen und wöchentlichen Gewohnheiten verfolgen können - Morgenroutinen, Trainingseinheiten im Fitnessstudio, Laufen, Kochen, Meditation, Gitarrenübungen, Teezeremonien?

Inspiration finden Sie im Loop Habit Tracker oder Coach.

Machen Sie es mobilfreundlich, damit Sie es auch unterwegs verwenden können. Sobald Sie mit React vertraut sind, können Sie mit React Native sogar eine mobile App erstellen.

Projekt Nr. 25: Fitness-Dashboard

Erstellen Sie ein Dashboard für alle Ihre persönlichen Fitnessdaten, das Daten aus verschiedenen Apps abruft und einige nützliche Statistiken in einer schönen Benutzeroberfläche anzeigt.

Je nachdem, was Sie, Ihre Familie und Freunde verwenden, können Sie problemlos Daten aus einer Reihe von APIs abrufen - Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings und vieles mehr!

Sie können dem Benutzer sogar erlauben, Daten für einfache Dinge wie Gewichtsverfolgung und Übungsroutinen manuell einzugeben.

Sie können zunächst nur Berichte anzeigen und diese dann mit neuen Funktionen wie dem Hinzufügen von Notizen und dem Teilen erweitern.

Ich habe ein einfaches Dashboard für Fitbit-Daten erstellt. Siehe den Code hier:

Learnetto / Reactfit

Reactfit - Eine Fitness-Dashboard-App, die mit Rails 5.1 und React.js github.com erstellt wurde

Projekt Nr. 26: Errate meine Skizze (Spiel)

Erstellen Sie eine Zeichen-App, in der Sie mit der Maus zeichnen können, und ein Freund muss raten, was Sie gezeichnet haben. Sie können Leinwand zum Zeichnen verwenden. Auf dem React-Sketchpad von Michal Svrček finden Sie einige Ideen zum Starten:

svrcekmichal / React-Sketchpad

React-Sketchpad - Mit Canvas github.com erstellter Skizzenblock

Verwenden Sie Rails, um die Zeichnung hochzuladen, zu speichern und jemandem auf einem anderen Computer anzuzeigen.

Fügen Sie als fortgeschrittene Übung in Spaß maschinelles Lernen hinzu und lassen Sie den Computer raten?

Projekt Nr. 27: Sie schreiben gerne

Erstellen Sie eine Textklassifizierungs-App, die Ihren Schreibstil einem berühmten Autor entspricht - genau wie I Write Like (erstellt von Dmitry Chestnykh).

Verwenden Sie classifier-reborn zum Klassifizieren des Textes und React zum Behandeln des Formulars. Diese App ist meistens backendlastig, experimentieren Sie also mit einigen UI-Animationen. In diesem Repo finden Sie einige coole Ideen:

FormidableLabs / React-Animationen

React-Animationen - Eine Sammlung von Animationen für Inline-Style-Bibliotheken github.com

Projekt Nr. 28: Ideentafel

Erstellen Sie eine Idea Board-App mit einer Rails 5.1-API-App und einer separaten React-App, die mit Create React App erstellt wurde. Das Idea Board ist ein einfaches Board, das Ideen in Form von quadratischen Kacheln anzeigt. Sie können Ideen hinzufügen, vorhandene Ideen bearbeiten und Ideen löschen.

Ich habe diesen schon gebaut! Schauen Sie sich diese beiden Video-Tutorials an, die Ihnen Schritt für Schritt zeigen, wie Sie diese erstellen:

Teil 1:

Rails 5 API und React.js Tutorial - So erstellen Sie eine Idea Board App | Learnetto

Rails 5 API und React.js Tutorial - So erstellen Sie eine Idea Board App | Learnettolearnetto.com

Teil 2:

So animieren Sie eine Komponente mit React Transition Group | Learnetto

So animieren Sie eine Komponente mit React Transition Group | Learnettolearnetto.com

Diese Tutorials behandeln viele praktische Konzepte, einschließlich zustandsloser Funktionskomponenten, klassenbasierter Komponenten, Verwendung von Axios für API-Aufrufe, Unveränderlichkeitshilfe und mehr.

Das sind eine Menge interessanter Ideen für Sie, um Ihre React on Rails-Reise zu starten!

Möchten Sie diese Apps mit mir erstellen? Schauen Sie sich kostenlose Tutorials zu React, Rails und mehr auf Learnetto.com an.

Hast du noch andere Ideen? Teilen Sie sie in einer Antwort unten.

Bitte ? r empfehlen / klatschen? und teile diesen Artikel!