Webshop für Essenslieferdienst

Um mich mit der React-Library besser vertraut zu machen, erstellte ich dieses Übungsprojekt.

Frontend:

Das von Lieferando inspirierte Frontend verwendet React mit React Router und Redux(-Toolkit). Als CSS-Framework verwendete ich Tailwind. Mit diesem definierte ich Primär- und Sekundärfarben, wodurch die Seite schnell farblich angepasst werden kann. Die Startseite zeigt in Blender erstellte 3D-Elemente mit React Three Fiber und der Drei-Bibliothek. Die Animation des Einkaufswagen-Buttons erstellte ich in Rive, die Karte nutzt Leaflet.js und OSM. Für Unit- und Integration-Tests verwendete ich Vitest und React Testing Library. E2E-Tests schrieb ich in Cypress.

Responsive Ansichten:

Lowpoly Assets (nur der Burger schaffte es in die finale Version):

Hier ein kleiner Einblick in die Struktur der React-Components:

Lighthouse-Ergebnis (Performance nicht getestet, da lokal gehostet wurde und ich ua keinen Einfluss auf Bildformate hatte):

Backend:

Als Backend verwendete ich einen Apollo-Server, der eine GraphQL-API bereitstellt.

Daten:

Um die Testdaten nicht selbt generieren zu müssen, schrieb ich ein kleines Python-Programm, das die von Lieferando bereitgestellten Restaurantdaten automatisch abfragt und speichert. Ich konnte mich nicht zurückhalten und erstellte kleine Plots der Restauranttypen in den Wiener Gemeindebezirken:

Daraus ist zB ersichtlich, dass die Wiener Pizza und Burger lieben und dass es in Hietzing weniger asiatische Restaurants gibt als in anderen (abgebildeten) Bezirken.