Marcel Stockhausen

Frontend-Entwicklung für Unternehmen und Agenturen

Komplexe Oberflächen, klar umgesetzt.

Als freiberuflicher Webentwickler aus Köln unterstütze ich Unternehmen und Agenturen bei der Entwicklung und Modernisierung anspruchsvoller Web-Frontends, Websites und datengetriebener Webanwendungen.
Ich arbeite eigenständig oder als Teil bestehender Teams und bringe Struktur in Projekte, in denen Design, Inhalte, CMS, APIs und technische Anforderungen zusammenkommen.

Im Mittelpunkt steht dabei die Verbindung aus technischer Analyse, einer zuverlässigen Umsetzung und einer guten Zusammenarbeit. Je nach Projektkontext entstehen komponentenbasierte, responsive und barrierearme Frontends, die nachvollziehbar und strukturiert integriert sind. Dadurch sind die Lösungen im Alltag gut erweiterbar und langfristig wartbar.

Leistungen

Web-Entwicklung mit Blick auf das ganze System

Web-Entwicklung umfasst mehr als die sichtbare Oberfläche. Wenn Architektur, Komponenten, CMS und Schnittstellen aufeinander abgestimmt sind, entstehen Lösungen, die technisch verlässlich funktionieren und sich gezielt weiterentwickeln lassen.

Konzept und Komponenten

  • Frontend-Architektur auf Basis von Designsystem, Contentmodell und technischen Anforderungen
  • wiederverwendbare UI-Komponenten mit klaren States, Varianten und Design Tokens
  • Aufbau von Pattern-Libraries als Grundlage für Umsetzung und Pflege

Webanwendungen und interaktive UIs

  • Suchoberflächen, Filter, Produktfinder, Karten und komplexe Formularstrecken
  • interaktive UI-Komponenten in TypeScript mit Vue.js und passenden Frameworks
  • Anbindung von REST-, JSON- und GraphQL-Schnittstellen

Websites, CMS-Frontends und Integration

  • Umsetzung von Websites und Relaunches
  • Frontend-Templates für TYPO3, Craft CMS und WordPress
  • Anbindung von Headless-CMS, APIs und Formularen

Modernisierung und Audits

  • Weiterentwicklung und Migration bestehender Frontends
  • Prüfung von Architektur, Barrierefreiheit und Performance
  • Build-Prozesse, Linting, Tests und browserübergreifende Kompatibilität

Arbeitsweise

Struktur schaffen und zuverlässig umsetzen

Der genaue Ablauf hängt vom jeweiligen Projekt ab. Es gibt jedoch vier Schritte, die fast immer vorkommen, unabhängig davon, ob es sich um einen Relaunch, eine Anwendung oder die Modernisierung eines bestehenden Systems handelt.

  1. Analysieren

    Ziele, Designs, vorhandene Systeme, Backend-Schnittstellen und technische Abhängigkeiten gemeinsam klären.

  2. Entwickeln

    Layouts, Komponenten, States und Varianten werden so aufgebaut, dass ein modulares und wartbares Frontend entsteht.

  3. Integrieren

    Frontend, CMS und APIs zusammenführen und Entscheidungen eng mit Design, Backend und Stakeholdern abstimmen.

  4. Abrunden

    Responsives Verhalten und Interaktionen prüfen, Cross-Device/-Browser-Tests durchführen und die weitere Arbeit durch Dokumentation und Tooling absichern.

Zusammenarbeit, die zum Projekt passt

Die Zusammenarbeit orientiert sich an den Anforderungen, Rollen und etablierten Abläufen des jeweiligen Projekts. Klare Zuständigkeiten, gemeinsam einsehbare Arbeitsstände und dokumentierte Entscheidungen schaffen eine verlässliche Grundlage für die Abstimmung zwischen Design, Entwicklung, Projektmanagement und den fachlich verantwortlichen Teams. Vorhandene Werkzeuge und Strukturen werden sinnvoll weitergenutzt und nur ergänzt, wenn das Projekt davon profitiert.

Design und Anforderungen

Digitale Designwerkzeuge wie Figma dienen als gemeinsame Arbeitsgrundlage für Entwürfe, Varianten, Zustände und offene Detailfragen. So können wichtige Anforderungen frühzeitig abgestimmt und Entscheidungen transparent und nachvollziehbar dokumentiert werden.

Code und Qualität

