Crazy blast from the past day 1 of building blotato! It’s come a looooong way and it’s so cool to look back on the really crappy v1 😂 #ai #artificialintelligence #vibecoding #blotato #coding #sabrinaramonov

My name's Sabrina Ramanov, and this is part one of my video series, Building SaaS with AI, where I'm gonna walk through from start to finish building a SaaS MVP. Here's the idea that I wanna build out. It's basically a AI-powered remixing platform or repurposing platform for social media content. So you'll be able to connect any social media source, such as Twitter, Facebook, YouTube. You'll be able to upload kind of your personal knowledge base representing your brand voice, product information, services, writing style, things like that. And then AI is used to filter the different things in your social media sources for quality and relevant posts, so things that your audience would probably like to see. And then AI helps you repurpose the content using your brain or personal knowledge base or brand. I haven't figured out the right term to represent all that, but the point is to add your unique point of view, add your contribution and value. And then you can publish the repurposed content to any social media platform. And then over time, you can continuously teach the AI with examples you like. So if it creates an output for Pinterest and Facebook and Twitter, and you really, really like how it worded the Twitter thread, for example, you can feed that back into your personal knowledge base or brain. And then similar to other social media tools, it would have an automated weekly queue. So you would be able to choose the time slots that you would like to automatically publish. Monday, Wednesday, Friday, for example, you want to publish on LinkedIn, Facebook, X and TikTok. For technical folks out there, the way to think of it is it's a pan dock for content creators. So any social media source, do a bunch of transformations on it and then push it out to other social media sources. And my inspiration for this idea is my own process for creating content. In the past three months, I've grown from nearly zero to over 130,000 followers across LinkedIn, TikTok, my newsletter, YouTube, and so on. And a big part of my workflow is just repurposing my own content. Like I'm not even talking about other people's content. For example, this YouTube video, I want to repurpose this into shorts, into TikToks, into a newsletter, into tweets, into LinkedIn posts. And I do have AI automations for it. So I use Zapier for simpler automations and Pipedream, which is a developer friendly version of Zapier for more complex automations. But the thing I noticed and what kept popping up is I'm seeing on TikTok, on YouTube, people keep asking about how to build AI automations for content creation. And they're asking like for the same things again and again. I thought to myself, it would be really nice if I just had, you know, an easy to use SaaS platform where I could have a lot of control around that repurposing process and just have everything in one place. So I know this pain point is real because I personally have it as a creator and I use like all of these different tools for content creation. For example, I use repurpose.io to take my TikToks and push them to YouTube shorts and Instagram reels. But for example, you can't take one of my newsletters and create a faceless video from it. You can't take my YouTube video and create a newsletter from it using repurpose.io. I would just like to have a SaaS platform where I could like remix my own content in one place at scale while maintaining my brand, personal knowledge and identity. So that's kind of the vision for the platform. It's definitely not V1. So I'm starting with the vision because it's kind of what excites me. And the word remix is what comes to mind, but remix.ai is taken and airemix.com is taken. So I don't know, I might have to change that. Okay, so now we have like this vision I'm super excited about. What does it actually take to bring it to life? I wanna talk about all the things you should do before writing a line of code. And I don't think it's a lot of things. Like I don't think this should take weeks and weeks. For me, it took like 24 hours and now I feel great and confident about writing a line of code. But the first thing is to like run your idea by people who probably have the pain point too. For example, people who already use similar tools as I do, people who are creating content and just see what they think. So I'll show you how I did this. Unfortunately, I do have an audience which makes this easier. This is my TikTok page where I basically posted a video literally two days ago saying, hey guys, I have a new app idea and I'm looking for feedback. So here you can kind of see the captions. Basically a lot of people ask me for AI automations. I'm thinking of building a SaaS app that helps you repurpose stuff while maintaining your brand, your voice, your identity. Really making it super easy for solopreneurs, small businesses to push out content, high quality on a consistent schedule without having to feel overwhelmed by like all the social media tools out there. Especially as a small business, content creation is probably not your main focus. So the goal is to have an AI powered system that takes care of a lot of the workflows and tedious stuff. So you can focus on delivering your core message and also focus on the main thing that your business does. So that you're not spending all of your time trying to create content. I launched this video two days ago and it's gotten thousands and thousands of views, a hundred or so comments. I replied to all the comments, so I just split this in half because I assume half of these are me. But yeah, you can see kind of like the comments here. Sometimes people just say, hey, this is a great idea, sounds amazing. And then other people offer more detailed feedback. For example, automating recent articles that can be repurposed for Gen Z, creating LinkedIn posts. I'm starting a small business, something like this would be amazing, huge time saver. And that's really like my target market here. Like you have a core business, but you wanna do content marketing for it organically, but it takes time to do that. And like, you're really busy running your small business. This was a really interesting, far more interesting surfacing articles and videos that would be valuable. So like the fire hose of social media content today. Can we use AI to filter for quality and relevant posts? And those are the ones that you kind of repurpose for your audience and market. A lot of people ask me to share how I built it, which is why I'm filming this video series. This was a great comment as well. You know, being able to preserve your voice and content rather than just like regurgitating what other people are saying. Huge need for people. There are other programs out there trying to do this, but it costs like thousands of dollars to learn how to build it out. I mean, that seems expensive. Teach social media and digital marketing on the college level. I actually spoke to this woman and she's doing an amazing job teaching social media and digital marketing for college graduates. And being able to kind of build a personal brand early on in your career is another really huge use case for this potentially. Tech startup founders, having done a tech startup myself, like social media marketing was not the main focus. We didn't have anyone on the team who was particularly an expert in that. It was one of those things that we knew we should do. So I'm just showcasing this to show you what I mean. Before writing line of code, run your idea by people with a pain point. So I literally just went to my TikTok. Oh, I have this idea. Posted a video, which probably took me like three minutes to film, and then started getting feedback. And I've actually spoken to some of these people on a phone to like interview them about their use case, what tools they've tried, their pain points, their ideal workflow. So I don't think this has to be very long. Now, if you don't have an existing audience today, what I would recommend is like going to where your audience hangs out today. So that could be a subreddit, could be a LinkedIn group, a Facebook group, whatever. And just go in there and like, just be honest, just be transparent. Like I have this pain point. It's been something I'm thinking about. Does anyone else resonate with these pain points and what tools have you tried? This is before writing a line of code, but like I'm very action oriented. I don't like to delay building the product. And so this really shouldn't take very long. So the video I posted was two days ago and now we're here gonna build the MVP. The second thing and the third thing are both related. And I do feel like this is really difficult for everyone, even for me. We have in our minds this amazing vision of what we wanna build and like all these features it's gonna have and like how amazing it's gonna be, but you just can't start there. If you try to start there with your V1, most likely like you won't even get there. You won't launch. And quite frankly, like many entrepreneurs I meet with, especially first time entrepreneurs, they struggle in this beginning phase. Like taking an idea, distilling it down to its core thing you wanna test, the core hypothesis and launching it to get feedback. That's where most people, in my opinion, from what I've seen, get stuck, stay stuck, unfortunately. This first video, I'm not even going to write code. I'm actually just going to talk about what it took to distill my vision down to a feasible spec for V1 for my MVP, which stands for minimum viable product. And that's it for this video. And the reason I'm doing it this way is because this is just so important. You have to narrow down your scope. I've noticed energy, momentum, like they can kind of die with an idea. You wanna go from an idea to launched as quickly as possible. And the key to that is just cutting out as much scope as possible. Like barely working version one is totally fine. Clarity is also a really big thing. So in addition to narrowing down the scope, writing out exactly what a user does in your app is a really important skill, not just for interacting with AI and LLMs, but for building products, explaining what your products do. So again, we start with this grand vision of everything, like connect any social media source. For example, take a newsletter and be able to remix it into a faceless video for TikTok with videos, voiceover, captions, B-roll, animations, all that stuff. Like that's the end state, right? The first thing we probably wanna do, first of all, is choose the easiest media type, which is text, and then repurpose it or remix it to other text. So here's kind of the spec and how I'm thinking about it. So let's just walk through it step-by-step. The first thing I'm gonna tell the AI is your goal is to build a SaaS web app that helps users repurpose content from one social media platform to another. For me personally, this is the tech stack I use for MVPs and we'll go through setting it up. It's important to mention it to the AI so it knows like what stack you're using and doesn't try to like change your stack in the process. So this is just like kind of a best practice. I figured out working with AI to code for me. So I say the web app must use Firebase. We're gonna use that as a database. Next.js is a full stack web app framework. And these are kind of options within Next.js. We're gonna use TypeScript, Tailwind, CSS, and AppRouter. And the main screen is what we're gonna work on. So how did I decide to like build this first? The way I think about it, what is the minimum thing that I would use if it existed? If I started working on connecting social media sources and that was it, that's nice, but I can't really use that for anything useful. Here, even if I don't connect social media accounts, even if I can't sign up, even if I can't automate it with a weekly queue, even if I cannot upload my brain, my brand voice and everything, if I can take a text post, like an article, and then repurpose it for a LinkedIn post, a tweet, and a Facebook text post, that alone is useful. Because what I can do is I can just copy each post, like the LinkedIn post, open LinkedIn and paste it. And yes, that's steps manual. Like it's not gonna be perfect in V1. There's still a lot more to build out, but that kernel is already useful for me as the user. And if you're not the user, that is something you wanna run by your audience, like the people who give you feedback, the minimum viable kernel of the thing that you ultimately wanna build, but that would be useful today for someone, even if it totally sucks, which it is going to. I'm telling you now, I anticipate people will be like, oh, this MVP is easy and it sucks and blah, blah, blah. But that's not the point. In this video series, I'm showing what it looks like to actually take this super fancy, amazing idea that everybody loves in theory and actually build it out piece by piece. So this is why I chose the Create Screen, because if it did this, which I'm gonna talk about, if it did just this, I would already be able to use it today. That's my criteria for what the MVP or minimum viable product should be. So let's talk about what I mean by the Create Screen. I started working on mock-ups for what I wanted the main screen to look like. If I wanted to be even more ruthless in simplifying this, I'd remove this kind of dashboard look with the left sidebar and the top nav bar. I would just have these two panels, this form, where you submit the input text and then the outputs over here that have been repurposed using AI. If I wanted to be super ruthless in cutting the scope down. And by the way, this is literally a photo I took of the mock-up I drew in Amazon Scribe. And I really like my Amazon Scribe because you can just like doodle and draw stuff and then erase stuff, resize stuff and move stuff around. So it's really forgiving for someone like me where I have zero background in drawing, zero background in UI or user experience. You can see here, I cannot even draw a straight line. And my point is like, you don't need to have those formal skills. We're going for a simplicity. We're trying to remove everything that we don't need in the first version. So actually if I wanted to be even more ruthless, let's say like you're pretty new to building products. Well, how would you simplify this even further? This is probably a good exercise. So I was pretty happy with this mock-up. Like I'm pretty confident I can have AI build us an MVP. But if I wanted to simplify this even further, what would I do? So here kind of this red block, I just remove this left sidebar. Again, don't really need it just to test the core idea. I would remove this top nav bar. Again, don't really need it to test the core idea. Initially how I was thinking about it is you could input a URL and a text input. So let's say like there's a YouTube video with ideas you really like. And then related to it, there's kind of an article with slightly different points of views, but both are really interesting content and you wanna repurpose them, remix them and then add your take on both of them. So like you could input a URL to a YouTube or an article as well as put in any text you want. But again, for the MVP, we can remove that. We don't really need it either, do we? Right? So for this, yeah, we don't need LinkedIn or Twitter. We're just gonna start with one social media platform. Okay. So it's just a text input and submit. Okay. And since we're just starting with Facebook, we're actually gonna remove these squares too. Okay. And then let's say we're not gonna generate an image. We just want a text post, right? So here, here. Okay. So we have simplified the MVP even further. And actually for the MVP, I am gonna focus just on one social media account because I feel like it should be sufficiently useful for one and you can always add additional social media accounts. And we started with over here, like super grand vision. Okay. We tried to narrow it down to like, what is the main screen and the thing that I wanna happen that would be useful just as the first version of the product. Okay. And then I kind of drew a mock-up for it. And now I'm simplifying the mock-up even further. Like this really is the base of the product. So the less technical you are, the less coding and product background you have, the more I would encourage you to simplify. And I know that's gonna be hard because now, you know, this MVP doesn't look very impressive. It is a difficult exercise, but it is really important to get accustomed to being able to do this. And as you become more technical and more confident in your abilities to build products and actually bring them to life, that's when you can start kind of reintroducing certain things back. Like for me, I'm gonna still have a sidebar and top nav bar. That's pretty easy because they're just placeholders for now anyway. But I am going to remove all of these other things. So we're not gonna generate an image in this first version. We're not gonna hook up to LinkedIn or Twitter in this first version. We're not gonna let you input a URL for this first version. And yeah, we're just gonna constrain it to Facebook for now. Okay, so now let's talk about what our MVP will actually do now that we've removed a bunch of features, like what is left and what does it do? So we have kind of this left sidebar, which has placeholder navigation options to navigate to the create screen, which is the main screen, the queue, the dashboard, and the brand, which is like our personal knowledge base, our voice identity. And again, these are all just placeholders. It's just a left sidebar and then it has the settings at the bottom. This top nav bar will display the current screen's name. So for this version, we're only gonna have the create screen, but in future versions, like this could say queue, you'll see like the queue of posts you have coming up, or you can say brand, where you can edit your personal knowledge base, your brain, your voice. Okay, so now let's go to the main section. It's a simple form with a paragraph text inputs, and then you can select a social media platform from the checklist. So we will allow the selection from the checklist, but we just won't publish to those other platforms for now for this MVP. Let's say you find a tweet that you like, copy paste it over here, and let's say you want to repurpose it for LinkedIn and Facebook. So you go ahead, paste this over here, click LinkedIn, click Facebook. When the user clicks the submit button, okay, the app makes an API call to ChatGPT to repurpose the text into a Facebook social media post. And the prompt should force the output to be in JSON format. You don't necessarily need to specify it, but I like to do this because JSON format is easier for programming languages to handle. And then we want to use the ChatGPT model 4.0 mini, which it will probably get wrong because this is brand new. The AI is probably not up to date with this announcement. So actually let me remove that. On the right side here, we want to display the results returned from ChatGPT. So the Facebook post. The user should be able to edit the output generated by ChatGPT. And then each results like Facebook posts should have two buttons at the top, edit prompt and publish. When the user clicks edits, then the user sees a pop-up where you can edit the ChatGPT prompt and regenerate the output. And then when you click publish, you'll see a pop-up asking to confirm publishing the content to that social media platform. And so the actual integration with a social media platform won't be until V2. This publish is really more of a placeholder, but this V1 is to take a text input, apply transformations, get the text output, and then you can copy paste it into a Facebook post. And here's the mock-up. And now what I want to do is to improve the spec further. So here we're going to type a prompt like this. You are a senior software architect specializing in building SaaS web apps. You're given a software spec to review. How would you improve the spec, output the improved spec? And then here's the spec pasted here. So let me go back here. And I'm literally just going to paste this along with the screenshot. Okay, let's submit that. And what we're doing is leveraging AI to help us improve our own spec. Instead of having it output a full spec, another approach you could take is to ask Claude, like what are the weak areas, confusing things in the spec that need further clarification? So that's another way to do it. What I'm doing here where I ask it to output a new version of the spec. I think this is great if you have a slightly more technical background, meaning you can kind of like read these and pick and choose what you want. On the right-hand side, this is the spec that Claude outputted. So overview, here's the tech stack, blah, blah, blah. Okay, see navigation. I like how it kind of laid out the navigation options. I like how it laid out the UI for the create screen. I like the retry mechanism for API failures. Probably not gonna build caching right now. I like how it specified inline editing capabilities for generated content. Yeah, I like this too. So this is a great way to leverage AI to just assist your thinking, assist your process in designing the scope and VP. Yeah, I was really curious if it would suggest the queuing system and it did, which is great. Things like this, user dashboard, brand management, settings and preferences will get there. It's not in the scope for the V1. Things like performance optimization, scalability, monitoring, analytics, they're just not in scope for V1. Definitely future versions. And then I like here how it talks about feature consideration so how do we build this in such a way that it'll be easy to integrate additional social media platforms. I like its proposal of plugin system for extensibility. That's cool. So what I'm gonna do now is take parts of the outputted spec, the improved spec, and copy it over to mine. Let's go ahead and do that. So we're gonna skip authentication for our V1. I really like how it laid out the navigation. So what we'll do is we'll just create another version of this down here so we can keep the original and compare. Let's do this. And usually do a hash sign. It's like a header. Yeah, I like this as well. Multiline text input for original contents. Platform selection via checkboxes. Generate content button. Okay. I like how it specifies a modular prompt for each platform to ensure optimal output. I'm just gonna include everything except caching generated content to reduce API calls. Really wish Google Docs had Vim mode. And then content display and editing. Okay. So that was pretty much everything covered in the navigation in the content screen. I think I still wanna include this. So here in AI content generation, integrate open AI API for content repurposing. What I'm gonna change this to generate content because this is the button that labeled it here. And then the app makes an API call. And then content display and editing. Here, I'm gonna kind of combine it. Show AI generated content for each platform. In the right side, the app displays the results returned from chat GPT. Because right now we're only working with Facebook. I definitely like its wording there. I like the advanced prompt editing, but some of it is out of scope. So here I'm gonna take what we had. I like how it said modal instead of pop-up. This is great. I just think it's out of scope for this version. But it's again, it's really cool that Claude is thinking ahead what we wanna implement. For this version, we're not gonna actually have that publishing capability enabled. So all the rest of this is out of scope for V1. And I know it's hard to reduce the scope. It sucks like cutting everything cool out. And the first version is kind of just like a form, but that's kind of the reality of building SaaS apps. You have to start with something you can actually implement that's useful and different from something out there and that you can launch and start using and getting feedback on. Okay, so I'm just skimming through the rest. I don't think we need to include anything else. This is all out of scope for V1. Okay, cool. Here's the updated prompts with Claude's help. I would still want to give it the goal to build the screen and functionality below. Let's say referring to the attached mockup. So it's not strictly following the attached mockup. Let me call this updated V1 spec. So here's our original spec. Then this is the version updated with Claude's help. Before I wrap up this video, I do wanna give you a preview of what Claude is gonna produce with our updated spec. In the next video, I'll walk through setting up like the tech stack and dev tools that I typically use for MVPs. But I didn't wanna end this video without showing Claude writing some code. So here, what we're gonna do is copy and paste the spec, attach the mockup, remix. Okay, just double check everything looks good. Let's add some chain of thought. Take a deep breath and take it step by step. So here we're using Claude artifacts, feeding in the updated spec, and then waiting for Claude artifacts to produce the code. The first step, it's gonna walk us through how to actually set up the project and the structure of the project, and then organizing the project structure. So this is kind of what it should look like. Okay, implementing the layout and navigation. So here's the layout. Here's the create screen with the content form. Create the content form components. Here's the actual OpenAI integration to generate the contents. Repurpose the given content for this specific platform. Return the result in JSON format. And then here to complete the project, you'll need to implement the remaining screens, the Qt dashboard, brand, and settings. This is out of scope for the MVP, even though it was included in the mockup. So this is just a preview. Just wanted to show you here on the right-hand side, you can see all the artifacts that it produced, everything from setting up the commands to all the individual components, like the content form, the actions you can take, the OpenAI library. So one thing I did notice here, for example, we'll wanna change what model it's using. GPT 3.5 Turbo, the results usually aren't that great for writing content. So just to recap, in this video, we talked about how to take a really grand vision with lots of features, distill it down to its core essence, create a mockup, how to use Cloud AI, or you can use ChatGPT to help you improve upon the spec. Here's the updated spec with AI's help. And then I showed you real quick how to generate the initial code base. We'll be diving into that in a lot more detail in a future video. And the next video in this series, we'll walk through setting up my usual tech stack for MVP. And I just wanna emphasize again that these are the most important things to do before writing a line of code. As you saw, I just asked my audience about this idea, and then I ended up speaking with people who have the pain point and shared their workflows and what they currently use today and what they wish they had. Really try to simplify and narrow down the scope as much as possible. Even my own MVP scope here, there's probably a lot I could cut out. So it really depends how technical you are and how comfortable you are with creating products and writing spec. We went through that exercise, remember, where I took the mock-up and just removed things that even I would consider unnecessary if I absolutely had to scope it down further. But again, the more technical you are, the more comfortable you become with this process and these types of tools, the more you'll be able to include in your scope and be able to still launch the MVP pretty quickly. Most importantly, think through what the user workflow is supposed to be. What can the user accomplish with your app in one minute? You know, what is point A, starting point? What is point B, the final destination, the outcome? That is the whole point and value of your app. And everything else kind of around that is usually not necessary for the first version. All right, my name's Sabrina Ramanov. Hope you enjoy this video series. Hit like, hit subscribe, drop a comment below. Look forward to hearing from you and stay tuned for the next video in this series.