本格的なWebアプリ＋バックエンドを作る（Google AI Studio＋Supabase）

Supabase プロジェクトをセットアップする

Supabaseを開く

https://supabase.com/?utm_source=partner&utm_medium=social&utm_campaign=supasquad&dub_id=faVfKdcLWvKCbYNp

組織を作成し、無料プランを選択する プロジェクトを作成し、最も近いリージョンを選択する データベースのパスワードを保存する Project URL と Publishable Key をコピーする

Project Settings Data API

Project URL

Project Settings API Keys

Publishable Key

プロンプト1 — Supabase接続

Supabase接続

このプロジェクト用に、シンプルな Supabase 接続ファイルを作成します。

Create a simple Supabase connection file for this project. 1) Create a new file called: src/supabaseClient.js 2) Inside it, write a clean Supabase setup with two variables that I can replace later: const SUPABASE_URL = "{{SUPABASE_URL}}"; const SUPABASE_PUBLIC_KEY = "{{SUPABASE_KEY}}"; 3) Import createClient from "@supabase/supabase-js" and export one Supabase client: export const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLIC_KEY); Make the file very simple and show clearly where I should paste my URL and my public key.

SupabaseのProject URL

Supabaseのproject URLをここに貼り付け

SupabaseのPublishable Key

Supabaseのpublishable keyをここに貼り付け

プロンプト2 — メール認証のロジック

メール認証のロジック

このプロジェクトのログインページとサインアップページを Supabase Auth に接続します。

Connect the Sign In and Sign Up pages in this project to Supabase Auth. Use the Supabase client from: src/supabaseClient.js 1) For Sign Up: - Use supabase.auth.signUp({ email, password }) 2) For Sign In: - Use supabase.auth.signInWithPassword({ email, password }) 3) After successful login or signup: - Redirect the user to the Home page ("/") 4) Add simple error handling: - If Supabase returns an error, show a small error message under the form Do not change the UI design — only add the logic to make these forms work. Show me only the updated Sign In and Sign Up files.

プロンプト3 — メール確認まわりの修正

メール確認まわりの修正

未認証ユーザーを正しく扱えるように、Supabase の認証ロジックを修正します。

Fix Supabase auth logic: * After signUp(), if data.session is null, don’t redirect to the dashboard. * Just show: "Check your email and confirm your account before logging in." * Only redirect when a real session exists after login. * Protect private pages with supabase.auth.getSession() — if no session, redirect to /login.

プロンプト4 — 登録フローのUX改善

登録フローのUX改善

Supabase のメール／パスワード登録フローの UX を改善します。

Improve the UX of my Supabase email/password signup flow. Current behavior: - When the user completes Sign Up, the app goes back to the Sign In page, but there is no success message and the email field is empty. I want the following behavior: 1) After a successful Supabase signUp({ email, password }): - Do NOT auto-login. - Redirect the user to the Sign In page. - Keep / pre-fill the email they just used for signup in the Sign In form. 2) On the Sign In page: - If the user comes from a successful signup: - Show a clear success message above the form, for example: "Your account has been created. Please check your email and verify your address before logging in." - The email input should already contain the email used during signup. 3) You can pass the email from Sign Up to Sign In using: - router state, OR - a query parameter, OR - any simple, clean method that works well with this project. 4) Keep the existing design and layout exactly the same. Just add: - the logic for passing the email - the success message on the Sign In screen - and basic error handling if signup fails. Show me only the updated Sign Up and Sign In components.

デプロイ（Google OAuthに必要）

ウェブアプリをデプロイする

デプロイの解説動画を見る

デプロイの解説動画を見る

https://youtu.be/HGs-4QjyjHQ?si=b2qf5p0-stltUKw4

Supabase に Site URL と Redirect URL を追加する Google Cloud プロジェクトを作成する OAuth 同意画面を設定する ウェブ用 OAuth クライアントを作成し、必要な URL を追加する Client ID と Client Secret を Supabase に追加し、Google ログインを有効にする

Prompt 5 — Google Sign-In

Google Sign-In

「Continue with Google」ボタンを Supabase OAuth で動作させます。

Make the “Continue with Google” button work using Supabase OAuth. Use the supabaseClient.js file. Add the Google login function and connect it to the button. Keep all UI exactly the same.

プロンプト6 — テーブルとCRUDを生成する

テーブルとCRUDを生成する

このアプリに必要なデータベーステーブル、CRUD ロジック、ユーザーごとのセキュリティポリシーを生成します。

I want you to connect this web app to Supabase. 1) Analyze the existing project and detect all the data that should be saved in the database (for example: notes, tasks, posts, projects, or any items the app uses). 2) Based on the UI and the current features, generate the ideal SQL code to create the main table(s) in Supabase — including fields, types, timestamps, and user_id relations. Make sure rows belong only to the authenticated user using RLS + policies with auth.uid(). 3) After generating the SQL, write the Supabase code needed for: - loading the user's data - creating new items - updating items - deleting items 4) Use the existing components in the codebase without changing the design. Just replace the placeholder/local data logic with real Supabase queries. Keep everything simple, clean, and easy to copy-paste.

