> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# オンボーディングフロー

サインアップからアクティブなワークスペースとプランへのゲート付きパス。

## 始める前に

[ファイル] → [フォルダーを開く] を使用して、Visual Studio Code でダウンロードした supastack プロジェクトを開き、[ターミナル] → [新しいターミナル] を選択します。リポジトリ ルートは、package.json、アプリ、およびパッケージを含むフォルダーです。そこで以下のコマンドを実行し、ターミナルを開いたままにしておきます。コマンドが認識されない場合は、続行する前にツールのインストール ガイドを完了してください。

まずプラットフォームのチュートリアルをお読みください。サーバーは、ブラウザまたは電話のリクエストに応答するアプリ プロセスです。 Web は apps/web/.env.local を読み取り、Expo は apps/mobile/.env.local を読み取り、データベース移行コマンドは root .env を読み取ります。データベースなしの /dashboard デモは、Postgres の移行が必要な実際の /auth アカウントとは別のものです。電話またはデスクトップのみのチェックアウトには、別途実行される Web バックエンドが必要です。

[ツールをインストールしてコードを取得](https://supastack.dev/ja/docs/web/before-you-start.md)

[コマンド、ファイル、設定を学ぶ](https://supastack.dev/ja/docs/web/terminal-basics.md)

[Web の初回実行チュートリアルを完了する](https://supastack.dev/ja/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## インストールとセットアップ

サインアップ後、オンボーディングゲートがプロダクト作業の前にワークスペース設定へユーザーを導きます：/onboarding、/new-organization、/select-organization、/choose-plan。organization-onboarding モジュールがメンバーの現在の状態から適用すべきステップを決めます。

フローは再開可能です——各ゲートはサーバー側で正しいステップを再導出するため、途中で離れたユーザーは戻ったときに正しい画面に着地します。

```
/onboarding            entry gate
/new-organization     create a team workspace
/select-organization  pick an existing one
/choose-plan          plan selection before billing
/invite/[token]       invited members join here
```


## 実装ワークフロー

各ステップはウィザードページではなくゲートとして扱ってください——サーバーが状態を評価し、次に必要なステップへリダイレクトします。招待されたメンバーは作成をスキップして accept-invite に着地します。

プロダクトのゲート——必須のプロフィール項目や利用規約の同意——を追加するときは、レイアウトにリダイレクトを散らすのではなく、オンボーディング評価を拡張してください。


## 検証とトラブルシューティング

新規アカウントの全ステップ、フロー途中で戻るユーザー、招待されたメンバー、複数組織のメンバーをテストします。どのステップも、そのゲートを通過する前にアプリシェルを描画しないことを確認してください。


## 次へ

[支払いとサブスクリプション](https://supastack.dev/ja/docs/web/billing.md)