PROJECT-IDEAS.de.md

🇩🇪 Deutsch | 🇬🇧 English

← Zurück zur Repository-Übersicht · Kommt nach: Kurs 2 – Taschenrechner Konsole, Kurs 3 – Taschenrechner GUI, Kurs 4 – To-Do-Liste, Kurs 5 – Einheitenumrechner, Kurs 6 – Quiz, Kurs 7 – Memory-Spiel, Kurs 8 – Wetter-App, Kurs 9 – Budget-Tracker, Kurs 10 – REST-API und Kurs 11 – Full-Stack-Notizen-App

Ideen für deine nächsten Projekte

Kurs 2 bis Kurs 11 (der Taschenrechner, zweimal, eine To-Do-Liste, ein Einheitenumrechner, ein Quiz, ein Memory-Spiel, eine Wetter-App, ein Budget-Tracker, eine REST-API und eine Full-Stack-Notizen-App) decken die Grundlagen ausführlich ab — Variablen, Funktionen, das DOM, Daten als HTML rendern, ein erster Schritt in Richtung OOP, das Sprechen mit einer echten API, JavaScript außerhalb des Browsers ausführen, und ein Frontend mit einem datenbankgestützten Server verbinden. Was danach kommt, liegt bei dir: hier ist eine sortierte Liste an Projektideen, grob geordnet von "naheliegender nächster Schritt" bis "wirklich ambitioniert", jeweils mit den wichtigsten neuen Fähigkeiten, die sie dir vermitteln würden. Wähl, was dir am meisten Spaß macht — Motivation zählt mehr als das strikte Einhalten der Reihenfolge. Jede dieser Ideen könnte der Kurs 12 dieses Repositories werden — oder einfach dein eigenes Nebenprojekt.

#	Projekt	Neue Fähigkeiten, zusätzlich zu dem, was du schon kannst	Schwierigkeit
1	To-Do-Liste — Aufgaben hinzufügen, entfernen und abhaken	✅ Gebaut — siehe Kurs 4 – To-Do-Liste	⭐
2	Einheitenumrechner — Länge, Gewicht, Temperatur	✅ Gebaut — siehe Kurs 5 – Einheitenumrechner	⭐
3	Multiple-Choice-Quiz — Fragen, Punktestand, ein Ergebnisbildschirm	✅ Gebaut — siehe Kurs 6 – Quiz	⭐⭐
4	Memory-Spiel — Karten umdrehen, Paare finden	✅ Gebaut — siehe Kurs 7 – Memory-Spiel	⭐⭐
5	Wetter-App — echtes Wetter für eine eingetippte Stadt	✅ Gebaut — siehe Kurs 8 – Wetter-App	⭐⭐⭐
6	Budget-Tracker — Einnahmen/Ausgaben, laufende Summen, Kategorien	✅ Gebaut — siehe Kurs 9 – Budget-Tracker	⭐⭐⭐
7	Eine kleine REST-API mit Node.js + Express — dein eigener kleiner Server	✅ Gebaut — siehe Kurs 10 – REST-API	⭐⭐⭐⭐
8	Vollwertige Notiz-App — ein Frontend spricht mit deinem eigenen Backend und speichert Notizen in einer echten Datenbank	✅ Gebaut — siehe Kurs 11 – Full-Stack-Notizen-App	⭐⭐⭐⭐
9	Die To-Do-Liste in Vue neu bauen — dieselbe Hinzufügen/Abhaken/Entfernen-App, jetzt vom Framework verwaltet	Vue 3 (Composition API), Vite, ref()/reaktiver Zustand, eine Parent/Child-Komponentenaufteilung (Props runter, Events hoch), v-for/v-if-Templating	⭐⭐⭐⭐
10	Live Tic-Tac-Toe — zwei Spieler in getrennten Browser-Tabs (oder auf getrennten Computern), automatisch zusammengeführt und in Echtzeit synchron gehalten von einem Server, der den tatsächlichen Spielzustand besitzt	Die native WebSocket-API des Browsers, ein Node-WebSocket-Server mit ws, ein kleines Client-Server-Nachrichtenprotokoll, serverautoritativer Spielzustand	⭐⭐⭐⭐⭐

Ein paar Anmerkungen zum Lesen dieser Liste:

• Ideen 2–4 brauchten nichts über das hinaus, was der jeweils vorherige Kurs schon vermittelt hatte — dieselben Werkzeuge, neue Arten von Problemen. Ab hier betreten die Ideen unten wirklich neues Terrain.
• Idee 5 ist der natürliche Punkt, um "alles passiert sofort in meinem eigenen Code" hinter sich zu lassen und mit der Außenwelt umzugehen (Netzwerke sind langsam und schlagen manchmal fehl — das ist selbst eine Fähigkeit).
• Bei den Ideen 7–8 hört JavaScript auf, "nur eine Browsersprache" zu sein — dieselbe Sprache, aber auf einem Server laufend, am Ende sogar wieder mit einem Frontend verbunden, über eine echte Datenbank statt Arbeitsspeicher oder localStorage.
• Idee 9 kommt bewusst nachdem du ein paar Dinge von Hand gebaut hast: Frameworks ergeben am meisten Sinn, sobald man die Probleme selbst gespürt hat, die sie lösen. Die Wahl fällt gezielt auf Vue statt React, wegen der Lernkurve: Vues Template-Syntax bleibt nah am HTML/CSS/JS, das du schon kennst, während Reacts JSX ein größerer gedanklicher Sprung ist — und neu gebaut wird die To-Do-Liste statt der Taschenrechner, weil deren manuelles "HTML wegwerfen und alles von Hand neu rendern" genau das ist, was die Reaktivität eines Frameworks ersetzt. (React hat weiterhin den größeren Arbeitsmarkt, falls dir das wichtiger ist als die sanftere Lernkurve.)
• Idee 10 bleibt bewusst bei Tic-Tac-Toe — die Regeln brauchen keine Erklärung, sodass das komplette Schwierigkeitsbudget in die eigentliche Lektion fließt: der Server hält das eine wahre Spielbrett und entscheidet, wer am Zug ist, ein Client schlägt nur einen Zug vor, und der Server validiert, übernimmt und verteilt das Ergebnis an beide Spieler. Genutzt werden die rohe ws-Bibliothek und das im Browser eingebaute WebSocket, nicht Socket.io — eine Partie braucht nie mehr als zwei verbundene Sockets, sodass Socket.ios Rooms-/Namespace-/Reconnect-Maschinerie hier Aufwand ohne echten Nutzen wäre.

Egal wofür du dich entscheidest: Dieselben Gewohnheiten aus Kurs 2 bis Kurs 11 gelten weiter — zuerst die Kernversion bauen, sie einfach halten, und erst dann zur optionalen, schwierigeren Variante eines Features greifen, wenn die einfache funktioniert.