01
Kontext und Problem
Yofeii Délices verkauft Gewürzmischungen und Marinaden. Die Marke wollte eine Website, auf der die Kundschaft Produkte entdeckt, einen Warenkorb füllt und online bezahlt.
Außerdem brauchte sie ein internes Werkzeug, um ein Produkt hinzuzufügen, eine Bestellung zu verfolgen oder ein Banner zu ändern, ohne einen Entwickler zu fragen.
02
Meine Rolle
Ich habe das Front-End der Website und des Back-Office entwickelt. Die Laravel-API wurde parallel von einem Back-End-Entwickler gebaut, mit dem ich mich bei jeder Lieferung abgestimmt habe.
- 01E-Commerce-Website
- 02Back-Office
- 03API-Anbindung
- 04Wiederverwendbare Komponenten
03
Vorgehen
Auf der Website durchsucht die Kundschaft den Katalog, öffnet eine Produktseite, füllt den Warenkorb und bezahlt mit Stripe. Der Warenkorb bleibt erhalten, wenn man die Seite schließt.
Im Back-Office verwaltet das Team Produkte, Lagerbestand, Bestellungen und Kundschaft und ändert die Banner der Startseite. Ein Dashboard fasst die Verkäufe zusammen.
Screenshot 1 von 6
04
Technische Entscheidungen
Einige Entscheidungen haben mir die Arbeit mit einer API erleichtert, die sich gleichzeitig mit dem Front-End weiterentwickelte.
- Astro
- React
- TypeScript
- Tailwind CSS
- TanStack Query
- Stripe
- Laravel-API
01Ein immer aktueller Katalog
Anfangs erschien ein im Back-Office hinzugefügtes Produkt nicht auf der Website. Ich habe die Seiten bei jedem Besuch erzeugen lassen, damit Produkte und Preise immer aktuell sind.
02API-Aufrufe an einer Stelle
Alle Anfragen laufen über dieselbe Funktion. Wenn sich die API änderte, musste ich nur eine Datei anpassen.
03Wiederverwendbare Komponenten
Farben, helles und dunkles Design, Buttons und Felder für alle Bildschirme. So konnte ich das Design erneuern, ohne die Seiten neu zu schreiben.
04Melden, was mir auffiel
Beim Testen der Zahlung sind mir zwei Punkte aufgefallen, die serverseitig abgesichert werden mussten. Ich habe sie dem Back-End-Entwickler schriftlich erklärt.
05
Ergebnisse
Website und Back-Office sind online. Das Team verwaltet Katalog, Bestellungen und Banner selbstständig.
- Bildschirme im Back-Office
- 30+
- Wochen Entwicklung für das Back-Office
- 7
06
Was ich gelernt habe
Die Arbeit mit einer API, die sich ändert, braucht Organisation: Alle Aufrufe an einer Stelle zu bündeln, hat mir viele Korrekturen erspart.
Ich hätte von Anfang an Tests schreiben sollen, vor allem für ein Werkzeug mit Zahlungen. Beim nächsten Projekt mache ich das.
