Build a Full-Stack Web App with Google AI Studio + Supabase (Auth, Database, File Uploads)

0:00This is not just a website. A user can create an account, log in, write notes, attach files, log out, and come back later to find everything still there. Each user only sees their own notes. Each user only sees their own files. This is not UI design. This is a real web application with real backend logic. And in this video, I'll show you how to build this step by step using Google AI Studio on the front end and Superbase as the back end. The app you're looking at is called AI Notes. It's a simple example where users can create an account, write and organize notes, and attach files to those notes. But AI Notes is not the goal. [clears throat] It's just a

0:43visual example to explain the system. Nothing in this video is tied to this app specifically. You can apply the exact same structure to any website, any web application, any SAS idea, or any project you're building. Change the name, change the idea, change the niche. The logic stays the same. A website becomes a web app when it has users, saved data, and state that persists over time. When users can log in, see their own content, and come back later to find everything still there, that's when you have a real web application. And that's exactly what we're building today. Here's the road map for this video. We'll build a real web app in four clear steps. One,

1:21user authentication. Users can sign up, log in, and log out. Two, store user data. We'll store notes and user profile data in a real database. Three, file uploads. Users can upload files, and each user only sees their own files. Step four, connect everything to the UI, make the interface react to the user with real time dynamic updates. We'll fully complete each step before moving to the next one. That way, you won't get lost. And don't worry, you don't need to be a developer or understand any code to follow this. Everything we're doing here is built with AI, and you just follow the steps. You might be wondering, what is Superbase? Superbase is a back-end platform built

2:02on top of PostgresQL. Basically, a professional system for storing your data safely. It gives you readytouse back-end features so you don't have to build everything from scratch. With Superbase, you can manage user authentication, store data in a real SQL database, a structured place where your user's information lives, upload and serve files, control access using rowle security policies, so each user only sees their own data. I'm using Superbase here because it integrates very well with modern front-end tools and it has a generous free tier for small projects. Superbase is not the only option. In another video on the channel, I showed how to build a similar system using

2:42Firebase. If you prefer Firebase, you'll find that video linked in the description. But today, we're going allin on Superbase so you really understand how it works with Google AI Studio. All right, let's start with step one. And don't worry, this part is very simple. We just want users to be able to sign up, log in, and log out. I start by going to superbase.com. From here, I click start your project. If you don't already have an account, you can create one in a few seconds. After logging in, Subbase takes me directly to the create a new organization page. For the organization name, I'll call mine Profit Studio, which is the name of my channel. For the type, I select

3:22personal because this project is just for me and I'm the only one managing it. Then for the plan, I choose the free plan. And honestly, the free plan is more than enough for small projects. It even supports up to 50,000 monthly active users, so it's perfect for getting started. Now I click create organization. Superbase now asks me to create the actual project. Here the

3:45organization name is already filled in. For the project name, I'll call this one AI notes project. Then we have the database password. This password is only for the internal Postgress database. We don't use it anywhere in this tutorial, but make sure to save it in a safe place because it's important if you ever want direct database access. Next is the region. It's always best to choose the region closest to your users. In my case, I'll select West US, North California. Now everything is ready, so I click create new project. Superbase takes a few seconds to set everything up. And once it's done, it opens the main project dashboard. The database authentication and storage are

4:25now fully created and ready to use. Once we're inside the Superbase dashboard, the first thing we need is the connection info. On the left, I open project settings, then data API. Here, Superbase gives me the project URL. This is what our app will use to communicate with the database. I'll copy it and save it in my notes because we'll need it in a moment. Next, still inside project settings, I go to API keys. From here, I copy the publishable key. This is the public key that our front end will use. That's it. We now have the only two values we need to connect Google AI Studio to Superbase. The project URL and the publishable key. Now, let's jump into

5:04Google AI Studio and make the connection. I'm inside my project and as you can see, the sign up and signin pages are already here, but right now they work only locally. Nothing is connected to a real backend. So, let's connect everything to Superbase. The first thing I'm going to do is give Google AI the first prompt. This prompt is something I wrote and prepared for you. It simply creates the connection file between our web app and Superbase. And all you need to do is replace the project URL and the publishable key with your own values. These are the two spots we need to replace. Here I'll paste my project URL. And here I'll paste my publishable key. Now I'll

5:43click run prompt. Great. The connection file is ready and the project is now linked to Superbase. I'll move to the second prompt. This one is also prepared for you and its job is very simple. It connects the sign up and signin forms to real Superbase authentication. I'll click run prompt. And by the way, all the prompts I'm using in this video are available for you in the free guide in the description. Just copy paste and you're ready to go. After running the second prompt,

