ecommerce website shopfinity

Shopfinity

Willkommen bei Shopfinity , einer fortschrittlichen E-Commerce-Anwendung, die mit den neuesten Technologien erstellt wurde. Shopfinity bietet eine umfassende Lösung für Online-Shopping, einschließlich Benutzerauthentifizierung, Produktverwaltung, Zahlungsabwicklung und einem intuitiven Admin-Dashboard.

Merkmale

• Next.js 14 : Nutzt den neuesten App-Router und die Funktionen von Next.js für schnelle, SEO-freundliche und serverseitig gerenderte Webanwendungen.
• MongoDB : Eine NoSQL-Datenbank für effizientes Speichern und Abrufen von Daten.
• Auth.js (Next-Auth) : Sichere und skalierbare Authentifizierungslösungen.
• Stripe : Integriertes Zahlungsgateway zur Abwicklung von Transaktionen.
• Admin-Dashboard : Produkte, Bestellungen und Benutzer nahtlos verwalten.
• Responsive Design : Sorgt für ein großartiges Benutzererlebnis auf allen Geräten.
• Erfassung von Versandadressen : Erfassen und verwalten Sie Versanddetails ganz einfach.
• Tailwind CSS : Für effizientes und anpassbares Styling.

Erste Schritte

Voraussetzungen

• Node.js (v14.x oder höher)
• npm (v6.x oder höher) oder Garn (v1.x oder höher)
• MongoDB-Instanz
• Stripe-Konto und API-Schlüssel

Installation

1. Klonen Sie das Repository

   git clone https://github.com/yourusername/shopfinity.git
   cd shopfinity

2. Abhängigkeiten installieren

   npm install
   # or
   yarn install

3. Umgebungsvariablen

   Erstellen Sie eine .env.local Datei im Stammverzeichnis und fügen Sie die folgenden Umgebungsvariablen hinzu:

    MONGODB_URI=your_mongodb_connection_string
   AUTH_SECRET=your_auth_secret
   AUTH_GITHUB_ID=your_github_client_id
   AUTH_GITHUB_SECRET=your_github_client_secret
   AUTH_GOOGLE_ID=your_google_client_id
   AUTH_GOOGLE_SECRET=your_google_client_secret
   NEXT_STRIPE_SECRET_KEY=your_stripe_secret_key
   NEXT_STRIPE_PUBLIC_KEY=your_stripe_public_key
   STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
   RESEND_API_KEY=your_resend_api_key
   NEXT_ADMIN_EMAIL=your_admin_email
   AUTH_TRUST_HOST=true
   

4. Führen Sie den Entwicklungsserver aus

   npm run dev
   # or
   yarn dev

   Öffnen Sie http://localhost:3000 mit Ihrem Browser, um das Ergebnis anzuzeigen.

Projektstruktur

• /app : Enthält alle Routen.
• /components : Wiederverwendbare React-Komponenten.
• /lib : Konfiguration für MongoDB, Stripe und Authentifizierung.
• /lib/models : Mongoose-Modelle für MongoDB.
• /utils : Hilfsfunktionen.

Verwendung

Authentifizierung

• Benutzer können sich mit ihrer E-Mail-Adresse oder über Drittanbieter (Google, GitHub usw.) registrieren und anmelden.
• Authentifizierte Benutzer können auf ihre Profile, ihren Bestellverlauf und mehr zugreifen.

Admin-Dashboard

• Nur für Benutzer mit Administratorrechten zugänglich.
• Produkte verwalten: Produkte hinzufügen, bearbeiten oder löschen.
• Bestellungen verwalten: Bestelldetails anzeigen, Bestellstatus aktualisieren.
• Benutzer verwalten: Benutzerinformationen anzeigen, Administratorrollen zuweisen.

Zahlungen

• Integriert in Stripe für eine sichere Zahlungsabwicklung.
• Benutzer können Artikel in den Warenkorb legen und zur Kasse gehen.
• Erfassung der Lieferadresse während des Bezahlvorgangs.

Rückenwind-CSS

• Für das Styling wird Tailwind CSS verwendet. Sie können die Stile anpassen, indem Sie die Datei tailwind.config.js bearbeiten und Ihre benutzerdefinierten CSS-Klassen in der Datei styles/globals.css hinzufügen.

Mitwirken

Wir freuen uns über Beiträge! Bitte befolgen Sie diese Schritte, um einen Beitrag zu leisten:

1. Forken Sie das Repository.
2. Erstellen Sie einen neuen Zweig ( git checkout -b feature/your-feature ).
3. Nehmen Sie Ihre Änderungen vor.
4. Übernehmen Sie Ihre Änderungen ( git commit -am 'Add new feature' ).
5. Zum Zweig pushen ( git push origin feature/your-feature ).
6. Erstellen Sie eine neue Pull-Anfrage.

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert. Weitere Einzelheiten finden Sie in der LICENSE-Datei.

Danksagungen

• Next.js
• MongoDB
• Auth.js (Next-Auth)
• Streifen
• Rückenwind-CSS

---

Live-Demo

Schauen Sie sich hier die Live-Demo von Shopfinity an.

Sie können diese README.md Datei gerne an die spezifischen Anforderungen Ihres Projekts anpassen. Viel Spaß beim Bauen mit Shopfinity!