ecommerce website shopfinity

商城

歡迎使用Shopfinity ，這是一款採用最新技術建構的高級電子商務應用程式。 Shopfinity 提供全面的線上購物解決方案，包括使用者身份驗證、產品管理、支付處理和直覺的管理儀表板。

特徵

• Next.js 14 ：利用 Next.js 的最新應用程式路由器和功能來實現快速、SEO 友好且伺服器端渲染的 Web 應用程式。
• MongoDB ：用於高效資料儲存和檢索的 NoSQL 資料庫。
• Auth.js (Next-Auth) ：安全且可擴充的身份驗證解決方案。
• Stripe ：用於處理交易的整合支付網關。
• 管理儀表板：無縫管理產品、訂單和使用者。
• 響應式設計：確保在所有裝置上提供出色的使用者體驗。
• 送貨地址收集：輕鬆收集和管理送貨詳細資訊。
• Tailwind CSS ：用於高效且可自訂的樣式。

入門

先決條件

• Node.js（v14.x 或更高版本）
• npm（v6.x 或更高版本）或yarn（v1.x 或更高版本）
• MongoDB實例
• Stripe 帳戶和 API 金鑰

安裝

1. 克隆儲存庫

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

2. 安裝依賴項

   npm install
   # or
   yarn install

3. 環境變數

   在根目錄下建立.env.local文件，加入以下環境變數：

    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. 運行開發伺服器

   npm run dev
   # or
   yarn dev

   用瀏覽器開啟http://localhost:3000查看結果。

專案結構

• /app ：包含所有路由。
• /components ：可重複使用的 React 元件。
• /lib ：MongoDB、Stripe 和身份驗證的配置。
• /lib/models ：MongoDB 的 Mongoose 模型。
• /utils ：實用函數。

用法

驗證

• 用戶可以使用電子郵件或第三方提供者（Google、GitHub 等）進行註冊和登入。
• 經過身份驗證的用戶可以存取他們的個人資料、訂單歷史記錄等。

管理儀表板

• 僅具有管理員權限的使用者可以存取。
• 管理產品：新增、編輯或刪除產品。
• 管理訂單：查看訂單詳情，更新訂單狀態。
• 管理使用者：查看使用者訊息，分配管理員角色。

付款方式

• 與 Stripe 整合以實現安全支付處理。
• 用戶可以將商品加入購物車並繼續結帳。
• 結帳時收集送貨地址。

順風 CSS

• Tailwind CSS 用於樣式設定。您可以透過編輯tailwind.config.js檔案並在styles/globals.css檔案中新增自訂 CSS 類別來自訂樣式。

貢獻

我們歡迎貢獻！請依照以下步驟貢獻：

1. 分叉儲存庫。
2. 建立一個新分支（ git checkout -b feature/your-feature ）。
3. 做出你的改變。
4. 提交您的變更（ git commit -am 'Add new feature' ）。
5. 推送到分支（ git push origin feature/your-feature ）。
6. 建立一個新的拉取請求。

執照

該項目已獲得 MIT 許可證的許可。有關更多詳細信息，請參閱許可證文件。

致謝

• Next.js
• MongoDB
• Auth.js（下一個Auth）
• 條紋
• 順風 CSS

---

現場演示

請在此處查看 Shopfinity 的現場演示。

您可以根據專案的具體要求隨意自訂此README.md檔案。享受使用 Shopfinity 進行構建的樂趣！