データベースを作成して確認する

生成された SQL をコピーする Supabase の SQL Editor を開く SQL を貼り付けて実行する テーブルが作成されたことを確認する Row Level Security のポリシーを確認する アプリでテスト用のレコードを作成する そのレコードが Supabase に表示されることを確認する

Supabase Storage をセットアップする

Supabase Storage を開く app-files という名前のバケットを作成する バケットは非公開のままにする Supabase の SQL Editor を開く ストレージポリシーのスクリプトを実行する ストレージポリシーが作成されたことを確認する

Storageのポリシー

create policy "Users can view own files" on storage.objects for select to authenticated using ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') ); create policy "Users can upload to own folder" on storage.objects for insert to authenticated with check ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') ); create policy "Users can update own files" on storage.objects for update to authenticated using ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') ); create policy "Users can delete own files" on storage.objects for delete to authenticated using ( bucket_id = 'app-files' and name like (auth.uid()::text || '/%') );

プロンプト7 — ファイルアップロードを連携する

ファイルアップロードを連携する

すべてのファイルアップロード機能を、ユーザーごとの安全なフォルダーを使って非公開バケット app-files に接続します。

I already created a Supabase Storage bucket named "app-files" (private) and added all required security policies so each user can only access files under their own folder. Now analyze my project and identify every place where users upload or select files (attachments, images, avatars, covers, etc.). Connect all existing upload features to Supabase Storage using this bucket: "app-files". Important folder rule: every uploaded file path must start with the user id: ${auth.uid()}/... Use a clean structure like: ${auth.uid()}/${featureName}/${itemId}/${uuid}.${extension} After uploading a file: - Save the returned file path in the correct database table according to my current data model. - Display files using signed URLs since the bucket is private. - Add delete logic: remove the file from Storage and remove its reference from the database. - Do NOT redesign the UI. Only connect the existing upload buttons/components to Supabase Storage.

ファイルのアップロードをテストする

アプリの最新の変更を公開する 公開中のウェブアプリを開く テスト用アカウントでログインする テスト用ファイルをアップロードする ファイルがアプリに表示されることを確認する Supabase で app-files バケットを開く ファイルがそのユーザーのフォルダー内に保存されていることを確認する

プロンプト8 — メモ件数を動的に表示する

メモ件数を動的に表示する

ダッシュボードの「Total Notes」カードに、ログイン中のユーザーの実際のメモ件数を Supabase から表示させます。

You are working on my existing Supabase-powered AI Notes project. Goal: Make the "Total Notes" card on the dashboard show the real number of notes for the currently authenticated user. Requirements: 1. Fetch the current authenticated user using: supabase.auth.getUser() 2. Count the number of notes in the "notes" table where user_id = current user id. 3. Replace the static number in the dashboard with the real count from the database. 4. Do NOT redesign the UI. Only connect the existing "Total Notes" component to real Supabase data. 5. Keep the existing clean SaaS layout untouched. 6. Make sure it updates automatically when a note is created or deleted. Only modify necessary files. Do not change styling.

プロンプト9 — 無料プランの上限

無料プランの上限

無料ユーザーはメモ 3 件までに制限し、上限に達したらアップグレードのメッセージを表示します。

Now add simple SaaS plan logic to my existing Supabase AI Notes app. Goal: Free users can create a maximum of 3 notes. Requirements: 1. Before creating a new note: - Count how many notes the current user already has. 2. If notes count >= 3: - Block note creation. - Show a clean modal or alert: "Free plan limit reached. Upgrade to Pro to create unlimited notes." 3. Do NOT redesign the UI. Keep the existing design system. 4. Keep logic simple. No Stripe integration yet. Just front-end + Supabase validation. 5. Make sure users cannot bypass this limit by calling the create function manually. Keep everything clean and production-ready.

無料上限に達するまでメモを作成する さらにもう一件メモを作成してみる メモの作成がブロックされることを確認する アップグレードのメッセージが表示されることを確認する

Supabase のチュートリアルで使用しているものと同じ Google AI Studio のスタータープロジェクトをコピーします。

AI Notes — SaaSフル機能テンプレート

チュートリアルで使用している Google AI Studio のスタータープロジェクト

https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221KfBjV87zDbGoGj27YRjB2kHrLcDM2-4r%22%5D,%22action%22:%22open%22,%22userId%22:%22105522043497516450070%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing

手順

上のプロジェクトリンクを開きます。 必要に応じて Google アカウントにログインします。 Google AI Studio 内の「Remix」をクリックします。 同梱の Supabase Project URL と Publishable Key を自分の値に置き換えます。 用意されたデータベースと Storage の SQL スクリプトを Supabase の SQL Editor で実行します。

重要な注意

認証・データベース・ファイルアップロードをテストする前に、同梱の Supabase Project URL と Publishable Key を置き換えてください。