Webentwicklung

2021 habe ich mich intensiver in die Web-, App- und Software-Entwicklung begeben und entschieden, meinen Fokus darauf zu legen – sei es als Webentwickler, IT-Manager, IT-Berater oder an der Schnittstelle all dieser Bereiche. Und gerne mit Sinn, was für mich bedeutet, einen Beitrag zur nachhaltigen Entwicklung zu leisten.

Vor dem Schritt in die Webentwicklung habe ich u.a. beim netzwerk n eine Open Source-Plattform für Nachhaltigkeitsengagement an Hochschulen mitentwickelt – die plattform n. Meine Aufgabe war es, die Schnittstelle zwischen Programmierung und den Bedürfnissen der Community und des Projektteams zu bedienen. In der Weiterbildung zum "Full Stack Web & App Developer" an der WBS Coding School Berlin vertiefte ich mein Wissen in einem modernen Tech-Stack. Danach startete ich als Frontend-Entwickler bei team neusta. Mittlerweile bin ich bei der DB Systel angekommen – dem Digitalpartner der Deutschen Bahn –, wo ich die Mobilitätswende mitgestalte. Auch wenn ich dies vor einigen Jahren noch nicht als berufliche Option präsent hatte, hat es sich gelohnt, in die Welt der Web- und Softwareentwicklung einzusteigen. Am liebsten arbeite ich aktuell mit TypeScript und React.

Der Artikel Want To Take A Coding Bootcamp? Prepare For These 3 Phases gibt einen Einblick in meine Geschichte, wie ich mich über das reine Interesse und den Spaß in das Abenteuer Coding stürzte und seitdem über intensive Lernerfahrungen meinen Weg als Softwareentwickler gefunden habe.

»Even if you don’t work for a company that is actively doing good for the world, you always have a responsibility [...] to be the one within the group to push things in the right direction. To make a difference.«

Michael Flohr

Want To Take A Coding Bootcamp? Prepare For These 3 Phases

Zum Portfolio

Portfolio

Vegan Ice Cream App

ReactIonicNode.js mit ExpressMongoDB mit Mongoose

Als Abschlussprojekt an der WBS Coding School realisierte ich die Vegan Ice Cream App "Eis mit Stil", die ich als Herzensprojekt weiterentwickeln möchte, wenn es meine Zeit erlaubt.

Worum geht es? Regelmäßig – und nicht nur im Sommer – begebe ich mich auf die Suche nach veganem Eis. Egal an welchem Ort ich mich befinde. Ich liebe veganes Eis. Damit meine ich aber nicht dieses von manchen Eisläden einfach als vegan bezeichnete Sorbet-Wasser-Gemisch. Nein: Ich mag richtig cremiges veganes Eis – allein mit gefrorenem Wasser lasse ich mich nur ungern abspeisen. Doch die Suche war für mich immer beschwerlich. Ich musste mich durch Google mit allerlei Suchbegriffen quälen. Auch auf Google Maps stellten sich viele vegane Eis-"Fundstellen" als unzutreffend heraus. Dies gab mir den Impuls, eine eigene Plattform aufzubauen, auf der veganes Eis gefunden, eingetragen und bewertet werden kann.

Eisläden mit veganem Angebot finden
neue Eisläden auf der Karte eintragen
Eis-Erlebnis und veganes Angebot bewerten
Top-Eisläden als Favoriten speichern

Zur App

Screenshot Vegan Ice Cream App Eis mit Stil

Die Bahn-Sparmethode

ReactTypeScriptDesign

Ich bin ein begeisterter Bahnfahrer. Nach vielen Jahren Erfahrung mit dem komplexen Preissystem der DB habe ich aus reiner Neugier eine Website erstellt und Materialien produziert (Video, Anleitungen), mit denen ich eine ziemlich unbekannte Sparmethode zugänglich mache. Denn: Bahnfahren muss nicht teuer sein. Es kommt auf das Wissen an, wie im verworrenen Preissystem das günstigste Ticket passend zu den eigenen Fahrt-Bedürfnissen gefunden werden kann.

Mit der Bahn-Sparmethode wollte ich zeigen, dass spontanes und sehr günstiges Zugfahren jederzeit flexibel möglich ist, wenn mal kleinere oder teils größere Abstriche bei der Fahrtzeit denkbar sind. Das Deutschland-Ticket erleichtert nun vieles, dennoch bedient meine Sparmethode weiterhin eine kleine Nische, die sich für den einen oder die andere lohnen könnte.

Zur Website

Mein SV-Wissen

WordPressGeneratePressTemplateDesign

Für den Verein Schule ein Gesicht geben e.V. habe ich das gestalterische und funktionale Template für die Web-App "Mein SV-Wissen: Die App für eure Schülervertretung" erstellt. WordPress und das leichtgewichtige und sehr gut adaptierbare GeneratePress-Theme dienten als Basis.

Das Ziel der App ist das Empowerment von Schülervertretungen in Deutschland. Zahlreiche interaktive Inhalte und Wissensbausteine lassen nach und nach einen großen Wissensspeicher entstehen, der Schüler:innen helfen soll, ihre eigene Schule mitzugestalten und ihre Rechte wahrzunehmen.

Zur Website

Kinder- und Jugendparlamente Berlin

WordPressAvada ThemeTemplateDesign

Die Servicestelle Jugendbeteiligung e.V. hat mich in einem kleinen Projekt damit beauftragt, das grundlegende Template für ihre Projekt-Website zum Thema Kinder- und Jugendparlamente in Berlin aufzusetzen. Basierend auf dem Avada Theme habe ich das Layout entwickelt, das der Verein eigenständig mit Inhalt füllt.

