Refactoring Login & Register für EMPPLAN ( React + Typescript )

Refactoring Login & Register für EMPPLAN ( React + Typescript )
Photo by Daniel Korpai / Unsplash

Für unseren langfristigen Kunden EMPPLAN haben wir den Bereich Login & Registrierung überarbeitet.

Ziel war es neben den Standard Funktionen Login / Passwort zurücksetzen auch die neue Funktion Registrierung dort zu implementieren. Sowie auf großen Bildschirmen einen Teil der Fläche dem Marketing zur Verfügung zu stellen. Um dort Informationen und neue Produkte den Nutzern zu Präsentieren.

Das UI wurde in Material-Design gestaltet. So dass es Responsive ist und 50% des Screens, auf großen Bildschirmen, durch das Marketing Dynamisch mit Inhalte belegt werden kann um Werbebotschaften und call to actions dem Nutzer zu Präsentieren.

Login auf großem Screen - Breakpoint lg und größer 

React + Typescript + Serverside Rendering

Der alte Login Bereich wurde ebenfalls in React implementiert. Für den neuen Login mit einem Bereich für die Registrierung neuer Nutzer, haben wir uns wieder für React und für Typescript entschieden.

PageSpeed Insights Score

Durch den Rewrite des bisherigen Codes konnte der Pagespeed Insights Score Mobile um 20 Punkte verbessert werden so das die Anmeldeseite nun einen score von 95 auf mobile und 100 auf Desktop erreicht hat.

Da sich die Nutzer in EMPPLAN mehrmals täglich einloggen und dies auf den Unterschiedlichsten Geräten und in den unterschiedlichsten Situationen machen ist es wichtig das die Login Seite schnell lädt, einfach zu handhaben ist und auch unterwegs mit schlechter Verbindung eine akzeptable Geschwindigkeit besitzt.

Der alte Login Bereich hatte einen Score von 75 auf Mobile und 99 Punkte auf dem Desktop. Durch diese kleine Verbesserung konnten wir EMPPLAN helfen den Vorsprung zu den Mitbewerbern weiterhin zu vergrößern.

Dokumentationen & Anleitung sowie Integration in Build Prozess

Damit die Crew von EMPPLAN nicht im Regen steht falls diese etwas am Login ändern möchte haben wir wie immer für unsere Kunden, eine Aussagekräftige Readme im Markdown Format erstellt welche alle nötigen Technischen Details sowie Architektonische Besonderheiten enthält. So ist es auch den Entwicklern von EMPPLAN möglich sich schnell in unsere Lösung einzudenken sollte etwas daran geändert werden oder auch ein Problem entstehen was zeitnah behoben werden muss.

Login auf Mobilgeräte - Breakpoint sm und kleiner