next e commerce

E-Commerce-Website

Demo: https://next-e-commerce-example.vercel.app/

Ein Beispiel für E-Commerce-Website, das mit Next.js erstellt wurde, das ich in 1 Woche als Selbstherausforderung gemacht habe. Es gibt einige Probleme, die ich später behandeln werde. Verwenden von Firebase als Backend.

Kontaktieren Sie mich · Melden Sie Fehler mit · Anforderungsfunktion

Inhaltsverzeichnis

• Über das Projekt
  • Gebaut mit
• Screenshots
  • Home (Nachrichten in)
  • Kategorien
  • Produkt
  • Wagen
  • Konto
• Erste Schritte
  • Voraussetzungen
  • Installation
• Probleme / Feature -Pläne
• Beitragen
• Fragen und Antworten
• Lizenz
• Kontakt

Über das Projekt

Ich sah ein UI -Design auf Dribbble von Anton Mikhaltsov. Und ich wollte dieses Design codieren. Also habe ich mich entschlossen, es zu einer voll funktionsfähigen Website mit NextJs zu machen, aber in nur einer Woche als Herausforderung selbst. Einige Probleme sind immer noch da, aber ich werde sie später überprüfen.

• Filter- und Sortierknöpfe funktionieren noch nicht.
• Die Website ist aufgrund der Zeit nicht reaktionsschnell 100, da es nicht genug war. Ich arbeite derzeit daran. Jetzt reagiert es.
• Firebase -Funktionen könnten besser sein
• Homepage (Nachrichten in) Karten haben keine Weiterleitungen. Sie sind nur Platzhalter.

Gebaut mit

• Reagieren
• NEXTJS
• Firebase
• Hakenform reagieren
• Date-Fns
• Sass

Screenshots

Neuigkeiten in

• Karten haben keine Links und sie sind statisch, sie sind nur Platzhalter.

Kategorien

Produkt

Wagen

Konto

Erste Schritte

Voraussetzungen

• Node.js Version 10.13 oder höher
• Git (ich habe 2.20.1 verwendet)

Installation

1. Sie müssen ein Firebase -Projekt erstellen

2. Klonen Sie das Repo und ändern Sie das Verzeichnis

git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce

3. Installieren Sie NPM -Pakete

npm install

4. Erstellen Sie Ihre .Env.Local-Datei im Root-Ordner (Next-e-Commerce) mit diesem Inhalt. Setzen Sie Ihre Feuerbasisschlüssel.

 NEXT_PUBLIC_FIREBASE_API_KEY = your-firebase-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID = your-firebase-project-id
NEXT_PUBLIC_FIREBASE_APP_ID = your-firebase-app-id

5. Im Entwicklungsmodus laufen

npm run dev

Themen - zukünftige Pläne

• Tasten filtern und sortieren
• Optimieren Sie Firestore -Queryfunktionen
• Auf der CART -Seite funktioniert die Schaltfläche Element nicht
• Die Website wird %100 reagieren
• Ersetzen Sie einige HTML -Tags durch semantische Tags

Beitragen

Beiträge machen die Open -Source -Community zu einem erstaunlichen Ort, um zu lernen, zu inspirieren und zu kreieren. Alle Beiträge, die Sie leisten, werden sehr geschätzt .

1. Geben Sie das Projekt auf
2. Erstellen Sie Ihre Funktionszweig ( git checkout -b feature/AmazingFeature ).
3. Bestimmen Sie Ihre Änderungen ( git commit -m 'Add some AmazingFeature' )
4. Push in den Zweig ( git push origin feature/AmazingFeature )
5. Öffnen Sie eine Pull -Anfrage

Fragen und a

• Frage: Ich habe ein Firebase -Projekt erstellt, aber ich vertraut nicht damit. Was soll ich dann tun? ANTWORT : Sie können mich mit mir kontaktieren, um Ihr FireBase -Projekt festzulegen. Ich würde Ihnen gerne helfen.

• Frage: Ich habe Firebase -Projekt erstellt, aber ich habe keine Datenbankstruktur. Was soll ich dann tun? Antwort : Bitte kontaktieren Sie mich, um eine Datenbankstruktur zu erhalten, die ich erstellt habe.

• Frage: Warum haben Sie Ihre Datenbankstruktur nicht geteilt? Antwort : Ich möchte nur wissen, ob jemand Interesse an diesem Projekt hat: D.

• Frage: Wie kann ich dazu beitragen? Antwort : Es macht mich glücklich, auch wenn Sie dieses Projekt nur spielen. Für Code beitragen können Sie das Repo nach Ihren Änderungen einsetzen und eine Pull -Anfrage öffnen. Jedes Feedback ist auch für mich wichtig. Sie können Probleme öffnen oder mir eine Nachricht senden.

• Frage: Hast du UI entworfen? Antwort : Nein, ich habe eigentlich nicht entworfen. Ich fand Homeps -Design auf Dribbble von Anton Mikhaltsov. Mit Ausnahme der Homepage sind andere UI -Auswahlmöglichkeiten meine. Während ich diese Website in begrenzter Zeit gemacht habe, habe ich nicht viel über UI/UX nachgedacht. So können Sie mich auch über Design feedback.

Lizenz

Unter der GPL -Lizenz verteilt. Weitere Informationen finden Sie LICENSE .

Kontakt

@anilsenay

Projektlink: https://github.com/anilsenay/next-e-commerce