„Ein Meister macht mehr Fehler als ein Anfänger – durch Versuche.“
Wir bieten 8 Projektideen an, die Sie „zum Spaß“ umsetzen können, um echte Entwicklungserfahrung zu sammeln.
Projekt 1. Klon von Trello
Was Sie lernen werden:
- Organisation von Anfrageverarbeitungsrouten (Routing).
- Drag and Drop.
- Wie man neue Objekte erstellt (Boards, Listen, Karten).
- Verarbeitung und Validierung von Eingabewerten.
- Clientseitig: Wie man den lokalen Speicher nutzt, Daten im lokalen Speicher speichert und Daten aus dem lokalen Speicher liest.
- Serverseitig: Wie man Datenbanken nutzt, Daten in der Datenbank speichert und Daten aus der Datenbank liest.
, erstellt mit React+Redux.
Projekt 2. Admin-Panel
Eine einfache CRUD-Anwendung, die ideal ist, um die Grundlagen zu lernen. Wir werden lernen:
- Benutzer zu erstellen und zu verwalten.
- Mit der Datenbank zu interagieren – Benutzer erstellen, lesen, bearbeiten und löschen.
- Eingabevalidierung und Arbeiten mit Formularen.
Projekt 3. Kryptowährungs-Tracker (native mobile Anwendung)
In beliebiger Technologie: Swift, Objective-C, React Native, Java, Kotlin.
Wir werden lernen:
- Wie native Anwendungen funktionieren.
- Wie man Daten aus einer API extrahiert.
- Wie native Seitenlayouts funktionieren.
- Wie man mit mobilen Simulatoren arbeitet.
. Wenn Sie etwas Besseres finden, schreiben Sie es in die Kommentare.
Wenn Sie interessiert sind, hier ist .
Projekt 4. Eigenes webpack-Konfigurationsfile von Grund auf erstellen
Technisch gesehen ist das keine App, aber eine sehr nützliche Übung, um zu verstehen, wie webpack im Inneren funktioniert. Es wird kein „schwarzes Kästchen“ mehr sein, sondern ein verständliches Werkzeug.
Anforderungen:
- ES7 in ES5 kompilieren (Grundlagen).
- JSX in JS — oder - .vue in .js kompilieren (Sie müssen die Loader lernen).
- Webpack Dev Server und Hot Module Reloading einrichten. (vue-cli und create-react-app verwenden beide).
- Heroku, now.sh oder Github verwenden, um zu lernen, wie man webpack-Projekte bereitstellt.
- Ihren bevorzugten Präprozessor einrichten, um CSS — SCSS, Less, Stylus zu kompilieren.
- Lernen, wie man Bilder und SVGs mit webpack verwendet.
Projekt 5. Klon von Hackernews.
Jeder Jedi sollte sein eigenes Hackernews machen.
Was Sie auf dem Weg lernen werden:
- Wie man mit dem Hackernews API interagiert.
- Wie man eine Single Page Application erstellt.
- Wie man Funktionen wie das Anzeigen von Kommentaren, einzelnen Kommentaren und Profilen implementiert.
- Organisation von Anfrageverarbeitungsrouten (Routing).
Projekt 6. To-Do-List.
Echt? Eine To-Do-App? Davon gibt es Tausende. Aber glauben Sie mir, es gibt einen Grund für diese Popularität.
Eine To-Do-App ist eine großartige Möglichkeit, sicherzustellen, dass Sie die Grundlagen verstehen. Versuchen Sie, eine Anwendung in reinem JavaScript und eine in Ihrem bevorzugten Framework zu schreiben.
Lernen Sie:
- Neue Aufgaben zu erstellen.
- Die Eingabefelder zu überprüfen.
- Aufgaben zu filtern (abgeschlossen, aktiv, alle). Verwenden Sie
filterundreduce. - Die Grundlagen von JavaScript zu verstehen.
Projekt 7. Sortierbare Drag-and-Drop-Liste
Sehr nützlich, um das zu verstehen .
Lernen wir:
- Drag-and-Drop-API
- Richtige Benutzeroberflächen zu erstellen
Projekt 8. Klon eines Messengers (native Anwendung)
Sie werden verstehen, wie Web- und native Anwendungen funktionieren, was Sie von der Masse abheben wird.
Was wir lernen werden:
- Websockets (Echtzeit-Nachrichten)
- Wie native Anwendungen funktionieren.
- Wie Templates in nativen Anwendungen funktionieren.
- Die Organisation von Routen zur Verarbeitung von Anfragen in nativen Anwendungen.
Damit kommen Sie für ein bis zwei Monate über die Runden.
Die Übersetzung wurde unterstützt von , das sich professionell mit für große Auftraggeber beschäftigt und außerdem .
Quelle: habr.com
