![ein Screenshot der Landingpage des Webshops](https://cdn.sanity.io/images/q5a4ie5j/production/f2f36d6f1e6346e58ce9ced17ce6d87eaa2377fc-1313x966.png?w=1200&fit=clip&auto=format)
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:
![die Landingpage der App](https://cdn.sanity.io/images/q5a4ie5j/production/7fbba68925624b6149063dd9513f698020364016-1515x629.png?w=1515&h=629&auto=format)
![die Restaurants-Ansicht](https://cdn.sanity.io/images/q5a4ie5j/production/5c3ea10d4441522f221192b4ffd7ee4ddffdc166-1515x629.png?w=1515&h=629&auto=format)
![die Restaurant-Ansicht](https://cdn.sanity.io/images/q5a4ie5j/production/9c357ab4e120bf1bb07dea3713de98f08821dd1c-1515x629.png?w=1515&h=629&auto=format)
![der Einkaufswagen](https://cdn.sanity.io/images/q5a4ie5j/production/ad3b1e4776316990af887cf7e7fd0fb2b66eb8cd-1515x629.png?w=1515&h=629&auto=format)
![die Kartenansicht](https://cdn.sanity.io/images/q5a4ie5j/production/f56a81b77c9c8a9262ec0584783bca9cf55b539f-1515x629.png?w=1515&h=629&auto=format)
Lowpoly Assets (nur der Burger schaffte es in die finale Version):
![Lowpoly Assets der Webseite: ein Burger und eine Pizza](https://cdn.sanity.io/images/q5a4ie5j/production/723f9c1ac4761a6a51c0017a8bf73e5c798b7857-1200x675.png?w=1200&h=675&auto=format)
Hier ein kleiner Einblick in die Struktur der React-Components:
![eine Liste der React Components](https://cdn.sanity.io/images/q5a4ie5j/production/a9ed03f19f5d66eb3a595000fa190f5542910008-507x789.png?w=507&h=789&auto=format)
Lighthouse-Ergebnis (Performance nicht getestet, da lokal gehostet wurde und ich ua keinen Einfluss auf Bildformate hatte):
![Lighthouse-Ergebnis mit 3 mal 100 Punkten](https://cdn.sanity.io/images/q5a4ie5j/production/09398c96843466c6ac2cd6c3bdd3aa026fbf6736-609x222.png?w=609&h=222&auto=format)
Backend:
Als Backend verwendete ich einen Apollo-Server, der eine GraphQL-API bereitstellt.
![eine Abfrage der GraphQL-API](https://cdn.sanity.io/images/q5a4ie5j/production/845d73754585be081a79e958f5bed77a9fd29628-1599x784.png?w=1599&h=784&auto=format)
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:
![Restauranttypen in den Wiener Gemeindebezirken](https://cdn.sanity.io/images/q5a4ie5j/production/0bae3decdb7c03eb6c42ae440f27915c92b73f41-1500x805.png?w=1500&h=805&auto=format)
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.