200+ Days of Vibe Coding PROFITABLE Apps (in 24 mins / beginner friendly)

What's going on, guys? This is Oliver, formerly from Response AI and a few other software tools and now running a few new tools, including paper schedule.com, which we'll go through in this video, and rose.dev. So, in this video, I want to go through um my entire app that I have built from the ground up with cursor and vibe coding. And I've actually gotten my first handful of customers that are profitable customers signing up to the platform using, you know, outreach and ads and that kind of thing, right? So, what we're actually going to be doing is going through the full setup of the app, how I built the entire app itself, the front end, the back end, and everything. And the way that we're going to be doing that is by actually going through um a first a simplified version of how the app works and the front end, back end, everything that I've asked Cursor to deliver to me. So it's straight from the source covers absolutely everything. But then we'll go back and go through the more sort of um complex version of this how it all works kind of thing, right? And on top of that then I'll go through the flowcharts of everything that happens front end, back end, onboarding, offboarding. The first thing we'll do is I'll just explain how some of the actual features work. I don't think this is very relevant to you guys because you guys are like you know looking into um building apps and you guys are building apps currently with vibe coding tools and stuff like that. I wish I could build something that would be super useful for you guys but um I I can't really. The things that would be useful would be things like vibe coding tools and those are extremely hard um to build. So I'm having to build something that is useful to me because I already have a live product. What's happening here is it says welcome to paper um and it says identity. So what is your website URL? So we're going to say uh capfern.com for example. It's then going to ask you what channels you want to post um to you know via social media. And then it says, "Who are your top competitors?" It does an analysis of the top competitors. And we'll go through this in, you know, on the back end um in sort of extreme detail. You can then choose um different sort of um sources that you like. So, how to find angel investors, full 34page guide, how to use AI to find investors. We're going to build the content engine and add those sources to the brain. And then from there, guys, what's going to happen later is, you know, because I've already done the onboarding, it's just going to say onboarding info updated, right? So, what we're going to do is go into the agent itself. Now, the agent itself is just um com comprised of recipes. So, if you want to plan posts for Blue Sky from a blog post or draft post, etc., there's all these different recipes that you can use to do that, right? So you can create a recipe based off of um creating a recipe from content to make content, right? This is the brain. The brain is where all of the data is um that you store in the brain. And then when you go into create post, you can actually choose stuff from the brain um to write posts about. So let's assume you want to create a Twitter post and schedule it for the next available slot. Um and you want to use this YouTube video as like the brain, right? You're just going to click um on compose and then it's going to compose the actual post. And from there then obviously the post is completed. It's pretty long-winded. It's pretty like uh detailed explains everything and you can either just post next slot or post now. Right on top of that then every um user has the connections that they can make. So they can connect to all the platforms they can choose the schedules for specific platforms and then they can give the AI custom instructions. So, for example, for my Reddit posts, you know, um I want, you know, instructions, whatever it may be. I want it to be a how-to. I don't want there to be any emojis or hashtags, etc. You can give custom instructions. Now, from that perspective, let's actually dive into how paper works. So, the simple answer is paper helps you post on social media. Okay? So, it it it does this without writing everything yourself. You don't have to sort of, you know, do research on posts and do research on content that's relevant. Think of it like a helper that writes posts for you and there's a calendar that posts at the right times and then obviously there's a filing cabinet or a brain for the ideas. Okay. Now, how it works, you sign up, you tell paper about yourself, so your brand and where you post, what social media profiles you have, who your competitors are. You add ideas and your favorite articles, favorite videos, PDFs, etc. to the brain. And then you can write posts however you want. You can post them you know completely raw by just writing them yourself or you can write them based on those ideas that are inside those YouTube videos or blogs etc. You can schedule when to post and then paper post for you. So a real world example you find a YouTube video you like you add it to the brain paper watches it and then it writes a post based on that you can pick when to post and then it posts it automatically to all platforms at once. Right now question two how does all of this work under the hood? So the simple answer, the back end stores your stuff and then it makes things happen. So think of it like a filing cabinet which is the database. So the brain, a helper robot, which is edge functions, which we'll go into in, you know, in a minute. And then a security guard, which is authentication, like I don't want you to access my brain because it's all of my YouTube videos. I don't want someone else to be able to access Steve's brain or Phil's brain or Jenny's brain, whatever it may be. Now where the data lives is when you sign up your name and email go in a folder labeled with a specific ID and that's on superbase right and only you can see that folder because only you have that um specific user ID and this is how authentication works right think of it as um if you have a specific key to a door and only you have that key only you can get in only you can see your furniture only you can see your bed and only you can see your TV etc When you add something to that brain, it goes in your folder. Paper remembers it. And when you create a post, paper saves it in your folder and it remembers when to post. Right now, how data moves around, right? It's like mailing a letter. You write it on the front end. The back end is the mail carrier that takes it and then it goes to a mailbox, which is the database. And that's superbase. How do payments work? This is so important guys, right? You pay paper a subscription like Netflix. It's like a 7-day trial, then you pay monthly. Stripe handles the money. The payment journey is that you click subscribe. It's like clicking, you know, buy on Steam or to buy a game. You go to Stripe's payment page and then you enter your card and Stripe keeps it safe and then Stripe tells PayP on the back end they paid and then PayP unlocks everything for you. Okay. The free trial is seven days and then after seven days it is end you know it is programmed so that stripe charges your card and if you cancel but before then obviously you don't get charged but you keep access until the seven days is over. If payment fails paper shows you a message that says you know the the you [laughter] card has failed um and you can update your card um and then paper tries again later if your card is updated. Okay. Now the design systems. So think of it like a coloring book with set colors. The handwriting guide, a ruler for spacing, etc. The background is always pretty gray. The buttons are always dark blue or terracotta orange. The text is dark gray or black etc. Accents are you know green for success, orange for warnings, etc. And the main fonts I use are Gist and then Jet Brains Mono for the code the code like you know like numbers and code that kind of thing. Everything uses the same spacing rules. Small gap is 8 pixels, medium is 16, large gap is 24. And then why it matters, guys, it's a consistent look. It's easy to read. It feels professional. And it's just easy for people to navigate the app itself. Okay. Now, how does the brain works? The simple answer is that the brain is your idea storage. Okay. So, think of it like a filing cabinet, a notebook, or a scrapbook. What goes into the brain? links, articles, blog posts, etc. Paper reads them and saves the text. YouTube videos, so paper gets, you know, the transcripts and saves it, etc. PDFs, so paper reads them and then saves the text and then competitors and that kind of thing. You add names or websites and then the competitors are scraped. How you add things, you basically just go back into the app and you go into the brain and then you can add a link from the brain or you can add a YouTube video, etc. And all of these when you add them they get scraped and then saved to the brain. And as you can see all of them are here and you can actually you know look at all the transcripts etc. Right? So how paper uses the brain when creating a post you pick something from your brain. Paper reads it. Paper writes a post about it and then it uses your brand info and instructions to personalize it like a recipe ingredients the chef that kind of thing. How does creating a post work? So creating a post, you pick an idea, paper writes it, and you schedule it. It's like writing a letter, picking when to send it, and then it gets mailed automatically, right? You open the create post window, you can choose what post um what post from what platform to use, right? So if I want to do LinkedIn, it will write me a longer form LinkedIn post. If I want to choose Reddit, um I obviously have to choose the subreddit um and then it will post to the subreddit. Um and then obviously Blue Sky, etc. threads, whatever it may be. Um, from there obviously what you've got is each of these different platforms. I am calling Gemini Flash, which is the API that I use. It's very, very cheap to like write good content. Um, I ask Gemini to create posts based off of um the content. Okay, so let's assume that we're going into Twitter and X again. I'm going into my brain and I want to use one of my own videos, building profitable software um with AI, right? So, what it's going to do is when I click compose, it will send the transcript of this video and the data from the video to Gemini and then from there it will write the post based off of that data. So, what's cool is that I don't have to write tweets separately to my YouTube videos. I just make the YouTube videos and then I just feed it to the brain. Okay. So from here ask paper to write it. It generates it with AI and then paper is done like you've posted it right now obviously it remembers those brain items because it saves it on the back end and then from there you can use it again whenever you want and the magic behind that is that paper reads the idea checks your brain for context writes the post checks character limits for each platform and then like a smart assistant you know a smart assistant it writes your notes etc. Now the tech stack and build pipeline. So tools used to build the app is the tech stack. Okay. So the tools front end you've got React the building blocks. Typescript you've almost got it's like a spell checker for code. It makes your code really cool and really good. Vite is the fast builder. So it builds the app quickly and like that's why it's like fast to like navigate around. And Tailwind makes it look cool. Backend is superbase. Okay. So database and helpers. The edge functions are me giving commands. So an edge function for example would be um you know ask Gemini to write the um blog post. No ask Gemini to read the blog post and write the tweet that kind of thing. So Gemini is the writing assistant for example and when someone pays an edge function is used um to you know send information to Stripe and to my app so that people only people who are paying or triing users can get into the app. Okay. Now how building works you start on the local server which is localhost you see the changes instantly when I save the data. When I change code or change the color of a button I just press save and it's done. And then when you put it online, it's the production, right? So I use Versel for production. So I get a custom domain. Um I attach it to Versel for free and then I just deploy it. All of this is on the back end with um GitHub and then GitHub. Every time GitHub updates, Versell updates. So every time I save my app when I'm actually coding it, my GitHub will update and then from there my versel um will update as well. Okay. Now the folders. So you've got components, pages, the library for the functions, context, etc. I won't go into too much detail. That's just all all your different toys in in an organized sort of like um you know loads of different boxes. Now the database and security. So superbase back end the simple answer is the database is where your data lives guys okay you're keeping it safe so think of it like a bank vault each person has their own box and only you can open your box how security works is with rowle security so every piece of data has your name on it and only you can see your stuff so when you sign in you prove who you are with your password or Google paper gives you a special badge you show the badge to see your stuff and then paper checks the badge and lets you in. Your data has your ID. Only you can access your data and even paper can't see other people's data, right? So obviously if you need support, you're going to have to help me out and you know and I have to sort of go on the back end look at things, but people can't see each other's data and see each other's tweets that they're posting or that things that they've got scheduled. Right now I've actually just uh changed where I'm sat because the sun is coming in. Um, and the things that we're going to skip over, um, obviously you've got the setup and deployment, but then from here you've got the build system and development workflow, right? Um, in general, I just start on development mode like I said, and then I build and then the environment variables are sent to GitHub and then sent to Versel. So, the thing that I really want to talk about here is the edge functions, right? So, the simple answer to the edge functions and how they work, they are helper robots that run in the cloud. So think of it like helpers that do tasks. They run on superbasis servers so you don't have to worry about, you know, sort of like you running it yourself or spending money on it. And it's not on your computer. So it's actually typically much faster unless you have a really fast computer, right? So how they work, you ask for something from the front end. The edge function receives the request, does the work, and then sends back the result. It's like ordering food, right? Your order is the front end, the kitchen makes it, and then you get the food. The only thing is um it's not like a restaurant because when you order the kitchen makes one copy of that food and then gives it to you right whereas on superbase it does the work and then it will save it. So an example is if a user writes a post with Gemini um with the edge function it will save the post to the front end for the user but it'll also save it to the back end so that they can look at it later. Do you see what I mean? It's like a restaurant making you food but then keeping the same dish for themselves later on as well. Now when you ask paper to write a post the front end asks the edge function. The edge function talks to Gemini. Gemini writes the post. The edge function sends it back. Now in general with security they run on supervasive servers like I said and whenever you ask Gemini or sorry ask the environment um on the front end to do something the edge function asks for a key. So it says well what is your password kind of thing and then from there the keys are inside the edge function so only helpers can use them users can't see the codes or the keys right so if you ask the edge function to do something it uh it will take keys that are already set so no one else can use them if that makes sense on top I'm going to go through some of these obviously environment configuration it's like all of that is sort of like done by cursor really database migrations in general I'll go through this a bit sort of like briefly here, but it's still important when you ask cursor to build your backend, your database, right? It's going to um basically write you SQL code. Now, SQL code is like almost like how you would write the the setup of a table. It's the building blocks to a table. So, if I say we've got a new um feature, and this feature is I want users to be able to write their own notes and save them um to the back end, right? I would ask cursor, can you build me um a backend table with SQL to save all of the users notes? And what it will do, it will give me an SQL code. I copy and paste the SQL code into Superbase and then a table is created based off of that SQL code and that's where it would save things like the user ID, the date um when they wrote the notes, the actual raw notes themselves in text form and then obviously a key so that only users um who have written the notes can see the notes themselves. Right from here you know deployment pipeline think of it as um a conveyor belt. So code build deploy live the process I write the code I push it to GitHub Versel reads GitHub immediately and then builds it and it goes live. So the raw materials, the code, the assembly line is the building, the shipping is deployment, then the customer is the users. Obviously with edge functions, I write the function, I deploy it to superbase, it's live, and then it's like uploading a video. I record it, upload it, everyone can watch, right? Or everyone can use the edge function in that sense. Front end management, I won't go through this really because all of this is kind of managed by cursor. It's just, you know, when you save things, it saves on the front end and the back end so that users don't have to wait for things to update, that kind of thing. Error handling, again, you know, if things go wrong, it shows you a friendly message. It says, "Try again." That kind of thing. With back end, it logs the error in my back end, so I can see how things are going. And then from there, obviously, if payments fail, Stripe tells me. Now, in general, how everything works together, you sign up, paper remembers you. You add ideas, paper stores them in the brain. You create posts and paper helps you write them with AI. You schedule them. So, paper posts them automatically in a schedule to all of the platforms you use. And then when you pay, Stripe handles it safely, right? It's like a smart assistant. It remembers your stuff. It helps you write. It posts for you. And it keeps everything safe. So from here when it comes to this I'm just going to actually scroll all the way back up and go through in a bit of detail um the actual like flowchart of how all this works. Right. So where are we? I'll cover the ones that are important. So the user in the browser they click sign in or they use Google. The front end calls superbase. It redirects you to the app and then obviously it makes a password that only you have that kind of thing. From there then the front end detects something on the back end. It detects the keys that kind of thing. And then from there it just says if a user logs in they can only log into their app. Obviously they can't log into someone else's. And when they log in they see only their data. So that's how that works. The payment flow with stripe and edge functions. the user click subscribe. The front end calls my edge function stripe create checkout from there. Then the edge function gets a user ID. Um it creates the stripe checkout. It pulls the stripe checkout up and then when they pay it passes all of this to superbase. So now we know a user has not only logged in but has also paid and now they are a paying or triing user. From here, obviously guys, if you want to pause and just like see how things are set up, that's absolutely fine. But from here, Superbase actually saves the data and says Steve has logged in. Steve is a user and Steve is a triing user. Then it sets the trial end date for seven days. The user is sent to the front end so they can start using the app. And if the seven days is up, obviously then they just get charged the $19 or $20 or whatever it may be. And then if it expires and a payment is not taken then obviously it tells me someone has signed up for a trial and it's ended and the payment has not gone through and they are prompted on the front end to you know change their card or sort of update their payment details. Cancellation flow user clicks manage subscription. um a edge function called Stripe customer portal opens and it's where users can see all of their um sort of like data of their of their payments and then they can just cancel and then um a call is sent to Stripe to delete that. So that's it. Gemini flash integration. So the user front end user selects transcript or a blog post or a YouTube video and clicks generate post. from the front end. It calls my um uh edge function called Gemini generate post and it sends the transcript or the blog post etc. Um and it sends what platform they want to post on. The edge function then says wait is this person a user so that you know obviously people can't just abuse it. Then it fetches the transcript from the database and then it fetches all of the context. So um what the user does, what their website is, what their app does etc. Then it builds the prompt and then it writes the post and obviously then it sends the post to draft posts and from there it also sends the post to the front end so users can see it. It streams in in chunks and then the user can edit them edit it themselves on the front end. I won't go through this in too much detail but in general you've got like the root of the app then you've got the browser route of the or provider etc. The roots are obviously protected. So after the landing page, you've got protected roots. Inside the app is a protected route and then all of the content inside the app. So it just means that users can only get into the app if they, you know, are either on a trial or they've at least signed up. We'll go through all this. Really guys, you guys can pause this. I'll just stop over there. Guys can pause this if you want. Post creation flow. So the user opens the create post modal. Step one is to select a source. They can choose brain items, etc. Blog post, PDFs. They don't have to choose a source. They generate the content, then they edit and customize the content and then schedule. Then all of the slots um and custom dates etc are given to them and it either just fills a slot or it posts it immediately. Um again this is a bit sort of more confusing a bit tedious but post-processing it looks to see if there's a scheduled slot on the back end because a user has saved their um schedules to a table called schedules and then from there then it just either shows the success message and dispatches a postcreated event schedule page refreshes and then the modal closes. This is really important. Alo the brain feature. So the user adds an item like um a URL, a PDF, a YouTube video, etc. There's a few methods to do this. You can quick add a link, you can upload a PDF, upload YouTube videos, you can upload Twitter posts, etc., LinkedIn post, whatever it may be. It processes it. So on the back end, it scrapes the data. Um on the PDF side, it uploads it to storage in Superbase. And then from there whenever they want to fetch it, it just pulls it from the back end and then obviously creates posts. GitHub deployment, I won't go through this because it's all pretty like um automatic when it's all done. And then obviously from here guys is just like you know all of the um all of the colors and stuff like that. What I think [snorts] I'm going to do is I'm probably going to leave it there because the video will be very long um if uh I keep going. But obviously if you guys have any questions or ideas or anything at all, let me know um that you have. You know, I suppose in general this is quite a sort of overview video of how my um projects are built. And if you guys have any questions on how I build them or how you can build your own, then just let me know. All right. Um, in general, I'll stop there, but take care and see you