nextjs ecommerce

Die App ist live und läuft unter

https://nextjs-ecommerce-typescript.vercel.app/

• Vergessen Sie nicht, einen Stern zu hinterlassen! :) :)

Autoren

• Abdullah Moiz

Merkmale

NOTIZ

• Das Admin-Dashboard ist für Sie nur zugänglich, wenn Sie es klonen. Sie können sich nicht für ein Admin-Konto anmelden. Ich habe Dummy-Produkte und -Kategorien hinzugefügt

Mehrbenutzer-Anmeldesystem

• Anmelden / Anmelden ✔
• Passwort vergessen ✔
• JWT-Validierung bei jeder autorisierten Anfrage ✔
• Autorisierungsvalidierung für Admin-Zugriff und Kundenzugriff ✔

ADMIN-PANEL

• Fügen Sie ein Produkt hinzu ✔
• Produkt ansehen ✔
• Ein Produkt löschen ✔
• Produkt aktualisieren ✔
• Fügen Sie eine Kategorie hinzu ✔
• Kategorie anzeigen (Datentabellen) ✔
• Kategorie aktualisieren ✔
• Kategorie löschen ✔
• Kategorie durchsuchen Nach Namen ✔
• Produkt nach Kategorie suchen Name ✔
• Abwicklung der Auftragslieferung ✔
• Liste der ausstehenden Bestellungen ✔
• Abgeschlossene Bestellliste ✔

Kunde

• Produkt und Kategorie anzeigen ✔
• Produkt anzeigen, das sich auf eine bestimmte Kategorie bezieht ✔
• Details zu dynamischen Seiten mit Breadcamp anzeigen ✔
• Produkt in den Warenkorb legen ✔
• Produkt aus dem Warenkorb entfernen ✔
• Erhöhen Artikelmenge im Warenkorb verringern ✔ (WENN die vorrätige Produktmenge geringer ist als die Menge im Warenkorb, können Sie die Produktmenge nicht erhöhen.)
• Benachrichtigung, wenn die vorrätige Menge nicht verfügbar ist ✔
• Lieblingsprodukt als Lesezeichen speichern ✔
• Produkt aus Lesezeichen entfernen ✔
• Bestellen Sie ein Produkt ✔
• Nach dem Erstellen einer Bestellung wird das Produkt, das sich im Warenkorb des aktuellen Benutzers befindet, gelöscht ✔
• Bestellstatus verfolgen ✔
• Bestelldetails anzeigen ✔

Notiz

Mit der Zeit werden weitere Funktionen hinzugefügt

Techn

• Nextjs 13
• Typoskript
• Rückenwind CSS
• Redux-Toolkit
• Joi-Validierung
• mongoDB
• SWR-Hooks zum Abrufen der API

Umgebungsvariablen

Um dieses Projekt auszuführen, müssen Sie die folgenden Umgebungsvariablen zu Ihrer .env-Datei hinzufügen

DB_URI = Ihre MongoDB-URL

JWT_SECREAT = Ihr benutzerdefinierter JWT_SECREAT-Schlüssel

NEXT_PUBLIC_API_BASE_URL = Basis-URL für localhost => http://localhost:3000

Installation

Installieren Sie mein Projekt mit npm

  npm install
  npm run dev (for development server)
  npm run build (for Production)
  npm run preview (To View Production Server )

Screenshots

Admin-Dashboard

Administrator Produkt hinzufügen

Admin Kategorie hinzufügen

Kategorie der Admin-Ansicht

Admin Produkt anzeigen

Admin-Suchprodukt mit Kategoriename

Admin-Suchkategorie mit Kategoriename

Liste der ausstehenden Bestellungen

Abgeschlossene Bestellliste

Landingpage

Produkt einer bestimmten Kategorie mit Dynamic Breadcamp anzeigen

Produkt im Detail mit Dynamic Breadcamp anzeigen

Warenkorbseite

Benachrichtigung, wenn die Artikelmenge nicht auf Lager ist

Lieblingsprodukte

Lieblingsprodukte löschen

Suchen Sie nach Lieblingsprodukten mit dem Produktnamen

Bestellen Sie ein Produkt

Bestellungen verfolgen

Überprüfen Sie die Bestelldetails