Mazda
Händlerplattform, international
https://shop.mazda.co.uk/ (DH1 1AA, GU16 7HF)
ReactJS Typescript, GraphQL, vtex, Html & SCSS
?Build
lightning-fast storefronts, custom apps and integrations and eliminate manual
tasks across your delivery lifecycle? (vtex)
Vtex bietet eine Reihe von Apps für Back- und Frontend, mit dem sich im
Baukasten Prinzip Shopping Lösungen verwirklichen lassen.
Im Projekt wurde das klassische CMS benutzt, das mit einem auf React/Typescript
basierenden Frontend kommt. Konfiguration des Frontend wird mit JSON
beschrieben. Custom Components können eingebunden werden (React/Typescript)
Mein Aufgabenbereich:
· Analyse des vtex Universums, Machbarkeit
· Koordination des Fronendteams
· Schulung der Frontend Kollegen über Handhabung des CMS
o Verwalten und Arbeiten mit dem vtex workspaces Konzept
o Erstellung von Custom Components
o Datenanbindung mit GraphQL
· Responsives Layouting mit dem vtex Frontend (JSON-Konfiguration/ CSS)
· Integration von SCSS in das vtex System
· Testing (react testing library)
·
Deployment des vtex Frontend
Einzelne Apps werden versioniert und jede für sich deployed. Im Anschluss wurde
die Main-App deployed und veröffentlicht.
Auch aufgrund der Workspace-Architektur war dieser Prozess nicht sehr
übersichtlich und fehleranfällig und daher lange meine Verantwortung. Erst nach
einer Reihe von begleiteten Sessions sahen sich die Frontend-Kollegen in der
Lage, selbständig Deployments vorzunehmen.
CI/CD Pipelines waren zum Start des Projekts vom Hersteller noch nicht
vorgesehen.
· Erstellung maßgeschneiderter Custom Components für Mazda
o
Finance
Calculator App
Calculator Integration mit Slidern. Berechnung erfolgte auf Fremdsystem,
Einbindung der Daten per GraphQL mit anschließender Generierung des Frontend
anhand der gelieferten Daten.
o
Customer Location App
Eine von vtex für Mazda entwickelte Lokalisierung anhand von validierten
Postcodes. Diese App wurde im Laufe des Projekts von Diva-e übernommen und von
mir erweitert. Dies erforderte ein Redesign, auch um Laufzeitfehler in der App
zu eliminieren
o
Contact Dealer App
Kontaktformular zum Verkäufer des gewählten Fahrzeuges
o
Summary App
Custom Page mit detaillierten Produktinformationen
o Viele weitere?
· Analyse von Bugs in enger Zusammenarbeit mit dem Backend Team
·
Planung von Sprints und Releases
Als Teammitglied mit der längsten Erfahrung in der Projekthistorie und
detaillierter Kenntnis des vtex Systems durfte ich Scrummaster und Owner bei
der Planung unterstützen.
Fortbildung im React Ökosystem
Apollo, GraphQL
Siemens
HelloPage Intranet,
Startseite zum Siemens Intranet
Die Startseite mit dynamischen Elementen (Animationen, Drag and Drop, Offcanvas-Elemente) beinhaltete unter anderem aktuelle Kalendereinträge und konfigurierbare Linksammlungen. Realisierung über ReactJS/ Typescript, Axios, Beautiful DND, React DND, Framer Motion
· Realisierung des reponsiven Layouts mit ReactJS/Typescript und SCSS
· Testing (react testing library)
·
Konfigurierbare Linksammlung
über Drag & Drop konnten Newsfeeds aus einer Leiste mit Vorschlägen in den
Arbeitsbereich gezogen und persistent gespeichert werden.
·
Konfigurierbare Kacheln mit relevanten Feeds aus
dem Siemens Universum, Es gab eine Grundkonfiguration an vorgegebenen Themen,
die beliebig erweitert werden konnte.
Der Anwender konnte pro Seite 6 Kacheln in einer beliebigen Reihenfolge und auf
beliebig vielen Seiten sortieren und persistent abgelegen.
· Guided Tour: klassische Tour, die den Anwender über alle Seiten der Anwendung führt, um Funktionalitäten zu erläutern. Abbrechpunkte wurden gespeichert, um die Tour zu einem späteren Zeitpunkt fortführen zu können. Die Tour interagierte mit den bereits vorhanden Seitenanimationen wie Page Transitions, Offcanvas-Elementen oder Slidern.
· Planung von Sprints als Mitglied eines Scrum Teams
Münchener
Hyp,
React Typescript Redux
· Übertragung von Print-Medien Formularen in die digitale Welt mit ReactJS/Typescript
· Testing (react testing library)
· Planung von Sprints als Mitglied eines Scrum Teams
Projektleitung Frontend-Team.
Implementierung Frontendarchitektur in ReactJS für ein Sportwetten Portal.
Logo, Visitenkarten, Briefkopf
(Datenbestände werden dynamisch aus geschützten Extranet ausgelesen,
öffentlicher Zugriff ohne Login auf Teile der Daten gefordert.
Technische Umsetzung durch externen J2EE Spezialisten)
- Funktionale und Gestalterische Anpassung der JSP-FilesPlanung der Frontend-Architektur für hochskallierbare
Webanwendung (Mobile und Desktop/ responsive/ adaptive)/ Single Page Applications. Erstellungund Programmierung der GUI-Komponenten, Crossbrowser Optimation.
Mazda
Händlerplattform, international
https://shop.mazda.co.uk/ (DH1 1AA, GU16 7HF)
ReactJS Typescript, GraphQL, vtex, Html & SCSS
?Build
lightning-fast storefronts, custom apps and integrations and eliminate manual
tasks across your delivery lifecycle? (vtex)
Vtex bietet eine Reihe von Apps für Back- und Frontend, mit dem sich im
Baukasten Prinzip Shopping Lösungen verwirklichen lassen.
Im Projekt wurde das klassische CMS benutzt, das mit einem auf React/Typescript
basierenden Frontend kommt. Konfiguration des Frontend wird mit JSON
beschrieben. Custom Components können eingebunden werden (React/Typescript)
Mein Aufgabenbereich:
· Analyse des vtex Universums, Machbarkeit
· Koordination des Fronendteams
· Schulung der Frontend Kollegen über Handhabung des CMS
o Verwalten und Arbeiten mit dem vtex workspaces Konzept
o Erstellung von Custom Components
o Datenanbindung mit GraphQL
· Responsives Layouting mit dem vtex Frontend (JSON-Konfiguration/ CSS)
· Integration von SCSS in das vtex System
· Testing (react testing library)
·
Deployment des vtex Frontend
Einzelne Apps werden versioniert und jede für sich deployed. Im Anschluss wurde
die Main-App deployed und veröffentlicht.
Auch aufgrund der Workspace-Architektur war dieser Prozess nicht sehr
übersichtlich und fehleranfällig und daher lange meine Verantwortung. Erst nach
einer Reihe von begleiteten Sessions sahen sich die Frontend-Kollegen in der
Lage, selbständig Deployments vorzunehmen.
CI/CD Pipelines waren zum Start des Projekts vom Hersteller noch nicht
vorgesehen.
· Erstellung maßgeschneiderter Custom Components für Mazda
o
Finance
Calculator App
Calculator Integration mit Slidern. Berechnung erfolgte auf Fremdsystem,
Einbindung der Daten per GraphQL mit anschließender Generierung des Frontend
anhand der gelieferten Daten.
o
Customer Location App
Eine von vtex für Mazda entwickelte Lokalisierung anhand von validierten
Postcodes. Diese App wurde im Laufe des Projekts von Diva-e übernommen und von
mir erweitert. Dies erforderte ein Redesign, auch um Laufzeitfehler in der App
zu eliminieren
o
Contact Dealer App
Kontaktformular zum Verkäufer des gewählten Fahrzeuges
o
Summary App
Custom Page mit detaillierten Produktinformationen
o Viele weitere?
· Analyse von Bugs in enger Zusammenarbeit mit dem Backend Team
·
Planung von Sprints und Releases
Als Teammitglied mit der längsten Erfahrung in der Projekthistorie und
detaillierter Kenntnis des vtex Systems durfte ich Scrummaster und Owner bei
der Planung unterstützen.
Fortbildung im React Ökosystem
Apollo, GraphQL
Siemens
HelloPage Intranet,
Startseite zum Siemens Intranet
Die Startseite mit dynamischen Elementen (Animationen, Drag and Drop, Offcanvas-Elemente) beinhaltete unter anderem aktuelle Kalendereinträge und konfigurierbare Linksammlungen. Realisierung über ReactJS/ Typescript, Axios, Beautiful DND, React DND, Framer Motion
· Realisierung des reponsiven Layouts mit ReactJS/Typescript und SCSS
· Testing (react testing library)
·
Konfigurierbare Linksammlung
über Drag & Drop konnten Newsfeeds aus einer Leiste mit Vorschlägen in den
Arbeitsbereich gezogen und persistent gespeichert werden.
·
Konfigurierbare Kacheln mit relevanten Feeds aus
dem Siemens Universum, Es gab eine Grundkonfiguration an vorgegebenen Themen,
die beliebig erweitert werden konnte.
Der Anwender konnte pro Seite 6 Kacheln in einer beliebigen Reihenfolge und auf
beliebig vielen Seiten sortieren und persistent abgelegen.
· Guided Tour: klassische Tour, die den Anwender über alle Seiten der Anwendung führt, um Funktionalitäten zu erläutern. Abbrechpunkte wurden gespeichert, um die Tour zu einem späteren Zeitpunkt fortführen zu können. Die Tour interagierte mit den bereits vorhanden Seitenanimationen wie Page Transitions, Offcanvas-Elementen oder Slidern.
· Planung von Sprints als Mitglied eines Scrum Teams
Münchener
Hyp,
React Typescript Redux
· Übertragung von Print-Medien Formularen in die digitale Welt mit ReactJS/Typescript
· Testing (react testing library)
· Planung von Sprints als Mitglied eines Scrum Teams
Projektleitung Frontend-Team.
Implementierung Frontendarchitektur in ReactJS für ein Sportwetten Portal.
Logo, Visitenkarten, Briefkopf
(Datenbestände werden dynamisch aus geschützten Extranet ausgelesen,
öffentlicher Zugriff ohne Login auf Teile der Daten gefordert.
Technische Umsetzung durch externen J2EE Spezialisten)
- Funktionale und Gestalterische Anpassung der JSP-FilesPlanung der Frontend-Architektur für hochskallierbare
Webanwendung (Mobile und Desktop/ responsive/ adaptive)/ Single Page Applications. Erstellungund Programmierung der GUI-Komponenten, Crossbrowser Optimation.
Direktester geht's nicht! Ganz einfach Freelancer finden und direkt Kontakt aufnehmen.
"Der Consultant verfügt über ein profundes IT-Wissen sowohl in der Oberflächenprogrammierung von J2EE basierten Web-Applikationen als auch in der Administration des Tomcat Applicationservers und der MySQL-Datenbank. In unserem Extranet-Projekt für unsere 33 Mitglieder (Unfallversicherungsträger) hatte er großen Anteil bei der graphischen Gestaltung und Migration von statischen Ressourcen in JSP-basierte Benutzeroberflächen und deren Codereview durch einen effizienten Einsatz von CSS und Javascript. Seine Beiträge zur Visualisierung komplexer Zusammenhänge und Navigationsstrukturen überzeugten ebenso wie die ergonomischen Verbesserungen vielschichtiger Anwendungen. Besonders hervorzuheben war die schnelle und effiziente Umsetzung der großen Anzahl von JSP-Templates des Opensource Forums mvnforum an unsere Designvorgaben - sowohl im Anwenderbereich als auch im Administrationsinterface. Dieses Kommunikationsmodul ist für unsere Mitarbeiter und Mitgliedern ebenso erfolgreich im produktiven Einsatz, wie die anderen Arbeitsergebnisse weiterer Teil-Projekte. Neben seiner fachlichen Qualifikation ist sein besonderer Einsatz zur Einhaltung projektkritischer Termine, sein integratives Wesen und seine planerische Fähigkeit hervorzuheben. Da wir in der Vergangenheit bereits mehrere Teil-Projekte zu einem erfolgreichen Abschluß geführt haben, würden wir uns auch in Zukunft über eine Zusammenarbeit freuen."
— Projekt BUK-Extranet, 08/04 - 08/05
Referenz durch IT-Projektleiter, BUK-Extranet (90 MA, 33 Mitglieder), vom 11.08.05