Struktur HTML / SCSS / JS

Um den Code in den Dateien kurz und übersichtlich zu halten, habe ich mich dazu entschieden das Ganze möglichst modular aufzubauen. Im HTML werden verschiedene Teile des Codes als Partials eingefügt und mit einem entsprechenden SCSS File gestylt.

Im obersten app.js file läuft ein switch Statement, welches basierend auf einem data-attribute das entsprechende Javascript Modul der Seite aus dem pages Verzeichnis aufruft. Diese Module holen sich wiederum Module für die verschiedenen Komponenten aus dem Components Ordner. Im Tools Verzeichnis befinden sich die verschieden Funktionen zum Filtern und Sortieren, Rendern, Querys und Mutations ausführen usw.

GraphQL / Backend

Bei der Aufgabenstellung erhielten wir eine Api, um die Daten der Immobilien abzurufen und abgeschickte Formulardaten zu speichern. Wir hatten jedoch auch die Wahl ein eigenes Backend zu erstellen. Meins entstand unabhängig von der Diplomarbeit, als ich ein wenig Abstand zu dieser brauchte. So hatte ich ein laufendes Backend mit einer Verbindung zu meiner Datenbank, welches ich in diese Arbeit übertragen konnte.

Beim Seitenaufruf werden alle Immobilien von der Datenbank geholt und als Array in der Sessionstorage gespeichert. Da mein eigenes Backend erst später entstanden ist, habe ich es so gelöst. Sonst hätte ich die Sortierung, Filterung oder auch die Pagination mit Graphql umgesetzt. Informationen wie z.B der Detailbeschrieb oder die Koordinaten werden bei Bedarf abgefragt. Sortiert werden die Immobilien nach dem Datenbankeintrag created_at. Für die aktuellsten Immobilien auf der Detailseite erstellte ich zudem ein Query, um eine limitierte Anzahl Immobilien abzurufen.

Suche / Filterung / Sortierung

Bei einer Suche erstelle ich ein neues Array mit den gefilterten und sortierten Immobilien. Dieses Array wird ebenfalls in der Sessionstorage gespeichert. Um die Suchresultate bei der Rückkehr zur Startseite nicht zu verlieren, kontrolliere ich ob ein gefiltertes Array vorhanden ist. Vor dem rendern wird geprüft, ob die Immobilien als Liste oder Grid angezeigt werden müssen (Sessionstorage Eintrag), wie breit der Screen ist (wie muss das Array aufgeteilt werden), hat die Url eine Immobilien id (Rückkehr von Detailseite), auf welcher Pagination Seite ist diese id und ob die url einen load=all Parameter hat (Link von Aktuellste Objekte)

Slider

Gemäss der Anzahl Bilder der Immobilie, werden Thumbs, sowie ein Container mit Bildern für die Hauptansicht erstellt. Im Container werden die Bilder nebeneinander platziert und mittels transform:translateX() in Position geschoben. Wieviel und wohin verschoben werden muss, wird mit einer data-id auf dem Container berechnet.

Bilder

Bei den Bildern testete ich verschiedene Lösungsansätze, wie das npm Paket "resposive-img" oder auch die Bilder selber in verschiedenen Grössen zu erstellen. Schlussendlich entschied ich mich jedoch für den CDN imagekit.io, da ich damit den besten pagespeed score erhielt und ganz einfach im srcset die benötigten Grössen angeben konnte. Die Bilder sind in einem unabhängigen Ordner auf meinem Hosting gespeichert, welcher mit imagekit.io verbunden ist.