6:08let's test if everything is working. From right here inside the web app, I click create new note. Just like before, the app shows the signup form, but this time it's actually connected to Superbase, not just working locally. I choose sign up, type a name, an email, and a password, then click create account. And as you can see, the dashboard opens immediately. But what really matters is that the account is now created in the real back end. To confirm, I open Superbase to authentication to users. Refresh the page and the new user shows up with the correct name, email, and user ID. And that's it. Everything is now fully connected to Superbase. Now, if you scroll

6:45a little to the right here in the users table, you'll notice that under last signin, it says waiting for verification. And the reason is very simple. Superbase enables email confirmation by default. So, let me show you this quickly. I go to authentication arrow signin providers. And right here you can see the option confirm email and it's turned on by default. And honestly, it's

7:06better to keep this enabled. This prevents fake signups, bots, and people using random emails. and it makes your app cleaner and more secure. Now, let me check the inbox of the email I use for the signup. And here it is, the confirmation email from Superbase. If it doesn't appear in your inbox, that's completely normal. You'll usually find it inside spam because we haven't added a custom domain yet. And just so you know, every new user who signs up in your web app will receive the same confirmation email. This is the default behavior in Superbase to make sure every account is verified. Now, you might have noticed something earlier. When I created an account, the

7:41app logged me in immediately, even though I didn't confirm my email. And of course, that's not how a professional web app should work. So, now I'm going to ask Google AI to improve this behavior. I give it a simple instruction. After someone signs up, don't let them enter the dashboard until they confirm their email. Show a check your email message instead. I click run prompt so Google AI can update the O logic. Now, let's test it. I create a new account with a name, email, and password. Then click create account. This time, instead of sending me straight into the dashboard,

8:14the app shows this check your email screen. That message tells the user clearly what to do next. They have to confirm their email before they can log in. And this is exactly the behavior we want for a professional web app. There's still a small UX problem. If I click back to sign in, the app sends me to the login page, but the email field is empty and the user has to type their email again and then their password. It works, but it's a bit annoying. So, I ask Google AI to slightly upgrade the flow. After a successful signup, it should send the user back to the sign-in page, keep the

8:45same email already filled in, and show a clear success message at the top that says something like, "Your account has been created. Please check your email and verify your address before logging in." After running that prompt, I test everything again. Now, when I click create account, it takes me straight to the sign-in page, and the email I used is already filled in. At the top, you'll see a simple success message telling the user to check their inbox and confirm their email. This gives us

9:09a clean, professional signup flow. Create account to confirm email log in with the same email. All right, now that our email signup flow is fully polished and working perfectly, let's take it to the next level. Because the next feature we're adding is everyone's favorite, sign in and sign up with Google. This is the part that makes your app feel instantly premium, modern, and super easy for users. So, let's activate it. It only takes a few seconds, and the result is amazing. Before we actually enable Google SignIn, there's one important thing you need to know. Google OOTH almost never works locally. It only works when your web app

9:46is deployed on a real live domain. So, if your project isn't deployed yet, don't worry. I already made a full step-by-step deployment tutorial that shows you the cleanest way to put your app online. You'll find it linked in the description. Once your app is live, you can continue from this point. In my case, the app is already live, so let's go ahead and enable Google Signin. The first thing we need to do is update our settings inside Superbase. So I go to authentication to URL configuration. Here we have two important fields. Site URL. This is simply the main link of your web app after you deploy it online. Superbase uses this as the

10:25default redirect location in the O flow. Redirect URLs. These are the trusted URLs that Google is allowed to redirect users back to after they sign in. So we just add our deployed domain here as well. Once both fields are set, I save the changes. Next, I go to signin providers, scroll down and open Google. This panel contains the fields we'll connect later using Google Cloud.

10:50I'll leave this sidebar open for now. Now, we switch to the Google side of the setup. I go to console.cloud.google.com as you see on screen. From the top bar, I click the project selector and create a new project. I'll name it AI notes project just to keep things organized. Then click create. After the project is created, I'm taken back to the dashboard. Here I open APIs

11:15and services. After opening APs and services, I go to OOTH consent screen and start the setup. Click get started. For the app name, I type AI notes. And for user support, I select my email. Then click next. For the audience step, we have internal and external. But here's the simple difference. Internal only for people inside your Google Workspace organization. External for any normal user with a Google account. Since our app is for everyone, I'll choose external. Then next, enter the contact email and click next again. I agree to the Google API services user data policy, then hit continue. Finally, I click create. After a few seconds, Google prepares the OOTH

11:58configuration. Now I click create OOTH client and for the application type I select web application. I enter a name in my case AI notes. Now here under authorized JavaScript origins I need to add the domain of my deployed web app. So I paste it exactly like this. Then under authorized redirect URLs I need to add the callback URL that Superbase gave me. So I switch back to Superbase, copy the callback URL for OOTH, then return to Google Cloud and paste it into the redirect URLs section. Now I click create. Google Cloud generates the OOTH client. And here I get two important values, client ID, client secret. I copy the client ID, go back to Superbase and paste it

