OneStopShop

Onestopshop

Warnung Diese App ist eine laufende Arbeit und sollte nicht als Produktionsbereitschaft angesehen werden. Es verwendet neue Technologien, die noch nicht stabil sind, z. B. Serveraktionen und Nieselregen.

Um

Online -Marktplatz, das mit dem Next.js App Router erstellt wurde, mit dem Benutzer Produkte kaufen, sich anmelden und ihre eigenen Produkte zum Verkauf auflisten können. Benutzer können ein Verkäuferprofil erstellen, Produkte verwalten und die Zahlung sammeln.

Schlüsselmerkmale:

• Next.js App Router mit React -Serverkomponenten
• Abgefangene Routen (mit parallelem Routing) für die Schnellansicht von Produkten und neue Produkterstellung in Administrator
• Serveraktionen für Mutationen
• Planetscale MySQL -Datenbank mit Nieselregen oder
• Uploading für TypeSafe -Dateien Uploads (z. B. Produktbilder)
• Benutzerauthentifizierung mit Angestellter
• Stripe Connect Integration für Marktzahlungen (einschließlich Plattformgebühren und Verkäuferauszahlungen)

Demo

Um das Kassenerlebnis zu demonstrieren, können Sie mit einer Testkartennummer wie 4242 4242 4242 4242 ein beliebiges zukünftiges Datum für den Ablauf und alle 3 Ziffern für den CVC verwenden. Sie können nur mit Produkten von Verkäufern, die über ein Stripe -Konto an ihrem Geschäft (z. B. Tims Spielzeug) verbunden sind, überprüfen. Sie können auch Ihr eigenes Verkäuferkonto erstellen und es mit Stripe für die volle Erfahrung verbinden.

Startseite

Admin -Produktseiten -Editor

Ausführen der App

Befolgen Sie die folgenden Schritte, um die App lokal auszuführen:

1. Erstellen Sie eine MySQL -Datenbank.
2. Erstellen Sie eine lokale .env -Datei mit den Variablen gemäß der .env.example -Datei.
3. Führen Sie npm install aus.
4. Generieren Sie eine Migration mit npx drizzle-kit generate:mysql . Dadurch wird ein neuer Ordner namens migrations-folder im Stamm erstellt, der die SQL-Abfragen enthält, um die Datenbanktabellen zu erstellen. Migrationen werden automatisch mit der Datenbank über die Migrationsfunktion in db.ts synchronisiert. Alternativ können Sie die generierten SQL -Abfragen aus der Migration manuell über die Planetscale -Konsole ausführen und die Migrationsfunktion in db.ts entfernen.
5. Führen Sie npm run dev um die App im Entwicklungsmodus zu öffnen.

Das war's. Sie sollten jetzt in der Lage sein, auf die App unter http://localhost:3000 zugreifen zu können.

Notizen

• Stellen Sie beim Erstellen der Migration zum ersten Mal mit Nieselregen sicher, dass der migrations-folder in der Wurzel leer ist oder nicht existiert.

Storybook

In dieser App wurde jedoch das Storybook hinzugefügt, worauf seit der ersten Erstellung der App nicht aktiv gearbeitet wurde. Unabhängig davon kann es mit den folgenden Befehlen ausgeführt werden:

1. Führen Sie das Drückwind -Build -Skript aus, um eine Ausgabedatei für Rückenwindklassen zu erstellen (nachdem sie ausgeführt und abgeschlossen ist, müssen Sie möglicherweise das Terminal (dh ctrl + c ) „töten“, um den Vorgang zu stoppen, wenn er nicht automatisch stoppt).

   Befehl: npm run tailwind

2. Run Storybook ausführen (mit der im vorherigen Schritt erstellten Tailwind -Ausgabedatei werden Sie unter http://localhost:6006 ausgeführt).

   Befehl: npm run storybook

Fehlerbehebung

Wenn Sie einen Fehler in einer Tabelle sehen, die nicht in PlanetScale vorhanden ist (wahrscheinlich in app/(storefront)/(main)/page.tsx , da dies die erste Verwendung der Datenbank ist), ist dies darauf zurückzuführen, dass die Datenbank nicht synchronisiert ist. Überprüfen Sie die obigen Schritte "Ausführen der App" und überprüfen Sie die Registerkarte "Erkenntnisse" in Planetscale, um zu überprüfen, ob Abfragen zur Erstellung von Tabellen erstellt wurden.

Beitragen

Fühlen Sie sich frei, Probleme und PRs für neue Funktionen/Korrekturen zu machen