OneStopShop

OneStopshop

警告此應用程序正在進行中，不應將其視為準備就緒。它使用尚未穩定的新技術，例如服務器操作和毛毛雨ORM。

關於

使用Next.js應用程序路由器構建的在線市場，該路由器允許用戶購買產品，註冊並列出自己的產品出售產品。用戶可以創建賣方資料，管理產品並收集付款。

關鍵功能：

• Next.js應用程序路由器帶有React服務器組件
• 用於產品快速視圖的截距路線（帶有並行路由），並在管理員中創建新產品
• 服務器動作突變
• Planetscale Mysql數據庫，帶有細雨orm
• typesafe文件上傳的上載（例如，產品圖像）
• 用店員的用戶身份驗證
• Stripe Connect集成市場付款（包括平台費和賣方支出）

演示

要演示結帳體驗，請使用測試卡號進行結帳，例如4242 4242 4242 4242 ，並使用未來的任何日期以及CVC的任何3位數字。您只能與將其連接到其商店的Stripe帳戶（例如Tim's Toys）的賣家的產品結帳。您還可以創建自己的賣方帳戶，並將其連接到Stripe，以獲得完整的體驗。

主頁

管理產品頁編輯器

運行該應用程序

請按照以下步驟在本地運行該應用程序：

1. 創建一個MySQL數據庫。
2. 根據.env.example文件創建帶有變量的本地.env文件。
3. 運行npm install 。
4. 使用npx drizzle-kit generate:mysql生成遷移。這將在根中創建一個名為migrations-folder ，其中包含SQL查詢以創建數據庫表。通過db.ts中的遷移函數自動與數據庫自動同步。另外，您可以通過行星尺度控制台手動從遷移中運行生成的SQL查詢，並在db.ts中刪除遷移功能。
5. 運行npm run dev以在開發模式下打開應用程序。

就是這樣。現在，您應該能夠通過http://localhost:3000訪問該應用程序。

筆記

• 當第一次使用毛毛雨生成遷移時，請確保根中的migrations-folder是空的或不存在的。

故事書

自從該應用程序最初創建以來，Storybook已被添加到該應用程序中。無論如何，可以使用以下命令進行運行：

1. 運行尾風構建腳本以創建一個用於尾管類的輸出文件（運行並完成後，您可能必須“殺死”終端（即ctrl + c ），以停止該進程，如果該過程不自動停止）。

   命令： npm run tailwind

2. 運行故事書（這將使用上一步中創建的尾風輸出文件，並在http://localhost:6006上運行）。

   命令： npm run storybook

故障排除

如果您看到與行星尺度中不存在的表有關的錯誤（可能是在app/(storefront)/(main)/page.tsx中丟棄，因為這是數據庫的首次使用），這是由於數據庫不在同步中。重新訪問上面的“運行應用程序”步驟，並在PlanetsCale中檢查“ Insights”選項卡，以檢查表創建查詢是否已運行。

貢獻

隨時提出問題和公關的新功能/修復程序