Mein MVP-Shopsystem

Link zum Projekt: Zum Projekt

Hallo Leute,

in diesem Beitrag möchte ich euch von meinem aktuellen Projekt erzählen. Es handelt sich um ein MVP-Shop-System.
MVP (Minimum Viable Product) bedeutet „minimal brauchbares Produkt“. Dieser Begriff stammt aus der Softwareentwicklung und beschreibt ein Produkt, das nur die notwendigsten Kernfunktionen enthält, um eine schnelle und kostengünstige Entwicklung zu ermöglichen.

Für mich war diese Art von Projekt ideal, da ein MVP-Shop-System dennoch genügend Themen bietet, mit denen ich mich intensiv beschäftigen kann.

Die Planung

Der erste Schritt bestand darin, die Kernfunktionen zu ermitteln. Ich habe sie für mich wie folgt definiert:

1. Userauthentifizierung: Registrierung, Login und Logout

2. Backend für Admin: Produkte, Bestellungen, Kunden

3. Verkaufsprozess:
   a. Warenkorb
   b. Checkout
   c. Zahlungsart
   d. Bestellbestätigung

4. UI/UX Frontend:
   a. Navigation
   b. Responsive Design
   c. Error-Handling

5. Technische Anforderungen:
   a. Backend-API mit Laravel 12 und Sanctum
   b. Frontend mit React
   c. Datenmodell und Beziehungen
   d. Deployment mit Laravel Forge

Das Ziel war nicht, ein fertiges Shopsystem zu entwickeln, sondern ein anspruchsvolles Projekt mit vielen unterschiedlichen Themenfeldern umzusetzen. Da ich auch meine vorherigen Projekte mit Laravel 12 realisiert habe, war schnell klar, dass ich auch diesmal auf dieses Framework setze.
Allerdings wollte ich diesmal eine REST-API im Backend mit Laravel 12 entwickeln und das Frontend mit React umsetzen.

Die ersten Schritte

So weit, so gut – der Plan stand, und ich legte los.

Zuerst erstellte ich im Backend einen AuthController mit den Funktionen register, login und logout und definierte die entsprechenden Routen.
Diese Funktionen testete ich anschließend mit Postman: Ich konnte erfolgreich Benutzer registrieren, ein- und ausloggen. Bei der Registrierung erhält ein User einen Sanctum/Bearer-Token. Ohne diesen Token kann er keine durch die Middleware auth:sanctum geschützten Routen aufrufen.

Zwischen den Usern unterscheide ich normale Nutzer und Administratoren. Der Admin soll im Frontend einen eigenen Bereich erhalten, der über Protected Routes abgesichert wird.
Nach einiger Recherche fand ich eine passende Lösung und erstellte eine Komponente namens ProtectedRoute.jsx. Zuvor hatte ich in meinem React-Projekt react-router-dom (Version 7) installiert, um in der App.jsx die verschiedenen Routen zu definieren.

In der ProtectedRoute-Komponente wird die Rolle des Users abgefragt. Dafür musste der User im Frontend gespeichert werden. Hierfür erstellte ich eine AuthContext.jsx. Diese enthält – ähnlich wie das Backend – die Funktionen register, login und logout. Mithilfe des useContext-Hooks und der Speicherung des Users im LocalStorage des Webbrowsers ist dieser nun überall im Frontend verfügbar.
Damit konnte die ProtectedRoute den Adminbereich erfolgreich schützen.

Anschließend entwickelte ich die Komponenten und Views für den Adminbereich. Dazu gehören unter anderem Komponenten zum Erstellen, Bearbeiten und Anzeigen von Produkten. Beim Erstellen oder Editieren eines Produkts werden die Daten über ein Formular an das Backend gesendet und dort per Axios verarbeitet.
Dabei wird der Bearer-Token über Interceptors automatisch an jeden Request-Header angehängt.

Ein weiterer Meilenstein

Im Frontend gab es nun eine Startseite, eine Navigation, Testprodukte und einen geschützten Adminbereich. Zeit also für den nächsten Schritt: den Warenkorb (Cart).

Hier galt es mehrere Punkte zu berücksichtigen. Zunächst wollte ich, dass auch Gäste ihren Warenkorb speichern können. Dafür wird beim ersten Laden des Shops ein CartToken und ein leeres Array für den Warenkorb erzeugt und im LocalStorage gespeichert. Sobald sich der Gast registriert oder einloggt, wird dieser Warenkorb seiner User-ID zugeordnet und der vorherige Gast-Warenkorb gelöscht.

Die nächste Herausforderung bestand darin, den Warenkorb dauerhaft zu speichern – auch nach einem Neuladen der Seite oder nach einem Login/Logout. Nach kurzer Recherche entschied ich mich für Redux Toolkit. Mit der Funktion createSlice erstellte ich einen cartSlice und legte eine store.js an.
Dieser Store dient als zentrale Instanz der gesamten App, in der der cartSlice seinen Zustand abspeichert. Um Persistenz zu gewährleisten, wird der Warenkorb zusätzlich im LocalStorage hinterlegt.

Damit der Warenkorb im Frontend und Backend synchron bleibt, nutze ich die Funktionen createAsyncThunk und createListenerMiddleware. Der Listener reagiert, sobald ein Reducer im cartSlice ausgelöst wird – z. B. wenn über addItem ein Artikel in den Warenkorb gelegt wird.
In diesem Fall ruft der Listener die Funktion syncCart auf, wodurch das Backend den Warenkorb aktualisiert.

Das soll es zum Thema Warenkorb vorerst gewesen sein. Allein dazu ließe sich ein eigener Artikel schreiben.
Fazit: Gäste und eingeloggte User besitzen nun jeweils einen Warenkorb, in den Artikel gelegt oder entfernt werden können. Die Daten werden in Echtzeit mit dem Backend synchronisiert.

Als Nächstes stand das Thema Bezahlung an. Hier habe ich mich für Stripe und dessen Testumgebung entschieden. Mehr dazu folgt im nächsten Abschnitt.

Die Bezahlung der Artikel

Hier folgen demnächst weitere Informationen...

Bild aus dem Adminbereich:

Verwendete Hilfsmittel

Dokumentationen, das Internet und ChatGPT 5.