OnlineshopsE-Commerce-Plattform

Fortschrittliche E-Commerce-Plattform

Ein individueller Onlineshop mit Produktverwaltung, schneller Suche, Kundenkonten, mehrstufigem Checkout und vollständigem Bestell-Dashboard — gebaut mit Next.js, TypeScript und PostgreSQL.

Projektdaten

Projektart: E-Commerce-Plattform
Kategorie: Onlineshops
Branche: Handel und E-Commerce
Technologie-Stack: Next.js
React
TypeScript
PostgreSQL
Prisma
Tailwind CSS
Meilisearch
Redis
Stripe

Produktübersicht des Shops mit Kategoriefiltern, Preisspanne und acht Produktkarten

Überblick

Dieses Demonstrationsprojekt zeigt, wie Saad eine individuelle E-Commerce-Plattform für eine Marke umsetzt, der ein Baukasten-Shop zu eng geworden ist. Es deckt den gesamten Weg der Kundschaft ab — Stöbern, Filtern, Produktseite, Warenkorb und Checkout — und alles, was das Shop-Team im Hintergrund braucht: Produkte und Varianten, Lagerbestand, Bestellungen, Retouren und Rabatte.

Der Shop ist mehrsprachig und unterstützt Arabisch von rechts nach links, sodass derselbe Katalog mehrere Märkte bedienen kann. Jeder Bildschirm ist zuerst für das Smartphone gestaltet, weil dort die meisten Shopbesuche stattfinden.

Die Herausforderung

Wachsende Shops stoßen oft an die Grenzen gehosteter Shopsysteme: langsame Kategorieseiten, ein Checkout, der sich nicht anpassen lässt, Gebühren auf jeden Verkauf und Produktdaten, die über Plug-ins verstreut sind. Eine zweite Sprache oder eine lokale Zahlungsart wird zum Workaround statt zur Funktion, und das Team verwaltet Bestellungen am Ende in Tabellen neben dem Shop.

Die Lösung

Das Konzept ersetzt das Flickwerk durch eine Plattform, die dem Unternehmen selbst gehört. Produkte, Varianten, Preise und Bestand liegen in einer relationalen Datenbank. Kategorie- und Suchseiten werden serverseitig gerendert, laden schnell und bleiben indexierbar. Der Checkout ist ein klarer Ablauf in vier Schritten, bei dem der Zahlungsanbieter die Kartenzahlung abwickelt, und die Verwaltung bündelt Bestellungen, Versandstatus, Erstattungen und Warnungen bei niedrigem Bestand an einem Ort.

Wichtigste Funktionen

Produktkatalog mit Varianten, Bildern, Bestand und Kategorien
Schnelle Suche und Filter nach Preis, Größe, Farbe und Verfügbarkeit
Kundenkonten mit Bestellhistorie, Adressen und Merkliste
Checkout in vier Schritten mit Karte, iDEAL und Wallets
Rabattcodes, Grenze für kostenlosen Versand und Mehrwertsteuer
Bestell-Dashboard mit Zahlungs- und Versandstatus
Bestand je Variante und Warnungen bei niedrigem Bestand
Mehrsprachiger Shop mit Unterstützung für Arabisch (RTL)

Für wen

Marken, denen ein Baukasten-Shop zu eng geworden ist
Shops, die in mehreren Sprachen oder Ländern verkaufen
Unternehmen, die Shop und Daten selbst besitzen wollen
Teams, die Bestellungen und Bestand heute noch manuell pflegen

Technisches Vorgehen

Next.js App Router mit React Server Components rendert den Katalog; interaktive Teile wie Warenkorb und Filter sind kleine Client-Komponenten. Prisma modelliert Produkte, Varianten, Bestellungen und Kunden in PostgreSQL. Die Suche läuft über Meilisearch und wird per Hintergrundjobs synchronisiert; Redis cacht häufige Katalogabfragen. Zahlungen laufen über den gehosteten Checkout des Anbieters mit signierten Webhooks, sodass Kartendaten den Shop-Server nie erreichen.

Frontend: Next.js
React
TypeScript
Tailwind CSS
Backend: Prisma
Meilisearch
Datenbank: PostgreSQL
Redis
Integrationen: Stripe
Integrationen: StripeMollieiDEALSMTP

Screens

Kundenoberfläche

Zahlungsschritt mit Karte, iDEAL und Wallets neben der Bestellübersicht

Verwaltungsoberfläche

Shop-Verwaltung mit heutigen Bestellungen, Umsatzdiagramm und Versandstatus

Mobile und responsive Ansichten

Drei Smartphone-Bildschirme des Shops: Produktliste, Produktseite und Warenkorb

Leistungen hinter diesem Projekt

Die Arbeit in dieser Fallstudie entspricht diesen Leistungen. Jede Seite erklärt Umfang, Ablauf und was Sie erhalten.

Fragen zu dieser Art von Projekt

Ist das ein echter Kundenshop?

Nein. Es ist ein Demonstrationsprojekt: Die Bildschirme sind detaillierte Entwürfe mit Beispielprodukten und -bestellungen. Sie zeigen Aufbau, Funktionen und technisches Vorgehen, mit denen Saad einen individuellen Onlineshop entwickelt.

Welche Zahlungsarten kann ein individueller Shop anbieten?

Die meisten Anbieter stellen einen gehosteten Checkout und Webhooks bereit — zum Beispiel Stripe oder Mollie für Karten, iDEAL und Wallets. Welche Lösung passt, hängt von Land, Währung und Gebühren ab und wird in der Anforderungsanalyse festgelegt.

Kann der Shop gleichzeitig auf Deutsch, Englisch und Arabisch laufen?

Ja. Jede Sprache erhält eigene URLs und Metadaten, und arabische Seiten nutzen ein echtes Rechts-nach-links-Layout statt einer gespiegelten Kopie des Designs.

Sie möchten ein ähnliches Projekt?

Sagen Sie Saad, was Sie brauchen. Sie erhalten einen klaren Umfang, einen Plan in Phasen und direkten Kontakt zum Entwickler – ohne Zwischenhändler.

Direkte, klare Kommunikation
Sie sprechen direkt mit dem Ingenieur, der den Code schreibt — ohne Vertrieb dazwischen, ohne vage Termine.
Vollständig individuell
Keine fertigen WordPress-Themes oder kopierter Code — jede Zeile wird für die Anforderungen und Größe Ihres Unternehmens geschrieben.
Von der Idee zum Launch
Hilfe beim Ausformulieren der Spezifikation und bei der Umsetzung einer groben Idee in ein echtes, nutzbares Produkt.

Das Anfrageformular öffnet sich mit dieser Projektart bereits ausgewählt.