Das Ziel der Website ist es, in knapper Form über das Projekt zu informieren und Blogbeiträge, Materialien und Veranstaltungstermine zugänglich zu machen.

Zur Website

Screenshot Kinder- und Jugendparlamente Berlin

Plattform n

Product OwnerProjektmanagementCommunity-ManagementRelaunchDjango

In meiner ehrenamtlichen und später beruflichen Tätigkeit war ich seit den Anfängen 2014 bis 2021 unmittelbar in den Aufbau, das Community- und Projektmanagement der Open Source-Kollaborationsplattform plattform n involviert. Ziel der Plattform ist es, das Engagement für nachhaltige Hochschulen zu erleichtern und zu fördern. Das Besondere dabei sind auch die Werte, die dahinter stecken: Open Source, Green IT, Gemeinnützigkeit, Datenschutz und Privatsphäre. Mittlerweile ist die Community auf 11.000 Nutzer:innen in über 180 Gruppen und über 1.000 Projekten angewachsen. Eine Erfolgsgeschichte, wie aus Ideen Projekte und konkrete Veränderungen in der Realität erwachsen können.

Einen ausführlichen Einblick in die Geschichte und das Konzept der plattform n findet sich in diesem Artikel. Gegenwärtig werden erste Schritte umgesetzt, die in den Relaunch des Designs und der Code-Basis mit React münden sollen. Dies geschieht im Verbund mit ähnlich aufgebauten sozial-ökologisch orientierten Plattformen, die sich unter dem Dach der wechange eG zusammengefunden haben.

Zur Plattform

npm packages

React Timeline Responsive

I was looking for a sleek, responsive timeline for my website to visualize my career and education journey. After I couldn't find anything suitable, I set about it myself. After a few days of work, this wonderful component was ready, which is also the first npm package that I published open source. You can see the application of this timeline component on the start page.

With the React Timeline Component, you can create a stylish and customizable timeline for all your chronological data needs. This component has got you covered. Especially suitable for portfolio websites of web developers who want to show their career. Just provide your timeline data and your desired theme, and let the Timeline component handle the rest - the positioning, the responsive layout, and even the type safety with its TypeScript design.

Installation

Start creating your timeline masterpiece today. Install the package in your React project using the following command.

npm install react-timeline-responsive

Usage

// basic example
import { Timeline } from 'react-timeline-responsive';

const timelineData: TimelineData[] = [
  {
    startPeriod: '2010-05',
    endPeriod: '2018-10',
    title: 'Title of event/period 1',
    subtitle: 'Subtitle 1', // optional
    content: ['Content 1 line 1', 'Content 1 line 2'], // optional
    group: 1 // optional
  },
  // Add more events/periods here...
];

const theme: Theme = {
  colorAccentPrimary: '#d3a418',
  colorText: '#e1e1e1',
  colorBackground: '#242528',
  colorBarHex: '#f7cc4b',
  colorGradation: 4 // optional: default is 4
};

export const MyTimeline = () => {
  return (
    <Timeline
      timelineData={timelineData}
      language='de-DE' // date language format
      order= 'asc' // order of timeline ('asc' | 'desc')
      theme={theme}
      // e.g. if sticky navbar is present, use props below
      stickyMarginTopDesktop={50} // default: 60 = 60px
      stickyMarginTopMobile={10} // default: 15 = 15px
    />
  )
};

// advanced example with filter and dark/light theme
import { Timeline } from 'react-timeline-responsive';
// ... other imports

const timelineJob: TimelineData[] = [
  {
    startPeriod: '2010-05',
    endPeriod: '2018-10',
    title: 'Title of event/period 1',
    group: 1
  },
  // Add more events/periods here...
];

const timelineEducation: TimelineData[] = [
  {
    startPeriod: '2015-03',
    endPeriod: '2021-11',
    title: 'Title of event/period 2',
    group: 2
  },
  // Add more events/periods here...
];

type TimelineSelection = {
  job: boolean;
  education: boolean;
};

const timelineReducer = (prevState: TimelineSelection, type: keyof TimelineSelection) => ({
  ...prevState,
  [type]: !prevState[type]
});

export const MyTimeline = () => {
  const { isLight } = useThemeContext();
  const [{ job, education }, dispatchTimelineSelection] = useReducer(timelineReducer, {
    job: true,
    education: false
  });

  const timelineData = useMemo(
    () => [
      ...(job ? timelineJob : []),
      ...(education ? timelineEducation : [])
    ],
    [education, job]
  );

  const theme: Theme = useMemo(
    () => ({
      colorAccentPrimary: isLight ? '#f7cc4b' : '#d3a418',
      colorAccentSecondary: isLight ? '#ff4f04' : '#ff4f04', // optional: nice if more than 1 group
      colorText: isLight ? '#515151' : '#e1e1e1',
      colorBackground: isLight ? '#ffffff' : '#242528',
      colorBarHex: '#f7cc4b',
      colorGradation: 4
    }),
    [isLight]
  );

  return (
    <>
      <button onClick={() => dispatchTimelineSelection('job')} />
      <button onClick={() => dispatchTimelineSelection('education')} />
      <Timeline
        timelineData={timelineData}
        language="de-DE"
        order="asc"
        theme={theme}
      />
    </>
  )
};

All other details such as important notes and the definition of the properties can be found on the npm package website.