Startseite>Programmierbezogen>AI-Quellcode
Herunterladen

Erstellen Sie die NextJS -E -Commerce -Website wie Amazon

  • TECH: NEXTJS 13, NEXT AUTH 4 4
  • UI: Tailwind, Diagramm.js, React-Chartjs
  • DB: MongoDB, Mongoose
  • Zahlung: Paypal, Streifen
  • Content Hosting: Cloudinary
  • Bereitstellung: Github, Vercel, MongoDB Atlas

Nächster Amazona

Ressourcen

  • YouTube Video: https://youtu.be/_ibilr5mrza
  • Demo-Website: https://next-tailwind-amazona.vercel.app
  • Quellcode: https://github.com/basir/next-tailwind-amazona
  • Voller Kurs: Basir.Hinkific.com

Was Sie lernen werden

  • NEXTJS -Grundlagen wie das Einrichten von Projekten, das Navigieren zwischen Seiten und Datenabrufen
  • NEXTJS Erweiterte Themen wie dynamisches Routing, Bildoptimierung, SSG und SSR
  • Tailwind CSS Framework zum Erstellen reaktionsschneller Website mit benutzerdefiniertem Thema, Animation und Karussell
  • Reactjs einschließlich Zersetzung von Komponenten, Kontext -API und Hooks
  • Als nächstes Auth -Paket, um Kunden und Administratorbenutzer zu authentifizieren
  • MongoDB und Mongoose, um Daten wie Produkte, Bestellungen und Benutzer zu speichern und abzurufen
  • PayPal Developer -API zur Online -Zahlung
  • Stellen Sie Webanwendungen auf Servern wie Vercel und Netlify bereit

Voller Kurs

Erhalten Sie diesen Kurs um 90% Rabatt auf Denkweise: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=save90

Vor Ort laufen

  1. Klonrepo 

     $ git clone [email protected]:basir/next-tailwind-amazona.git
 $ cd next-tailwind-amazona

  2. Create .env -Datei

    • doppelte .env.example und benennen es in .env um

  3. Setup MongoDB

    • Lokale MongoDb
    • Installieren Sie es von hier aus
    • In .Env -Datei aktualisieren mongodb_uri = mongoDB: // localhost/Amazona
    • Oder Atlas Cloud MongoDB
    • Datenbank erstellen unter https://cloud.mongodb.com
    • In .Env-Datei aktualisieren mongodb_uri = mongoDB+srv: // your-db-connection

  4. Installieren und ausführen 

      npm install
  npm run dev

  5. Samendaten

    • Führen Sie dies auf Browser aus: http: // localhost: 5000/api/saat
    • Es gibt Admin -E -Mail und Passwort sowie 6 Beispielprodukte zurück

  6. Admin -Login

    • Führen Sie http: // localhost: 3000/Login aus
    • Geben Sie Admin -E -Mail und Passwort ein und klicken Sie auf Login

