OneStopShop

OneStopShop

警告このアプリは進行中の作業であり、生産準備が整っていると見なされるべきではありません。サーバーアクションやDrizzle ORMなど、まだ安定していない新しいテクノロジーを使用しています。

について

next.jsアプリルーターを使用して構築されたオンラインマーケットプレイス。これにより、ユーザーは製品を購入したり、サインアップしたり、販売用の独自の製品をリストしたりできます。ユーザーは、売り手プロファイルを作成し、製品を管理し、支払いを収集できます。

主な機能：

• Reactサーバーコンポーネントを備えたnext.jsアプリルーター
• 管理者での製品のクイックビューと新製品の作成のための傍受されたルート（並列ルーティング付き）
• 突然変異のサーバーアクション
• Drizzle Ormを使用したPlanetScale MySQLデータベース
• TypeSafeファイルのアップロードのためのアップロード（例：製品画像）
• 店員によるユーザー認証
• 市場の支払いのためのStripe接続統合（プラットフォーム料金や売り手の支払いを含む）

デモ

チェックアウトエクスペリエンスをデモするには、 4242 4242 4242 4242などのテストカード番号をチェックアウトし、有効期限には将来の日付とCVCに3桁を使用します。ストアに接続されたストライプアカウント（ティムのおもちゃなど）を持っている販売者の製品とのみチェックアウトできます。また、独自の売り手アカウントを作成し、完全な体験のためにストライプに接続することもできます。

ホームページ

管理製品ページエディター

アプリを実行します

以下の手順に従って、アプリをローカルに実行します。

1. MySQLデータベースを作成します。
2. .env.exampleファイルに従って、変数を使用してローカル.envファイルを作成します。
3. npm installを実行します。
4. npx drizzle-kit generate:mysqlを使用して移行を生成します。これにより、データベーステーブルを作成するためのSQLクエリを含むルートにmigrations-folder呼ばれる新しいフォルダーが作成されます。移行は、 db.tsの移行関数を介してデータベースと自動的に同期されます。または、PlanetScaleコンソールを介して生成されたSQLクエリを手動で移行から実行し、 db.tsの移行関数を削除することもできます。
5. npm run devを実行して、開発モードでアプリを開きます。

それでおしまい。これで、 http://localhost:3000でアプリにアクセスできるようになりました。

メモ

• Drizzleで初めて移行を生成するときは、ルート内のmigrations-folderが空であるか、存在しないことを確認してください。

ストーリーブック

ただし、このアプリにストーリーブックが追加されましたが、アプリの最初の作成以来、積極的に取り組んでいません。とにかく、次のコマンドを使用して実行できます。

1. Tailwind Build Scriptを実行して、Tailwindクラスの出力ファイルを作成します（実行して完了した後、自動的に停止しない場合はプロセスを停止するために端末（ ctrl + c ）を「殺す」必要があります）。

   コマンド： npm run tailwind

2. ストーリーブックを実行します（これにより、前のステップで作成されたTailwind出力ファイルを使用し、 http://localhost:6006で実行します）。

   コマンド： npm run storybook

トラブルシューティング

PlanetScaleに存在しないテーブルに関連するエラーが表示されている場合（おそらくapp/(storefront)/(main)/page.tsxにスローされている可能性が高いため、これはデータベースの最初の使用です）、これはデータベースが同期していないためです。上記の「アプリの実行」ステップを再検討し、PlanetScaleの「Insights」タブを確認して、テーブルの作成クエリが実行されていることを確認します。

貢献

新機能/修正のために問題やPRを自由に作成してください