Xây dựng ứng dụng web đầy đủ + backend (Google AI Studio + Supabase)

Thiết lập dự án Supabase

Mở Supabase

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

Tạo một tổ chức và chọn gói miễn phí Tạo dự án và chọn khu vực gần nhất Lưu mật khẩu cơ sở dữ liệu Sao chép Project URL và Publishable Key

Project Settings Data API

Project URL

Project Settings API Keys

Publishable Key

Prompt 1 — Kết nối Supabase

Kết nối Supabase

Tạo một tệp kết nối Supabase đơn giản cho dự án này.

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.

Project URL của Supabase

Dán project URL của Supabase vào đây

Publishable Key của Supabase

Dán publishable key của Supabase vào đây

Prompt 2 — Logic xác thực bằng email

Logic xác thực bằng email

Kết nối trang đăng nhập và đăng ký của dự án này với 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.

Prompt 3 — Khắc phục lỗi xác nhận email

Khắc phục lỗi xác nhận email

Sửa logic xác thực của Supabase để xử lý đúng những người dùng chưa xác minh.

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.

Prompt 4 — Cải thiện trải nghiệm đăng ký

Cải thiện trải nghiệm đăng ký

Cải thiện trải nghiệm người dùng cho luồng đăng ký bằng email/mật khẩu của Supabase.

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.

Deploy (bắt buộc cho Google OAuth)

Triển khai ứng dụng web

Xem video hướng dẫn deploy

Xem video hướng dẫn deploy

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

Thêm Site URL và Redirect URL trong Supabase Tạo một dự án Google Cloud Cấu hình màn hình đồng ý OAuth Tạo Web OAuth Client và thêm các URL cần thiết Thêm Client ID và Client Secret vào Supabase, sau đó bật đăng nhập bằng Google

Prompt 5 — Google Sign-In

Google Sign-In

Làm cho nút “Continue with Google” hoạt động bằng 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.

Prompt 6 — Tạo bảng + CRUD

Tạo bảng + CRUD

Tạo các bảng cơ sở dữ liệu, logic CRUD và chính sách bảo mật theo từng người dùng mà ứng dụng này cần.

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.

Tạo và kiểm tra cơ sở dữ liệu

Sao chép đoạn SQL đã tạo Mở SQL Editor của Supabase Dán và chạy đoạn SQL Xác nhận các bảng đã được tạo Xem lại các chính sách Row Level Security Tạo một bản ghi thử nghiệm trong ứng dụng Xác nhận bản ghi xuất hiện trong Supabase

Thiết lập Supabase Storage

Mở Supabase Storage Tạo một bucket tên app-files Giữ bucket ở chế độ riêng tư Mở SQL Editor của Supabase Chạy script chính sách Storage Xác nhận các chính sách Storage đã được tạo

Policy cho 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 || '/%') );

Prompt 7 — Kết nối tính năng tải tệp lên

Kết nối tính năng tải tệp lên

Kết nối mọi tính năng tải tệp lên với bucket riêng tư app-files, dùng thư mục bảo mật riêng cho từng người dùng.

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.

Kiểm tra việc tải tệp lên

Phát hành các thay đổi mới nhất của ứng dụng Mở ứng dụng web đang chạy Đăng nhập bằng tài khoản thử nghiệm Tải lên một tệp thử nghiệm Xác nhận tệp xuất hiện trong ứng dụng Mở bucket app-files trong Supabase Xác nhận tệp được lưu trong thư mục của người dùng

Prompt 8 — Tổng số ghi chú động

Tổng số ghi chú động

Làm cho thẻ “Total Notes” trên bảng điều khiển hiển thị số ghi chú thật của người dùng đang đăng nhập từ 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.

Prompt 9 — Giới hạn của gói miễn phí

Giới hạn của gói miễn phí

Giới hạn người dùng miễn phí ở ba ghi chú và hiển thị thông báo nâng cấp khi đạt giới hạn.

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.

Tạo ghi chú cho đến khi đạt giới hạn miễn phí Thử tạo thêm một ghi chú nữa Xác nhận việc tạo ghi chú bị chặn Kiểm tra thông báo nâng cấp xuất hiện

Sao chép đúng dự án khởi đầu Google AI Studio được dùng trong hướng dẫn Supabase.

AI Notes — Mẫu SaaS đầy đủ

Dự án khởi đầu Google AI Studio được dùng trong hướng dẫn

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

Hướng dẫn

Mở liên kết dự án ở trên. Đăng nhập tài khoản Google của bạn nếu cần. Nhấp “Remix” trong Google AI Studio. Thay Supabase Project URL và Publishable Key có sẵn bằng giá trị của riêng bạn. Chạy các script SQL cho cơ sở dữ liệu và Storage trong SQL Editor của Supabase.

LƯU Ý QUAN TRỌNG

Hãy thay Supabase Project URL và Publishable Key có sẵn trước khi kiểm tra xác thực, cơ sở dữ liệu hoặc tải tệp lên.