VULKで構築

SaaSダッシュボードを数分で公開

ユーザー管理、アナリティクスチャート、課金連携、管理パネルを備えた完全なSaaSダッシュボードを生成します。VULKはReact、Tailwind CSS、PostgreSQLバックエンドで本番運用に耐えるダッシュボードを構築します。

完全なプロンプト

具体的な出発点

小規模なサブスクリプション事業向けの管理画面を作成してください。売上、顧客検索、契約状況、決済失敗への対応をまとめます。

完全なプロンプト

この依頼を事業に合わせて調整し、VULKで作成して改善してください。

小規模なサブスクリプション事業向けの管理画面を作成してください。売上、顧客検索、契約状況、決済失敗への対応をまとめます。

次の機能を含めてください:
- リアルタイムのアナリティクスチャートとKPIウィジェット
- ロールと権限を備えたユーザー管理
- サブスクリプション処理付きのStripe課金連携
- ダークモード対応のレスポンシブなサイドバーナビゲーション
- REST APIを自動生成するPostgreSQLバックエンド

画面の経路、データモデル、操作を備えた動作するプロジェクト全体を作成してください。保存・非公開データには永続化、認証、サーバー側の権限を実装し、API認証情報はサーバーで管理してください。外部サービスの設定を文書化し、実アカウント接続まではテストモードを使います。模擬連携を実接続完了と表示しないでください。

画面サイズに対応し、分かりやすいラベル、キーボード操作、見えるフォーカスを備えてください。読み込み中、空、入力検証、エラーの状態を用意します。サンプルデータを明示し、顧客の評価や成果を捏造しないでください。プロジェクトに適したデザインを選び、文字、余白、操作部品を統一します。実行、テスト、コードの書き出し、公開方法を説明してください。

次の一連の操作を検証してください:
期間を変え、顧客を開いて決済の問題を処理してください。合計と履歴が同じ保存済みデータに基づくことを確認します。
このプロンプトで作成

SaaSスターターの技術チェック

技術ガイド更新日:

VULKは、認証、PostgreSQL、RESTエンドポイントを備えた編集可能なReactの土台を生成できます。ワークスペースの構造、アクセス管理者、サブスクリプションの流れを具体的な受け入れテストとともに定義します。

ワークスペースの分離

二つのワークスペースを作り、それぞれ別のメンバーアカウントを使用します。APIへの直接リクエストも含め、他方のレコードの読み取り、変更、削除を試します。すべて拒否される必要があります。既存セッションでアクセスを取り消した場合も確認します。

サブスクリプション課金

課金画面は処理全体の一部です。テスト用認証情報をサーバーに設定し、テスト決済、カスタマーポータル、署名付きWebhookを検証します。同じイベントを再送しても、サブスクリプションの変更が重複しないことを確認します。実際の課金は検証後に有効化します。

再現可能な引き渡し

エクスポートしたコードをクリーンな環境でビルドします。必要な環境変数、データベース設定、外部サービスへの接続を記録します。公開したアプリでも、新規アカウント、データの永続化、ワークスペース間のアクセス拒否を再検証します。

ほかに作成できるもの

すべての活用例

得られるもの

  • +リアルタイムのアナリティクスチャートとKPIウィジェット
  • +ロールと権限を備えたユーザー管理
  • +サブスクリプション処理付きのStripe課金連携
  • +ダークモード対応のレスポンシブなサイドバーナビゲーション
  • +REST APIを自動生成するPostgreSQLバックエンド

よくある質問

ダッシュボードのレイアウトはカスタマイズできますか?

はい。理想のレイアウトを自然な言葉で説明すればVULKが生成します。ビジョンに完全に一致するまで、会話で繰り返し調整できます。

本物のバックエンド機能は含まれますか?

もちろんです。VULKは認証、REST API、管理エンドポイントを備えた本物のPostgreSQLデータベースを生成します。静的なモックアップではありません。

自分のStripeアカウントを接続できますか?

はい。生成されたダッシュボードにはStripe連携コードが含まれます。StripeのAPIキーを追加するだけで課金システムの準備は完了です。

あなたのアイデアを、数分で形にして公開。

アプリを作る
VULKサポート

オンライン

こんにちは!本日はどのようにお手伝いできますか?

人気のトピック

AIサポート • support.vulk.dev