Crée une app web complète + backend (Google AI Studio + Supabase)

Configure le projet Supabase

Ouvrir Supabase

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

Créez une organisation et choisissez le plan gratuit Créez le projet et sélectionnez la région la plus proche Enregistrez le mot de passe de la base de données Copiez le Project URL et la Publishable Key

Project Settings Data API

Project URL

Project Settings API Keys

Publishable Key

Prompt 1 — Connexion à Supabase

Connexion à Supabase

Crée un fichier de connexion Supabase simple pour ce projet.

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.

URL du projet Supabase

Colle ici ton URL de projet Supabase

Publishable Key Supabase

Colle ici ta publishable key Supabase

Prompt 2 — Logique d'authentification par e-mail

Logique d'authentification par e-mail

Connecte les pages de connexion et d'inscription de ce projet à 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 — Correction de la confirmation par e-mail

Correction de la confirmation par e-mail

Corrige la logique d'authentification Supabase pour qu'elle gère correctement les utilisateurs non vérifiés.

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 — Amélioration de l'UX d'inscription

Amélioration de l'UX d'inscription

Améliore l'expérience utilisateur du parcours d'inscription e-mail/mot de passe avec 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.

Déploiement (requis pour Google OAuth)

Déployez l'application web

Regarder la vidéo de déploiement

Regarder la vidéo de déploiement

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

Ajoutez le Site URL et le Redirect URL dans Supabase Créez un projet Google Cloud Configurez l'écran de consentement OAuth Créez un client OAuth web et ajoutez les URL requises Ajoutez le Client ID et le Client Secret dans Supabase, puis activez la connexion avec Google

Prompt 5 — Google Sign-In

Google Sign-In

Fais fonctionner le bouton « Continue with Google » avec 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 — Générer les tables + CRUD

Générer les tables + CRUD

Génère les tables de base de données, la logique CRUD et les politiques de sécurité par utilisateur nécessaires à cette application.

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.

Crée et vérifie la base de données

Copiez le SQL généré Ouvrez l'éditeur SQL de Supabase Collez et exécutez le SQL Confirmez que les tables ont été créées Examinez les politiques Row Level Security Créez un enregistrement de test dans l'application Confirmez que l'enregistrement apparaît dans Supabase

Configure Supabase Storage

Ouvrez Supabase Storage Créez un bucket nommé app-files Gardez le bucket privé Ouvrez l'éditeur SQL de Supabase Exécutez le script des politiques de stockage Confirmez que les politiques de stockage ont été créées

Politiques de 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 — Connecter l'upload de fichiers

Connecter l'upload de fichiers

Connecte toutes les fonctions d'envoi de fichiers au bucket privé app-files avec des dossiers sécurisés par utilisateur.

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.

Teste l'envoi de fichiers

Publiez les dernières modifications de l'application Ouvrez l'application web en ligne Connectez-vous avec un compte de test Envoyez un fichier de test Confirmez que le fichier apparaît dans l'application Ouvrez le bucket app-files dans Supabase Confirmez que le fichier est stocké dans le dossier de l'utilisateur

Prompt 8 — Total dynamique des notes

Total dynamique des notes

Fais en sorte que la carte « Total Notes » du tableau de bord affiche le vrai nombre de notes de l'utilisateur connecté depuis 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 — Limite du plan gratuit

Limite du plan gratuit

Limite les utilisateurs gratuits à trois notes et affiche un message de mise à niveau lorsque la limite est atteinte.

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.

Créez des notes jusqu'à atteindre la limite gratuite Essayez de créer une note supplémentaire Confirmez que la création de notes est bloquée Vérifiez que le message de mise à niveau s'affiche

Copie le même projet de départ Google AI Studio que celui utilisé dans le tutoriel Supabase.

AI Notes — Modèle SaaS complet

Projet de départ Google AI Studio utilisé dans le tutoriel

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

Instructions

Ouvre le lien du projet ci-dessus. Connecte-toi à ton compte Google si nécessaire. Clique sur « Remix » dans Google AI Studio. Remplace le Project URL et la Publishable Key Supabase inclus par tes propres valeurs. Exécute les scripts SQL de base de données et de stockage fournis dans l'éditeur SQL de Supabase.

REMARQUE IMPORTANTE

Remplace le Project URL et la Publishable Key Supabase inclus avant de tester l'authentification, la base de données ou l'envoi de fichiers.