// projekt ·
Full-Stack-E-Commerce-Plattform
Ein Shop, um langweiligen Checkout-State zu lernen, ohne ihn kaputt zu machen. Stack: Angular, Hasura GraphQL, TypeScript.
Rolle: Privatprojekt · Jahr: 2023 - 2024 · Status: ausgeliefert
kurz: Shoply ist ein Angular-Shop über einem Hasura-GraphQL-Katalog. Der Server übernimmt Suche, Filter, Sortierung und Paginierung, Warenkorb und Wunschliste leben im Browser. Die meiste Arbeit steckt in Client-State, der Reloads, veraltete Daten und schlechte Eingaben übersteht.
Problem
Ein Shop wirkt einfach, bis sich der State stapelt. Katalogfilter, Warenkorb, Wunschliste und ein mehrstufiger Checkout müssen zueinander passen und einen Reload überleben. Ich habe Shoply gebaut, um diesen State sorgfältig durchzuarbeiten statt ihn wegzuwinken.
Rahmenbedingungen
- Der Katalog ist entfernt und nur lesbar. Produkte kommen von einer gehosteten Hasura-Instanz. Das Frontend schreibt nie hinein und kann nicht annehmen, dass ein Produkt aus dem Warenkorb von letzter Woche noch denselben Bestand hat.
- Browser-Speicher ist unzuverlässige Eingabe. Warenkorb und Wunschliste liegen in
localStorage, wo alles landen kann: ein altes Format, ein von Hand geänderter Wert, halb geschriebenes JSON. - Tests dürfen nicht vom gehosteten Backend abhängen. Wenn Hasura ausfällt, muss die Testsuite trotzdem durchlaufen.
Entscheidungen
- Katalogabfragen auf dem Server. Suche, Kategorie- und Preisfilter, Sortierung und Paginierung stecken in einer GraphQL-Abfrage, der Browser bekommt nur die Seite, die er zeigt.
- Signals für State. Warenkorb, Wunschliste und Checkout sind Signal-basierte Services mit berechneten Summen.
- Ein versioniertes Warenkorbformat. Der gespeicherte Warenkorb trägt ein
version-Feld. Beim Laden wird jede Position validiert, Mengen werden auf den verfügbaren Bestand begrenzt, und Warenkörbe im älteren Format werden migriert statt verworfen. - Lazy Loading. Jede Route lädt lazy, und die Apollo-Provider kommen erst mit dem Katalog, also bleibt GraphQL-Code aus der initialen Shell.
- Der Checkout ist ein Demo-Ablauf. Lieferdaten werden validiert, und der Zahlungsschritt bietet Karte, PayPal und Überweisung als Demo-Optionen. Es wird nichts bezahlt.
Ergebnis
Die Jest-Suite erzwingt 100 % Abdeckung für Branches, Funktionen, Zeilen und Statements. Cypress deckt Startseite, Katalog, Warenkorb und Wunschliste gegen deterministische GraphQL-Fixtures ab, die End-to-End-Tests berühren den gehosteten Dienst also nie. Der Shop läuft live auf Netlify.