ecommerce-admin-nextjs
Die Demo-Website funktioniert nicht mehr, da PlanetScale den kostenlosen Plan eingestellt hat.
Startdatum: 26. Juli 2023.
Beschreibung
Das E-Commerce-Admin-Dashboard mit Stripe-Integration ist eine robuste Webanwendung, die zur Optimierung und Verbesserung der Verwaltung einer E-Commerce-Website entwickelt wurde. Dieses umfassende Dashboard wurde unter Verwendung modernster Technologien wie Next JS, TypeScript, Tailwind CSS, Shadcn UI, Planet Scale, Prisma, Zustand, Clerk Auth, Cloudinary und Stripe entwickelt und bietet Administratoren ein leistungsstarkes Toolkit zur Überwachung und Optimierung verschiedener Aspekte des Online-Shop.
Hauptmerkmale
- Das Admin-Dashboard ermöglicht es den Administratoren der Website, Shop-Informationen zu erstellen, zu aktualisieren und zu löschen.
- Administratoren können die Werbetafeln oder Banner, die auf der Homepage der Website erscheinen, effizient verwalten. Sie können Werbebanner hochladen, aktualisieren und entfernen, um Kunden anzulocken und laufende Angebote oder Verkäufe hervorzuheben.
- Mit dem Admin-Dashboard wird die Verwaltung von Produktkategorien, Größen und Farben zum Kinderspiel. Administratoren können Kategorien, Größen und Farben hinzufügen, bearbeiten oder löschen, sodass die Website Produkte effizient organisieren und anzeigen kann.
- Um eine reibungslose Kommunikation zwischen der Front-End-Webanwendung und dem Back-End zu ermöglichen, enthält das Dashboard API-Routen. Dadurch wird sichergestellt, dass Produktinformationen nahtlos abgerufen und auf der kundenorientierten Website angezeigt werden.
- Das Admin-Dashboard nutzt die Clerk-Authentifizierung zur sicheren Authentifizierung und stellt so sicher, dass nur autorisiertes Personal auf vertrauliche Informationen zugreifen und diese verwalten kann.
- Durch die Integration von Planet Scale und Prisma profitiert die Anwendung von einer robusten und skalierbaren Datenbank, die in der Lage ist, wachsende Produktbestände und steigenden Website-Verkehr zu bewältigen.
- Das Herzstück jeder E-Commerce-Website sind ihre Produktverwaltungsfunktionen. Das Admin-Dashboard ermöglicht es Administratoren, neue Produkte hinzuzufügen, bestehende zu aktualisieren, nicht vorrätige Produkte zu archivieren, Produkte als empfohlene Produkte zu markieren und Produkte zu entfernen, die nicht mehr verfügbar sind. Sie können Produktdetails wie Name, Kategorie, Preis, Bilder und andere produktspezifische Attribute festlegen.
- Eine effiziente Auftragsverwaltung ist für jede E-Commerce-Website von entscheidender Bedeutung. Das Dashboard bietet umfassende Tools zur Anzeige, Bearbeitung und Verwaltung eingehender Bestellungen.
- Integrieren Sie Stripe nahtlos als Zahlungsgateway und ermöglichen Sie Kunden sichere und bequeme Online-Zahlungen. Administratoren können den Transaktionsverlauf einsehen und den Käufern ein nahtloses Checkout-Erlebnis bieten.
Testen des Projekts
Um das Projekt zu testen, laden Sie die ZIP-Datei herunter und öffnen Sie sie im Editor Ihrer Wahl. Führen Sie dann npm install im Terminal aus, um die Abhängigkeiten zu installieren.
Nach der Installation der erforderlichen Abhängigkeiten müssen Sie eine .env Datei im Stammverzeichnis Ihres Projektordners erstellen. Die erforderlichen Umgebungsvariablen lauten wie folgt.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
DATABASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
FRONTEND_STORE_URL=
STRIPE_WEBHOOK_SECRET=
Befolgen Sie die Schritte aus der offiziellen Dokumentation für Clerk, Planet Scale, Cloudinary und Stripe, um die Werte für die Umgebungsvariable zu erhalten. Nachdem Sie die oben genannten Schritte ausgeführt haben, führen Sie npm run dev aus, um das Projekt zu testen.
Wenn Sie sich nicht die ganze Mühe machen möchten, können Sie jederzeit die Demo-Website für dieses Projekt testen.