12:57into the client IDs field. Then I copy the client secret from Google Cloud and paste it into the client secret field in Superbase. After that, I simply enable signin with Google and finally click save. Now that everything is set up and Google as a provider is fully enabled, I'll go back to my web app inside Google AI Studio. I'll give it one simple prompt. Make the continue with Google button work using Superbase off. Then I'll run the prompt. To test the login, we need to open the deployed web app because Google signin doesn't work inside the Google AI studio preview environment. So I'll open the live website. Click continue with Google and as you can see it works

13:40perfectly. Google shows the account selection screen. I choose my account and after clicking continue the login is successful. Superbase pulls my Google name and email automatically and you can see everything is displayed correctly on both the dashboard and the account page. So at this point, Google authentication is fully working and that completes step one. Now let's move on to step two, storing user data securely inside Superbase. Now the authentication is enabled. The user can successfully log in. But at this stage the user exists but the data doesn't. Even though the user is authenticated, they still don't have any personal data saved in your database. Right now,

14:20what you're seeing is just the user interface, not actual stored content. This is completely normal in Superbase. To store real data for each user, we need to create a new table in Superbase. And here's how Superbase works. When a user logs in, Superbase automatically gives them a unique user ID. This user ID is what we will use to attach their data to their account. Every user will have their own row in the table completely separated and protected. Think of it like this table here. User ID identifies the user data name the type of content shopping list tasks project notes data value the actual saved content and everything is protected using rowle

14:58security policies which means each user can only see and edit their own data never anyone else's. So in this step we'll create the database table where your app will store the user's content. Now let's actually create the table inside Superbase. You can create a table manually by going to table editor and clicking new table. You choose a name, add the columns one by one, and configure everything yourself. But honestly, that takes time. And as always on the channel, I prefer to give you the fastest and cleanest workflow. So instead of building the table manually, we're going to generate it automatically using Google AI. I'm simply going to ask it to prepare

15:37everything we need for this step. I'll give it a short instruction to look at the current web app, understand what kind of data the user creates, and generate the ideal superbase structure for storing that data. Google AI will figure out what needs to be saved, and it will write the SQL required to create the table along with the policies that keep each user's data private. This way, we get a clean

15:59database setup that matches the app perfectly without having to design the structure ourselves. Now I paste the prompt and run it. All right. Now let me show you the result and what we're going to do next. Google AI generated the full database schema SQL for us completely automatically. It looked at the UI, understood what the app needs to save and created the ideal table structure. So let's actually create this table inside Superbase. So the first thing we need to do now is copy this SQL code. From here, I go to SQL editor, paste the SQL code we just got, and hit run. Just like that, the entire table is created in seconds. Now, let's double check it. I open table editor,

16:44refresh the page, and you can see the new table right here. Superbase generated all the fields the app needs. The ID, the user ID, the title, the content, everything is already set up perfectly. And the best part, Superbase also uses RLS policies, which means each user can only access their own data. When I open the policies page, you'll see all the rules created automatically. That means they can create notes for themselves, view only their notes, update only their notes, and delete only their notes. All of this works because Superbase checks that off UID always

17:18matches the user ID in the database. So yes, the table is fully protected and everything is secure. Now, let's quickly test everything to make sure the database is actually working. [clears throat] I'll go back to the web app, click create new note, and I'll add a simple example. Title: My first synced note content. This is a test to check if Superbase is saving my data. Then I hit save note. Now, let's confirm it inside Superbase. I open table editor, select the notes table, and there it is. The note is stored perfectly. the generated ID, my user ID, the title exactly as I wrote it, and the content saved without any issues. Honestly, is there anything

18:00easier than this? People usually think the backend part is complicated. But here, we didn't write a single line of code ourselves. Google AI handled the logic, Superbase created the table, and everything is already working behind the scenes. And by the way, if you like tutorials that make complex things feel simple, make sure you like the video and subscribe. I share a lot of step-by-step

18:20guides like this so you'll always stay ahead when building your own apps. Step three, file uploads. All right, so now we already have authentication working. That means Superbase knows exactly who the user is and we've connected the database. This is where we store structured data, things like notes, text content, settings, and profile information. Basically, organized data. But what if the user wants to upload a real file? an image, a PDF, a document, a video. That's not what the database is built for. And this is where Superbase storage comes in. Storage is designed specifically for handling actual files, while the database keeps only the references and metadata. So now

19:01we're going to activate that missing piece and make file uploads work properly. Let's do it. We go to Superbase, then storage, and make sure we're inside the buckets tab. Now we need to create a new bucket. A bucket is simply the place where all uploaded files will be stored. Click new bucket. For the name, I'll use app-files. I recommend you use the same name because we'll reuse it later in the SQL and in the Google AI prompt so it keeps everything clean and consistent. Now, here we have a few options. Make sure public bucket is off. We want this bucket to stay private. You can also restrict file size if you want to limit how big uploads can be. And you can restrict

