How to Add Database to Your App Using Supabase (Windsurf AI, Cursor AI)

This video will explain the step by step process to create a note-taking app with database. The user can register and account using email and password, create a note, and manage the entry in the database. You can use AI code editors like Windsurf and Cursor. While for the authentication and database will be taken care of by Supabase. Prompt 1: 1. Generate a beautiful web application called “Note Taker” powered by Supabase. 2. The user can sign in and create a note that would be stored in the database. 3. Generate a homepage, sign up, sign in, email confirmation, reset password, and dashboard pages using vanilla HTML, CSS, and Javascript. 4. Add Supabase client library via CDN to sign in, sign up, password reset, and dashboard pages. 5. The dashboard page allows signed in users to see, create, modify, and delete notes. 6. The dashboard page will have its own Javascript file that stores and fetches notes from the database. 7. Generate a Javascript file that will handle the user authentication. 8. Generate a .env file to store the Supabase Project URL and Public Anon Key. Prompt 2: 1. Hey, I have tested the user authentication and it's working. 2. Provide the step by step guide to generate a table in Supabase. 3. Provide an SQL command to generate the table in Supabase with Row Level Security enabled. Check out AI tools I use: 🗣 Wispr Flow for dictation: https://wisprflow.ai/r/JOHN220 👨‍💻 Windsurf for AI coder: https://windsurf.com/refer?referral_code=664caa22f0 🔍 Perplexity for research: https://perplexity.ai/pro?referral_code=VA2J7SUD 🎤 Microphone https://amzn.to/4eWLfr2 🎙️ Boom arm https://amzn.to/4fUS7GU 💡 Lighting https://amzn.to/3AXiQUb 🌬️ Standing fan https://amzn.to/4ifgy3d Buy me a coffee: ☕ https://ko-fi.com/chris_ai (I prefer tea but ok) 00:00 Intro 01:17 Creating the website 17:18 Setting up Supabase 25:16 Setting up database