Vibe Coding with Gemini 3.1 (full build / beginner friendly)

What's going on, guys? This is Oliver, the founder of roseorld.dev, where I teach people how to vibe code and make money with their own software apps, and paperers.com, which is an AI content agent. In this video, I wanted to build from scratch a AI content agent that allows you to turn any YouTube video into social content for X or Twitter um and LinkedIn, right? So, I'm obviously going to be going through the build of this landing page. You got the design here of the video. You've got the simple sort of like uh um trusted by teams. You've got the grid of features from here. Then you've got this little design by here explaining how the app works. And then obviously you've got the features section followed by the reviews section and then getting started. When you sign in um you are just shown a dashboard that shows you um the transcription route. So from here you can upload a YouTube video. I'm obviously going to just upload this one to uh transcribe. And then from here, once that's done, when you scroll down, there are posts available for you um to use for your social media. The same applies to LinkedIn as well. And then obviously from this way, you just upload any uh content that you want and then it creates the post based on that. The LinkedIn one obviously works the same. I'm obviously going to create um the entire app from scratch. We'll be going through Google AI Studio to do this Superb Base and Cursor. And if you guys have any questions at all, let me know. But all of the PRDs and prompts will be in the description in a Google doc as well. So, see you in there. Okay, guys. So, the first thing we're going to do is go through um the PRD and we're going to post that directly into Gemini 3.1 Pro. So, obviously I'm over in AI Studio. Um so, AIS.google.com/apps google.com/apps. Um, and what I'm going to do is obviously says build your ideas with Gemini. And in case that is it's uh defaulted to Gemini 3 flash. That's obviously a quicker and um sort of less intelligent model, just uh click on model and then go to the dropown and click Gemini 3.1 Pro preview. So the first thing we're going to do is head over to Claude. And I'm going to start building um the sort of general overview of the sort of dashboard. the uh logic, the ideas, I suppose what we want the app to actually do, right? Um obviously this app is going to be um just a dashboard where you can um upload YouTube videos or documents etc. and then create posts from that for social media. Um so the first thing we're going to do is just start writing the PL. I've actually started using a tool which is totally free called Super Whisper. Um which is basically you click uh option and spacebar. this like little thing comes up and it starts listening to your voice, right? So, I'm just finding it a lot easier to just kind of brainstorm my ideas with Super Whisper. Um, I use the free model, but the free model is literally like still insane and really, really good. Um, and from there, obviously just finishing that and just sending it to the AI. So, um I'll obviously cut off the additional bit that I've just said, but I want to create um a app on a desktop on a browser that allows users to upload a YouTube video link. The YouTube video is then transcribed and then from there um three cards are created underneath the YouTube video and they are able to create three tweets from the content of that video. There is also a LinkedIn option where you can upload a YouTube video um and then it creates you a LinkedIn post. And there is also going to be a drafts process where any of the posts that are created based off of uh the content, they are saved to drafts. I'm going to be using Superbase for this. Um so we're going to be using a table that saves the YouTube transcript. We'll be using a table that saves uh the LinkedIn posts and the exposts and also obviously the drafts table will save the actual post themselves. From there I obviously want a beautiful UI minimalist inter font. So in ner font I want it to look like the uh sort of enterprisegrade YC uh y combinator apps such as atio or firecraw. I want it to be a minimalist system or light UI. I don't want it to be dark, lots of white space, lots of beautiful soft shadow. And I want a pretty sidebar that has the dashboard where you can upload the links, the drafts page, and the settings page. Uh, and from there, I just want you to create a minimalist landing page with a features section, a reviews section, which can have demi data. I want there to be a beautiful footer. Um, I want there to be a beautiful, um, sort of hero section with a simple, um, placeholder for a video. Um, and I want you to create all of this as a PRD to give to, um, AI Studio by Gemini. So, we're going to be giving this PRD to Gemini. So, please create this as an extensive PRD. So, as you can see, guys, Super Whisper, um, I have it downloaded for, um, Super Whisper for Mac. You can see that it's given this this entire thing that I've just said um to the AI to Claude. So, what I'm going to do is I'm just going to delete some of this. So, um I'll that I've just said. So, uh I want to create an app. Here it is. So, want to create an app on desktop on browser XYZ. So, here we go. So, I'm just going to add to the start um create me uh an extensive PRD for UI, design, UX, um landing page, etc. Want to create an app on desktop XYZ. So, it's on Sonic 4.6 extended. I'm now going to do my classic thing where I go over to Dribble um and look up some of my favorite UIs. So, we're going to go to Atio. Um, we're going to upload this as a UI example. Um, I'm just going to pop at the bottom. I've also added UI examples for the beautiful PRD design, eg atio, interfont, lots of white space, logos, um, pills, designs, etc. So, from here, I'm also going to find some additional images. So, this one's nice. And then what I'm going to do as well is look up um the just like a landing page that I like. So, from here, if we go down to, for example, if I just do like minimalist landing page, I think an example would be like Don't really know. Let's say SAS landing page. There we are. That's more like it. So, I'm going to use this one for example. Only black text on the landing page. Slash dark gray, never blue or uh vibe coding slot. vibe coded slot. Let's find another one that we really like. So, um, don't really know. That one's quite nice. Let's pop that in. So, I'm just going to generate this with Sonic 4.6 extended. It's going to take a while. This is on the free plan, by the way, guys. You can do this entire thing that we've done so far on the free plan. So, let's just uh generate that. Now, while that's being created, I'm actually going to create a new um Superbase uh you know, like account basically. So, I'm over in my emails. I'm just going to confirm the email address. Um and we've now gotten into the dashboard. I'm going to name it um YouTube example. Um and we're going to go to personal free $0 a month. Create organization. uh just use a strong password data API create new project whatever it may be um and that is fine so no thanks. So we've now got a standard um project. Obviously the PD is still being created. Please also create me the full scale SQL code for this as I'm using superbase. And we'll need all the backend tables to store all this and manage authentication for the users and saving data etc. And obviously I'm just going to wait until that's actually done to do that. Okay, so the PRD has been created, right? Um, here's your complete clip post PRD, right? 20 fully spec sections, right? I mean, this is ridiculous, right? I mean, like Sonic 4.6 goes nuts and creates like this ridiculous entire thing. We obviously don't really need that. Um, I feel like Are we going to do this, man? Okay, let's just open it as a document. You can't like open it. You can open it in the drive, but I wanted it like straight from a Google doc, right? So, we're going to go straight into build IDs of Gemini, right? Um, and we're just going to paste this in. So, let's just double check. Executive summary. Oh my god, it's actually there's actually so much. Okay. And we're now obviously just going to paste this in. Um uh follow the PRD to build my app SAS app. We will connect back end later. Um okay, it's going right. So I'm just going to skip ahead to about 7 hours from now when this is when this is done. All right. So see you in a minute. Okay guys, so um we ran into a few issues, right? So it ran for 1,200 seconds, right? Which is like 20 minutes and then after that we ran into a load of bugs and then we asked it to run for another sort of like I don't know it was like 10 15 minutes, right? So um from here obviously you've got like a pretty bland landing page. Um you've got the dashboard itself with the video URL drafts etc. We're just going to go to the code and we are going to download as a zip file. What we're going to do now is head into our files, open project downloads, zip, and we've just opened up this code. Right. So, if we just pop on the sidebar, um, and I'm going to shut that for now. Um, and then is it command L for this chat? Yeah. Um, what I'm going to do now is open a terminal. I'm just going to say, uh, mpm install. Um, and it's going to run all of the installations. So, what we've done, guys, just for clarity, we have created the app. Um, but then we want to run on local host and like start using cursor with it. So now um if I do mpm rundev, it should be on 3001. So I'm going to open up 3001. I've got a nose bleed. Sorry. Um uh is what we do for the YouTube video, you know. Um so it's looking pretty pretty sort of miserable here. So um we're just going to start adding additions to it and set up the back end. So if we click sign in from here um we are connecting the superbase first. So I'll just um skip ahead to when this is done. And actually in the middle of this I'd asked um Claude for a full document of all of the um SQL that we need to run to make the correct tables in Superbase. So we're going to go over to Superbase and just click on um SQL editor and just paste all of this in. If we run it, it should run without any bugs. If we go into the table editor, you'll now see um a load of new tables. So, drafts, LinkedIn post, profiles, transcripts, logs. We're also going to go into authentication, email, and then we're going to click confirm sign up. Um oh no. So, project settings. Um where is it? Project settings. Was it an authentication? Allow your new users to sign up yet. So, here it is. Confirm email. So, this is just because we haven't set up email settings yet. I do this on all of my projects. Going to head back over to um Superbase now. Sorry, it's cursor. That should be running everything. Head over back to the tables to make sure everything is good. And I'll just skip ahead to when this is done now. So, it's asked I can also add root protection so that the app requires a valid base session. So yes, please add that because obviously we don't want people to be able to log into the app and like use it and stuff like that without having actually um created some kind of account. So please add that so that only authenticated users can use the app. So I'm going to go ahead and actually just check this out first. So if we go to my Google um let's just sign in or actually I think we can just check out the um app itself. So YouTube URL LinkedIn whatever it may be drafts are here which is quite cool. It still looks a bit sort of like gross but we'll sort that out. Um add a proper survey session guard app.tsx. I'll just uh skip ahead to when this is done. Okay so it's set of the protected um route so that you can't use the app unless you're logged in. So, we're going to go and hit click get started. Um, create post. So, I'm just going to say create account. Sorry, Oliver B plus 100. Um, pop in a password. Sign up. And now we are in. And let's just double check. Um, I just made a test, made another one. So, now we are here. Okay. So, um, what I'm going to do now is we're going to set up the YouTube transcript API. So, I already have an API um, account with YouTube transcript. This is just the tool I use for transcribing API uh transcribing YouTube videos. So going to go to um create new API. Key for transcript API is very very cheap. Um we're going to say test for YouTube create key. Um and we're going to click on that. I'm now going to head over to the edge functions. I'm going to add a secret and the secret ed edge function will be transcript API key and the value is going to be value. So, um I'm going to say I've added transcript API key under transcript API key in the superbase edge function secrets. Please uh please can we now make an edge function that transcribes a YouTube video and then saves the transcription to the users backend table. that we created. For reference, here is the SQL code we used to create all the tables. So, um I'm going to go and go back to this. I'm going to copy this and I'm just going to basically show it's obviously a big waste of tokens, so don't do this, but excuse me. um make this and I've just shown it all of the um SQL code that we've used. So make an edge function that will call the transcript API. Um and what it's going to do basically ideally it's going to call the YouTube transcript API key and then it is going to save the transcript for the user into YouTube transcripts. Um, so this will be an edge function. Takes the YouTube URL, uses the transcript, and then writes the transcript into the public transcripts. I'll first inspect the current project structure for superbase function, scaffolding, etc. I'll just skip ahead after this is done. Okay, so the edge transcription is now built and wired into the app. So we're going to test this. So I'll go to one of my more like theory based videos. So copy this or if we just pop in here and copy this link address. So, um, one of that do that. Um, going to go into So, obviously, if we like paste the URL here on the free version, um, you'll see that it just transcribes the video, right? What our plan is is to transcribe the video and then use the content to create the post. So, if we head over to here, just going to um, sort this out. I'm going to transcribe and it said failed to send an edge function. So blocked by cause policy. Okay. So let's just post this into the um cursor so we can try and bug fix. Okay. So there was an issue with the authentication. So basically at the bottom left um I was logging in but it was saying like userample.com. Right. So now that I've um just double confirmed that the user is logging in and logging out now that we are logged in the edge function is working. Right. So I've just gotten this example of a video from Daniel Fazio which I really like. Um if I go to the video I'm just going to click transcribe and the video is there. Right. So um transcript in yesterday's video talked about XYZ ABC whatever it may be. and building a SAS in 2026 is completely different. Okay, so we now have the transcript itself. So if we go over to the table, there should be a transcript. There we are. Great. So the transcript is there for the user. If we now um refresh um if we now refresh, there should be drafts. Cool. Um so the drafts are actually here now from the video that we created. But obviously if we just do this again, the the actual like posts have nothing to do with the video, right? Because Daniel's video is about AI assisted agencies and how to build an AI assisted agency. And these are just like random things about um building in public in SAS. Excuse me. So what we need to do now is head over to Google Studio. Um, we're going to go back to um we're going to click get API key and we're going to create an API key on the AI studio and we're going to um do Gemini API key uh YouTube video test create key and it's going to create a key um Gemini. So, YouTube video test copy API key. Um, we're going to go over to the authentication and we're going to sorry over to edge function secrets and we're going to do Google API key value save. From there I'm now going to say okay thanks we have now added the Google API key in the secrets and I want you to now ask Gemini three preview I think it is um um via their API docs to feed the transcript Gemini that we made through the edge function call Gemini to create three tweets based on that content. So the process is step one read uh function flow one um transcript is created sent to Gemini prompts Gemini to write three tweets. tweets come back to the front end ready in the same format as now. Right now the issue is that the tweets are just placeholders um and not using Gemini to create them. So I've just posted that in now. So, here's what's happened on on a sort of like an overview. What we've got is we've now got um the app that transcribes the video through the um transcript API, right? Obviously from this perspective, it now transcribes it really really quick and you get the full transcription. But obviously the actual posts that are being created ready to um like tweet are just not relevant at all to the video because the transcript is not being fed to Gemini or fed to any kind of AI. So what we've asked, we've added the Google API key from Gemini um to our superbase and now we're going to edit the edge function so that instead of just transcribing the YouTube video, it also eats the YouTube videos transcription, sends it to Gemini and then writes the posts based on that. Right? So if we head over to that's sort of what um my app does, right? So you feed it something like a YouTube video and then you can just um basically create a tweet based off of that YouTube video. Um so obviously from here it actually feeds it to the YouTube video, feeds it to Gemini and then creates the post and then you can just literally post it immediately. Right. So um we're going to go ahead now and check up on the code wire Gemini tweet generation. And now it's going to obviously edit the edge function as well. So implemented the placeholder tweets are now replaced by real Gemini generated tweets. What's now happening is um it creates a transcript edge function um returns three tweets and then saves those to public expost. So what it's done is it's now split um it into two. So we're going to post this new one in. So it created a new transcription um tweet generation called index.ts. Uh, so we're going to do generate slash tweets. Um, generate tweets and then we're going to deploy that. Let's just double check that that's all fine. So the code should be this. Yeah. Um, what we're going to do now is head over to a test. So we've got another different YouTube video from Daniel Fazio. Strongly recommend you check him out. Um, I'm going to go to transcribe. So, got the video in and no tweets. I think it's because there's JWT on this one. So, if we go to details, uh, turn JWTP off for now. So, if we go to um the URL transcribe, the transcription comes through now, which is good. And then what's happening here is I presume the uh call is being made based off of the function success. And then the tweets should come in. Um, so, and there we are. So, we're going to talk about how proud to price your services. So, this is relevant to the video. It's just that these tweets are really, really bad. So, what I'm going to do now is I'm going to head over um and see where the um Okay, there we are. So, yeah, that's fine. So, this is the prompt. Okay, thanks. But the returned posts are terrible. They need to be three long form informal actionable tweets more than 28 280 characters because we're going to be using like the premium version of Twitter. Uh, three long form infernal Ashill tweets more than 280 characters, actionable, powerful, useful, use, um, list items, use examples, etc. Need to be viral, powerful tweets. Powerful tweets all at least 500 characters. just improve the prompt for the X tweets all together. So the problem is now obviously we're on the final hurdle. Problem is that um we're obviously sharing the actual video. It's transcribing it successfully successfully and then obviously the actual tweets that are being posted back to us are really really bad because it's just these three awful tweets. So, if we go back to the AI studio um and refresh the page, as you can see from the logs, um you've got this entire giant like thing and the return is obviously broken in some way. May the generator produce long form post, drafts, 500 characters, actionable, etc. So I'm now pretty happy with the results of um the transcript 2 tweets. So obviously these are like longer form tweets and then um they're actually coming in that are looking quite good. I'd probably you know post some of these um obviously whilst giving um actual credit to Daniel Fazio obviously. So from here now um now that this is done I'm actually going to ask um thanks. Now can we add um add functionality to generate LinkedIn post from the YouTube video. So, a new and prompt that creates just one LinkedIn post when a user toggles for LinkedIn on the front end. So, what we're going to do is obviously now that we can create tweets from thin air with YouTube videos, we're now going to use LinkedIn. So I've you can see there's a very very small like choice to choose LinkedIn and from here now obviously um the LinkedIn post is going to come in but this is just like a um placeholder for now. So we'll skip ahead to when it's created the LinkedIn function and we'll go from there. So we've now got the um LinkedIn creation done. So from the same YouTube video if you come down here you've actually got a full LinkedIn post that's ready and reading through it is actually like not bad. It takes all of the alpha from Daniel Fazio's video and then creates a tweet from it. Um, and then at the end it even asks um a like like a sort of engagement question to get you sort of like more engagement on LinkedIn. Right. So, I'm trying to think now of the last thing. So, if we just double check if you're still building B2B clients, we're just going to double check that um the LinkedIn posts um are saving. So, LinkedIn. Yeah. So, it's being saved into the drafts page, which is good. Um, and then I think what I'm going to do now is just I suppose go ahead and start sort of redesigning the landing page a bit. So, uh, if we go into log out, um, go to localhost. So, what I'm going to do is I'm going to create a video for the actual landing page. Um, but obviously I can't right now because I'm already currently recording. Going to try and just make this look a bit more beautiful. Um, so please make a long PRD for improving my landing page for the app with um, uh, what we're doing is like lotty style animations. Trying to move the recording thing out the way. Um, with lotty animations, SVGs, dynamic loading, textures, and grid layouts, more beautiful stuff, minimalist designs, things like that. So, it's obviously going to take this landing page now and just make it look a bit more beautiful. And it's going to create a PRD. And then we're probably just going to post that PRD into Opus 4.6 cuz it's the most like probably the best model for design in my opinion. While that's working, I'm actually just going to sort of plug into Opus. Um, please can you do a sweep of the UI and UX of the dashboard and just make everything look more beautiful. More hover stuff, some animations, add additional lines and items and um pretty stuff. It just looks a bit vibecoded and flat right now. So just sweep through and make the dashboard more beautiful while retaining all logic. So I've obviously just given Opus that pretty vague thing. It's just going to just make a some kind of uh sort of change dynamically to the design. And obviously from here we've got the PRD still running to um improve the landing page itself. Okay. So the PRD um for the landing page is done. So I've just pasted it in here and say please follow this PRD. Um and we're just going to go ahead and just pop that in and we'll be back when that is done. Okay. So, um, the landing page is done and so is the dashboard. So, let's just pop in here. So, this list this already looks much better. You've got the, um, I've just asked it to save some space for the video that we'll upload. Um, that is broken, which is a bit annoying, but if we just refresh the page, go down, got this. So, we'll just we'll fix that shortly. everything you need to repurpose content, three tweets, whatever may be three steps. So, YouTube video to transcription to content and it's animated which is pretty cool. 500 whatever it me uh okay so this is fine repurpose start today. So, sign in. Um, Oliver Bur, we're going to say plus 100 and then Oliver 199. Sign in. This looks much better. The drafts have this animated thing that come in, which is really nice. Settings and then obviously dashboard. You've got transform videos. Let's just do a video test. So, that's come in. Scroll down and we've got the videos ready to go. Um, let's actually go back and just do the same with LinkedIn. Scroll down and then the LinkedIn post is there as well. It's longer form. Um, and looks pretty good. So, just to sort of recap, what we've done is we've created an app that allows you to transcribe videos and turn them into posts. We've designed a landing page. And after this video is done, I'm just obviously going to add a few more embellishments to the landing page, fix a few little things, and then add the video itself. Um, we've also set up Superbase to manage edge functions and tables with save data. And then from there, obviously, any questions you guys have, just let me know. And I'll see you guys in the next video.