19:40mime types if you want to allow only certain file types. For now, we'll keep things simple and leave them as default. Click create. Perfect. The bucket is ready. But just like the database, we still need security rules. Yes, you can create policies manually. But instead of doing that one by one, we'll use a ready SQL script. So, we go to SQL editor, clear anything inside, paste the

20:07script I prepared for you. You'll find it ready in the video description and in the full guide. And this is exactly why I recommended naming your bucket app files because inside this script, you can see the bucket ID is already set to app files. So if you used a different name, you must change it everywhere you see bucket ID app- files. Otherwise, the policies won't apply to your bucket. Now I'll click run selected. You might see an error like this. Don't worry, this is not a real problem. This happened because I accidentally selected part of the text. So Superbase tried to run only that piece. All I'll do is refresh the editor,

20:43make sure nothing is selected, and run it again. And that's it. Now, let's verify everything. I'll go back to storage, open the app files bucket, and click on policies. As you can see, four policies were created automatically. One for viewing files, one for uploading files, one for updating files, and one for deleting files. All restricted to authenticated users and only inside their own folder. So now our storage is fully secured. Perfect. Next, we go back to Google AI and connect our web app to this bucket properly. I'm going to give it a structured prompt to connect all existing upload features in the project to Superbase storage. In simple terms, we asked

21:24it to do three main things. First, use the bucket we just created with the exact same name. Second, make sure every uploaded file is stored inside a user specific folder that starts with the user ID. That way each user is completely isolated from others. Third, after uploading a file, save its path inside the database and display it using signed URLs since the bucket is private. We also added delete logic. If a user deletes a file from the app, it gets removed from storage and from the database as well. Once Google AI finishes the changes, I'm not going to test this only inside the Google AI environment because when it comes to file uploads and storage, it's

22:04always better to test everything live on the real deployed site. So, I'll click save to GitHub. This pushes all the changes directly to the repository and from there the live website gets updated. Now, let's go to the real website and test everything properly. I'll click create note. I'll click create note. Let's create a test note project file system test and in the content testing

22:29superbase storage integration uploading multiple file types to verify everything works correctly. Now let's upload some files. I'll click add cover and upload a cover image. Then I'll attach a PDF file. Then I'll add another image inside the note. And finally I'll upload an audio file just to test multiple formats. Now I click save note. If everything is configured correctly, the files should upload to Superbase storage. Their paths should be saved in the database and they should display correctly inside the app. Now, let's go back to Superbase and make sure everything actually worked. I'll open the bucket we created, app files, and refresh. And as you can see, we now

23:08have a new folder with this long random looking ID. That's not random. That is the authenticated users ID which means every user automatically gets their own isolated folder inside the bucket. I'll open it. Inside you can see exactly what we uploaded. Under attachments we have the PDF, the image and the voice file. And under cover we have the cover image we selected for the note. So this confirms something very important. Every file is stored inside the correct bucket, inside the correct user folder, fully protected by our policies. Everything is working exactly as it should. That means our storage is now properly connected and secure. And by the way, at the end

23:49of this video, I'll give you this exact project as a starter template so you can use it or build on top of it. And now we're ready for the final step. Step four, connect everything cleanly to the UI. This one is simple, but it's what makes everything feel professional and complete. Let's finish this properly. On the homepage, we had this total notes card. It was showing 12, but that number wasn't real. So, I asked Google AI to connect it properly to Superbase. Nothing fancy, no redesign, just

24:20linking that card to the database. Now, it reads the real number of notes for the current user. Let's test it. I'll create a new note. Go back to the homepage and now the number updates automatically. That's the difference between a beautiful interface and a working product. But let's go one step further. If this is going to be a real SAS, we need limits. So I added a simple rule. Free users can create up to three notes. Before creating a new one, the app checks how many notes the user already has. If they reach the limit, creation is blocked

24:58and we show a clean upgrade message. Let's test it. I'll try to create a fourth. And there it is. Upgrade required. Now, this isn't just an AI demo anymore. This is a real SAS foundation. From here, you can connect payments, subscriptions, Stripe, PayPal, whatever model you want. And yes, I'll cover payments in a dedicated video. But what I really want you to see is this. We didn't just generate something cool with AI. We turned it into something structured, controlled, and monetizable. That's the difference. If you want everything we used in this video, the full guide, the complete project, it's all waiting for you in the description,

25:36step by step, clean, ready to build. And if your app isn't live yet, don't stop here. The deployment video you need is on your screen right now. Click it, launch your app, make it real. So, let me ask you, are you just consuming AI content, or are you building real SAS products? If this pushed you forward, hit like, subscribe, and I'll see you in the next build.