GitLab oder GitHub bilden die gemeinsame Arbeitsgrundlage für Code-Versionierung, technische Abstimmungen und gemeinsame Code Reviews. Automatisierte CI/CD-Prozesse erstellen Builds, prüfen die Codequalität, führen Tests aus und unterstützen eine verlässliche Integration und Bereitstellung.

Aufgaben und Wissen

Aufgaben, Zuständigkeiten und technische Entscheidungen werden in den vorhandenen Projekt- und Wissensmanagementsystemen dokumentiert. Je nach Projekt dienen z. B. Jira oder awork der Aufgabensteuerung, während Confluence oder Notion Wissen und Entscheidungen zugänglich machen.

Tech-Stack

Technologien und Systeme

Die technische Auswahl richtet sich nach den konkreten Anforderungen, den vorhandenen Systemen sowie dem jeweiligen Projektkontext. Entscheidend ist nicht die Festlegung auf eine bestimmte Technologie, sondern die passende Lösung für das Projekt.

Webtechnologien

  • HTML
  • CSS
  • SCSS
  • JavaScript
  • TypeScript
  • PHP
  • Vite
  • Webpack

Frameworks & Libraries

  • Vue.js
  • Pinia
  • Nuxt
  • React
  • Next.js
  • Svelte
  • Ionic & Capacitor
  • Bootstrap
  • Tailwind CSS

CMS & Schnittstellen

  • Craft CMS
  • TYPO3
  • WordPress
  • Shopify
  • Headless CMS
  • REST-APIs
  • GraphQL

Komponenten & Qualität

  • Design Systems
  • Storybook
  • Fractal
  • Responsive Design
  • Accessibility
  • ESLint / Stylelint
  • Vitest / Playwright

Projekte

Was daraus in der Praxis wird

Viele meiner Projekte entstehen gemeinsam mit Digitalagenturen und unterliegen Vertraulichkeitsvereinbarungen. Die folgenden Einblicke sind deshalb anonymisiert und konzentrieren sich auf meine konkrete Arbeit.

Stack

  • TypeScript
  • React
  • Next.js
  • GraphQL
  • Storybook

Kontext

Headless-CMS-Frontend

Contentportal für eine soziale Organisation

Aufbau der zentralen Frontend-Grundlage für ein redaktionelles Portal mit typisierter Datenanbindung und wiederverwendbaren Inhaltsmodulen.

Umsetzung

  • Rendering-Pipeline von CMS-Inhalten zu React-Komponenten konzipiert und entwickelt
  • GraphQL-Codegenerierung und responsive Bildabstraktion eingerichtet
  • Storybook, Barrierefreiheitsprüfungen und gemeinsame Werkzeuge für Linting und Formatierung etabliert

Ergebnis

Eine gemeinsame Codequalitätsbasis mit Type-Safety, Storybook und eingebundenen Accessibility-Prüfungen.

Stack

  • TypeScript
  • Vue.js
  • TYPO3 & Solr
  • Fractal

Kontext

Frontend-System und Webanwendung

Karriereportal mit integrierter Jobsuche

Neuaufbau eines umfangreichen Karriereportals mit CMS-Inhalten, modularer Pattern Library und einer komplexen Jobsuche.

Umsetzung

  • Komponentensystem von den Grundlagen bis zu komplexen Inhaltsmodulen umgesetzt
  • Vue-Anwendung mit Filtern, Autocomplete, Karte, Dialogen und URL-synchronisierter Pagination entwickelt
  • barrierefreie Interaktionen und responsive Varianten realisiert

Ergebnis

Ein wartbares Portal mit klaren Zuständen, URL-States, responsiver Navigation und nachvollziehbarer Übergabe.

Stack

  • TypeScript
  • Vue.js
  • Pinia
  • Ionic
  • Capacitor

Kontext

Mobile White-Label-Plattform

Messe-App für internationale Events

Langjährige Weiterentwicklung einer mobilen Plattform, die als gemeinsame Basis für eine Vielzahl markenspezifischer Messe-Apps dient.

Umsetzung

  • Dashboard, globale Suchen, Übersichts- und Detailseiten umgesetzt und an APIs angebunden
  • Networking mit Profilen, Besprechungsanfragen, Verfügbarkeiten mitentwickelt
  • Indoor-Navigation, App Deep Links und Ticketshop-Anbindung integriert

Ergebnis

Eine stabile technische Basis für App-Store- und Play-Store-Releases, die Messeinhalte, Orientierung, Networking und Ticketing in einer gemeinsamen Plattform bündelt.

