Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL, 2023
Verwenden Sie für DEMO Stripe-Testkarten
Dies ist ein Repository für ein Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL
Hauptmerkmale:
- Wir werden die Shadcn-Benutzeroberfläche für den Administrator verwenden!
- Unser Admin-Dashboard wird sowohl als CMS, Admin und API dienen!
- Sie können mehrere Anbieter/Shops über dieses einzige CMS steuern! (Sie können beispielsweise ein „Schuhgeschäft“, ein „Laptopgeschäft“ und ein „Anzuggeschäft“ haben und unser CMS generiert API-Routen für alle einzeln!)
- Sie können Kategorien erstellen, aktualisieren und löschen!
- Sie können Produkte erstellen, aktualisieren und löschen!
- Sie können mehrere Bilder für Produkte hochladen und diese jederzeit ändern!
- Sie können Filter wie „Farbe“ und „Größe“ erstellen, aktualisieren und löschen und diese dann im Erstellungsformular „Produkt“ zuordnen.
- Sie können „Billboards“ erstellen, aktualisieren und löschen, bei denen es sich um große Texte oben auf der Seite handelt. Sie können sie einer einzelnen Kategorie zuordnen oder sie eigenständig verwenden (unser Administrator generiert für alle diese Fälle eine API!)
- Sie können alle Kategorien, Produkte, Größen, Farben und Werbetafeln mit integrierter Paginierung durchsuchen!
- Sie können steuern, welche Produkte „vorgestellt“ werden, damit sie auf der Startseite angezeigt werden!
- Sie können Ihre Bestellungen, Verkäufe usw. sehen.
- Sie können Diagramme Ihrer Einnahmen usw. sehen.
- Sie lernen die Sachbearbeiter-Authentifizierung!
- Auftragserstellung
- Streifenkasse
- Stripe-Webhooks
- MySQL + Prisma + PlanetScale
Voraussetzungen
Knotenversion 14.x
Klonen des Repositorys
git clone https://github.com/vishwavinoth/dropship-admin.git
Pakete installieren
Richten Sie die .env-Datei ein
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 = /
# This was inserted by `prisma init` :
# Environment variables declared in this file are automatically made available to Prisma .
# See the documentation for more detail : https : / / pris . ly / d / prisma - schema #accessing - environment - variables - from - the - schema
# Prisma supports the native connection string format for PostgreSQL , MySQL , SQLite , SQL Server , MongoDB and CockroachDB .
# See the documentation for all the connection string options : https : / / pris . ly / d / connection - strings
DATABASE_URL = ''
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = ""
STRIPE_API_KEY =
FRONTEND_STORE_URL = http : //localhost:3001
STRIPE_WEBHOOK_SECRET =
Stellen Sie eine Verbindung zu PlanetScale her und drücken Sie Prisma
npx prisma generate
npx prisma db push
Starten Sie die App
Verfügbare Befehle
Ausführen von Befehlen mit npm npm run [command]
Befehl | Beschreibung |
---|
dev | Startet eine Entwicklungsinstanz der App |