ecommerce website shopfinity

ショップフィニティ

最新のテクノロジーで構築された高度な e コマース アプリケーションである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 ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。

謝辞

• Next.js
• モンゴDB
• Auth.js (次の認証)
• ストライプ
• 追い風 CSS

---

ライブデモ

Shopfinityのライブデモはこちらからご覧ください。

プロジェクト固有の要件に応じて、このREADME.mdファイルを自由にカスタマイズしてください。 Shopfinity で構築をお楽しみください。