Stack

  • TypeScript
  • Vite
  • Svelte 5
  • Storybook

Kontext

Technische Modernisierung

Svelte-Migration von Plattform für soziales Engagement

Modernisierung mehrerer eingebetteter Svelte-Apps und Migration aller Projektbestandteile auf Svelte 5.

Umsetzung

  • Migration und Portierung zahlreicher Komponenten auf Svelte 5
  • Komponenten, Stores, Services, Typen für neue API-Struktur erweitert
  • Storybook als neue Arbeits- und Review-Oberfläche für das Team eingeführt

Ergebnis

Die eingebetteten Frontends laufen auf Svelte 5, bauen stabil in der CI und haben mit Storybook eine gemeinsame Grundlage für Review und Weiterentwicklung.

Stack

  • SCSS
  • TypeScript
  • Craft CMS
  • Twig

Kontext

Craft-CMS-Website und Kursverwaltung

Redaktionell pflegbare Praxiswebsite mit Kursangeboten

Aufbau einer responsiven Website für eine unabhängige Gesundheitspraxis mit Leistungen, Teamprofilen, Kursangeboten und klaren Kontaktwegen.

Umsetzung

  • Craft-CMS-Projekt, Seitenmodell, Navigation, Metadaten und flexible Inhaltsbereiche aufgebaut
  • Kurslisten mit Terminen, Preisen, Verfügbarkeiten, Kursleitung und vorbereiteten Anmeldemails umgesetzt
  • Kontaktformular, consent-gesteuerte Social-Media-Einbindung und automatisierte Social-Preview-Bilder integriert

Ergebnis

Eine redaktionell pflegbare Website mit Kurs- und Anfrageprozessen, umfassend berücksichtigten SEO-, Sharing- und Sichtbarkeitsaspekten, barrierearmen Details und Produktionsabsicherung.

Stack

  • TypeScript
  • Vite
  • Vue.js
  • PrimeVue
  • Storybook

Kontext

B2B-Produktplattform und Commerce-Frontend

Produktportal mit Suche, Vergleich und Konto

Langjährige Weiterentwicklung einer Vue-basierten Frontend-Plattform für Produktfindung, Produktdetails und transaktionale Benutzeroberflächen.

Umsetzung

  • Wiederverwendbare Komponenten für Content-, Produkt- und Serviceseiten aufgebaut und über mehrere Jahre weiterentwickelt
  • Produktsuche mit Raster- und Tabellenansicht, Filtern, Pagination, Vergleich und Variantenauswahl umgesetzt
  • Oberflächen für Konto, Bestellungen, Warenkorb und Checkout sowie barrierearme Formular- und Statusanzeigen erweitert

Ergebnis

Eine ausgereifte, in Storybook dokumentierte Frontend-Basis, die Content, Produktauswahl, Vergleich und Commerce-Prozesse konsistent verbindet.

Über mich

Zwischen Code, Design und Projektalltag

Senior Frontend-Entwickler

Porträt von Marcel Stockhausen

Ich bin Marcel Stockhausen, Senior Frontend-Entwickler aus Köln. Ich arbeite seit 2005 professionell in der Webentwicklung.

Nach mehreren Stationen in Agenturen und Entwicklungsteams bin ich seit 2015 als freiberuflicher Senior Frontend-Entwickler selbstständig.

In dieser Zeit habe ich mit Digitalagenturen, in größeren Projektteams sowie direkt mit Unternehmen und Selbstständigen zusammengearbeitet.

Was ich mitbringe

  • mehr als 20 Jahre praktische Erfahrung in der Webentwicklung
  • langjährige Zusammenarbeit mit Digitalagenturen, häufig in vertraulichen Kundenprojekten
  • Erfahrung von technischer Konzeption über Entwicklung und Integration, bis hin zu abschließenden Tests
  • umfassendes Verständnis für CMSs, Backends und redaktionelle Abläufe
  • zuverlässige Kommunikation und verbindliche Abstimmung im Projektalltag
  • gewissenhafte Umsetzung mit Blick für Details, Qualität und Wartbarkeit
  • IHK-zertifizierter Projektmanager

Kontakt

Sprechen wir über Ihr nächstes Projekt

Ich freue mich über konkrete Anfragen, erste Ideen und Fragen zu möglichen Projektrealisierungen. Dabei spielt es keine Rolle, ob Sie eine neue Website planen, Unterstützung für ein bestehendes Frontend suchen oder ein größeres Agenturprojekt besetzen möchten.