Die besten Projekte für ein JavaScript-Portfolio: vom Anfänger zum Profi

Warum das Portfolio alles entscheidet, oder wie man nicht auf dem „Hello, World“-Niveau hängen bleibt

Bei JavaScript-Vorstellungsgesprächen achtet der Arbeitgeber nicht auf die Liste der absolvierten Kurse, sondern auf drei Dinge: Code, Logik und die Fähigkeit, Dinge zu Ende zu bringen. Genau die Projekte für ein JavaScript-Portfolio werden zur Brücke zwischen „Ich kenne die Theorie“ und „Ich kann ein Geschäftsproblem lösen“.

Das Problem vieler Anfänger ist, dass sie in endlosen Tutorials stecken bleiben. „Mache 10 Projekte in einer Woche“ – klingt cool, aber am Ende hat man 10 Klone desselben Taschenrechners. Ich schlage einen anderen Weg vor: 5 Projekte, die wirklich Ihr Niveau zeigen und 90% der Anforderungen von Junior/Middle JavaScript Developer-Stellen abdecken.

In diesem Artikel finden Sie nicht nur Ideen, sondern fertige Architekturlösungen, echte Code-Ausschnitte und eine Erklärung, warum genau dieses Projekt Sie aus der Masse der Kandidaten hervorhebt. Los geht's?

1. To-Do-Liste mit erweiterter Logik: nicht nur „hinzufügen-löschen“

Das banalste Projekt der Welt. Aber wenn Sie es machen wie alle anderen, werden Sie nicht bemerkt. Erstellen Sie ein Kanban-Board mit Drag-and-Drop in reinem JavaScript. Das zeigt, dass Sie mit DOM-Ereignissen, LocalStorage und Asynchronität umgehen können.

Was enthalten sein sollte

\n
• Drei Spalten: „Geplant“, „In Arbeit“, „Fertig“.
\n
• Verschieben von Karten mit Speicherung der Position in LocalStorage.
\n
• Filterung nach Tags (Arbeit/Privat/Dringend).
\n
• Dark Mode (zeigt Sorgfalt für UX).
\n

Beispiel für die Implementierung von Drag-and-Drop in reinem JS

const draggables = document.querySelectorAll('.task');\nconst containers = document.querySelectorAll('.column');\n\ndraggables.forEach(task => {\n    task.addEventListener('dragstart', () => {\n        task.classList.add('dragging');\n    });\n\n    task.addEventListener('dragend', () => {\n        task.classList.remove('dragging');\n        saveToLocalStorage(); // benutzerdefinierte Speicherfunktion\n    });\n});\n\ncontainers.forEach(column => {\n    column.addEventListener('dragover', e => {\n        e.preventDefault();\n        const afterElement = getDragAfterElement(column, e.clientY);\n        const draggable = document.querySelector('.dragging');\n        if (afterElement == null) {\n            column.appendChild(draggable);\n        } else {\n            column.insertBefore(draggable, afterElement);\n        }\n    });\n});\n\nfunction getDragAfterElement(container, y) {\n    const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];\n    return draggableElements.reduce((closest, child) => {\n        const box = child.getBoundingClientRect();\n        const offset = y - box.top - box.height / 2;\n        if (offset < 0 && offset > closest.offset) {\n            return { offset: offset, element: child };\n        } else {\n            return closest;\n        }\n    }, { offset: Number.NEGATIVE_INFINITY }).element;\n}\n

Warum das cool ist: Sie zeigen Verständnis für das Ereignismodell des Browsers, die Arbeit mit Koordinaten und Leistungsoptimierung (debounce ist nicht nötig, kann aber in der Readme erwähnt werden).

2. Wetter-App mit Geolokalisierung und Animationen

API-Anfragen sind die Basis des modernen Frontends. Ein JavaScript-Projekt mit fetch, async/await und Fehlerbehandlung ist ein Muss im Portfolio. Fügen Sie Visualisierungen hinzu: animierte Wolken, Regen oder Schnee mit CSS/Canvas.

Wichtige Funktionen

\n
• Standortermittlung über die Geolocation API.
\n
• Städtesuche mit Vorschlägen (debounce auf input).
\n
• Anzeige von Temperatur, Luftfeuchtigkeit, Wind und Wettersymbol.
\n
• Temperaturdiagramm für 5 Tage (Chart.js oder benutzerdefiniertes SVG).
\n

Beispiel für eine Anfrage an OpenWeatherMap

async function getWeather(city) {\n    const API_KEY = 'ihr_schlüssel';\n    const url = `https://api.openweatherm