Unterricht

  1. Einführung
  2. Werkzeuge installieren
  3. Erstellen Sie die nächste App
  4. Veröffentlichen Sie zu GitHub
  5. Website -Layout erstellen
    1. Layoutkomponente erstellen
    2. Header hinzufügen
    3. Hauptabschnitt hinzufügen
    4. Fußzeile hinzufügen
    5. Fügen Sie Rückenwindklassen hinzu
  6. Produkte auflisten
    1. Daten hinzufügen.js
    2. Fügen Sie Bilder hinzu
    3. Produkte rendern
  7. Produktdetails erstellen
    1. Produktseite erstellen
    2. 3 Spalten erstellen
    3. Bild in der ersten Spalte anzeigen
    4. Produktinformationen in der zweiten Spalte anzeigen
    5. Anzeigen hinzufügen zur Karren Aktion in der dritten Spalte
    6. Styles hinzufügen
  8. Handle zum Warenkorb hinzufügen
    1. React Context definieren
    2. Definieren Sie die Wagenelemente Status
    3. Erstellen Sie addd zu cark action action
    4. Reduzierer hinzufügen
    5. Storeanbieter erstellen
    6. Handle zum Karren Taste hinzufügen
  9. Cart -Seite erstellen
    1. cart.js erstellen
    2. Verwenden Sie den Kontext, um Karren Elemente zu erhalten
    3. Listen Sie Elemente in Karren Elementen auf
    4. Nach dem Hinzufügen zum Warenkorb zum Einbinden auf den Warenkorbblieb umleiten
  10. Aktualisieren Sie die Menge im Karren
    1. Wählen Sie das Feld aus, um die Menge zu erhalten
    2. Handle -Option -Box -Änderung auswählen
  11. Speichern von Wagenelementen
    1. Installieren Sie das JS-Cookie-Paket
    2. Speichern und Retreiber in den Keksen speichern und Retresive
  12. Anmeldeformular erstellen
    1. React Hook -Formular einbauen
    2. Erstellen Sie Eingangsfelder
    3. Anmeldetaste hinzufügen
  13. Verbindung zu MongoDB herstellen
    1. Mongoose installieren
    2. MongoDB installieren oder MongoDB -Atlas verwenden
    3. Speichern Sie die Verbindungs -URL in .Env -Datei
    4. Erstellen Sie die DB -Utils -Datei
    5. Sample -Benutzer erstellen
  14. Erstellen Sie die Anmeldung API
    1. Installieren Sie als nächstes
    2. Erstellen Sie NextAuth.js
    3. Signin implementieren
    4. Verwenden Sie Signin in Anmeldebildform
  15. Benutzermenü hinzufügen
    1. Überprüfen Sie die Benutzerauthentifizierung
    2. Installieren Sie Headlessui
    3. Benutzermenü anzeigen
  16. Versandbildschirm erstellen
    1. Adressfelder anzeigen
    2. Adresse im Kontext speichern
  17. Bildschirm für Zahlungsmethoden erstellen
    1. Zahlungsmethoden Dispaly
    2. Speichern Sie die Zahlungsmethode im Kontext
  18. Saatgutprobenprodukte
    1. Erstellen Sie Produktmodell in Mongoose
    2. Setzen Sie Probenprodukte in MongoDB ein
  19. Lastprodukte MongoDb
    1. Laden Sie Produkte in der Homepage von MongoDB
    2. Laden Sie Produkte in die Produktseite von MongoDB
    3. verwenden
  20. Stellen Sie Platz für den Platzieren des Orts erstellen
    1. Versandadresse anzeigen
    2. Zahlungsmethode anzeigen
    3. Bestellelemente anzeigen
    4. Implement erstellen Ordnung
  21. Auftragsbildschirm erstellen
    1. Implementieren Sie die Backend -API für Bestelldetails
    2. Laden Sie Bestelldaten aus dem Backend aus
    3. Bestelldetails anzeigen
  22. Register -Bildschirm erstellen
    1. Anmelde -API hinzufügen
    2. Register -Seite erstellen
    3. Rufen Sie die API im Formular Senden an
  23. Bezahlungsbestellung nach Paypal
    1. Fügen Sie PayPal -Taste hinzu
    2. Zahlung übernehmen
    3. Backend -API erstellen
    4. Aktualisieren Sie den Bestellstatus
  24. Erstellen Sie den Bildschirm "Bestellverlauf"
    1. Erstellen Sie meine Bestell -API
    2. Erstellen Sie Bestellverlaufskomponente
    3. Rufen Sie Bestellungen ab und zeigen Sie sie an
  25. Veröffentlichen Sie auf Vercel
    1. Erstellen Sie das Vercel -Konto
    2. Verbindung zu GitHub herstellen
    3. Setzen Sie den nächsten Auth und MongoDB DB in Env VARs
    4. Code auf GitHub drücken
  26. Benutzerprofil aktualisieren
    1. Profilbildschirm erstellen
    2. Benutzerinformationen anzeigen
    3. Aktualisieren Sie die Benutzerinformationen von Aktualisierung
  27. Admin -Dashboard erstellen
    1. Admin -admin -Menü erstellen
    2. Das Dashboard -Bildschirm erstellen
    3. Implementieren Sie die API für die Adminzussing zusammen
  28. Listen Sie Bestellungen für Administrator auf
    1. Bestellungen erstellen
    2. Bestellungen API erstellen
    3. Verwenden Sie die API auf Seite
  29. Bestellung für Administrator liefern
    1. Erstellen Sie liefern API
    2. Deliver -Taste hinzufügen
    3. Implementieren Sie Klick -Handler
  30. Listen Sie Produkte für Administrator auf
    1. Produkte erstellen
    2. Produkte API erstellen
    3. Verwenden Sie die API auf Seite
  31. Produktbearbeitungsseite erstellen
    1. Seite bearbeiten
    2. API für Produkt erstellen
    3. Produktdaten in Form zeigen
  32. Produktbild hochladen
    1. Erstellen Sie Cloudyary -Konto
    2. Holen Sie sich Wolketasten
    3. Erstellen Sie Upload -API
    4. Laden Sie Dateien auf der Seite Bearbeiten hoch hoch
  33. Produkte erstellen und löschen
    1. Produktschaltfläche erstellen
    2. Bauen Sie eine neue Produkt -API auf
    3. Fügen Sie Handler zum Löschen hinzu
    4. Implementieren Sie die API löschen
  34. Listen Sie Benutzer für den Administrator auf
    1. Benutzerseite erstellen
    2. Benutzer -API erstellen
    3. Verwenden Sie die API auf Seite
  35. Karussell hinzufügen
    1. Erstellen Sie vorgestellte Produkte
    2. Futtermitteldaten
    3. beliebte Produkte zeigen
  36. Suchseite erstellen
    1. Filter erstellen
    2. Produkte auflisten
    3. Filter anzeigen
Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle