I Created Working AI App From from Reddit Part 1: Building the MVP

Transcript

I feel really dumb doing this, but in this age, if you don't have a YouTube channel, like, what are you really doing
0:2323 secondswith your life? So, welcome to O Lady Code, a channel where I take Reddit
0:3030 secondsthreads and turn them into working prototypes. I'm going to go ahead and apologize in advance. Um, I am getting
0:3838 secondsover a cold. So, I have still a little bit of laryngitis, so my voice is not the best. Um, that's not to say this
0:4848 secondsisn't my voice. My voice is a little bit deep, but I'm going to go ahead and apologize for the raspiness that you'll
0:5656 secondsget in this video uh because of my laryngitis.
1:011 minute, 1 secondThis is the part of the video where I formally introduce myself. Lorraine, product designer, 14 years experience, work with a lot of great companies.
1:111 minute, 11 secondsCheck me out on LinkedIn. Uh you can see who I work for. I'm not going to name drop. Um, but I created this channel
1:191 minute, 19 secondsmainly to showcase my skills with vibe coding and uh using AI to enhance my
1:281 minute, 28 secondsdesign process. So, let's get into today's topic.
1:361 minute, 36 secondsI like to find my ideas on Reddit. Uh, there are a couple subreddits that I follow. Uh, this one, somebody make this
1:461 minute, 46 secondsis one that I really like. So, I scrolled and I found uh this Reddit uh suggestion.
1:551 minute, 55 secondsThis idea stopped me in my tracks. It made me chuckle. It made me really want to see how this would work in real life.
2:032 minutes, 3 secondsSo, the suggestion is a weather app, a weather radar app that plays metal when
2:102 minutes, 10 secondsa storm is rolling in. So, let's figure out how we can create this.
2:172 minutes, 17 secondsOkay, so everybody has a preference. Um, there's so many LLMs out there right
2:232 minutes, 23 secondsnow. Um, I'm not here to tell you which LLM to use. Um, I'm really just here to
2:302 minutes, 30 secondsdemonstrate how you can use these LLMs to build out products, uh, using a
2:372 minutes, 37 secondsdesign process that will give you a product that you could sell or you could just put in your portfolio. Um, but I
2:462 minutes, 46 secondsdigress. Uh, I like to normally when I'm doing a project like this, I like to I
2:542 minutes, 54 secondsguess I'm just basic. I like to use Chai GPT. So I will jump into chat GPT. Um I
3:013 minutes, 1 secondstart every every every interaction with chat GPT uh with
3:083 minutes, 8 secondscontext. Um I ask chat GPT a question to kind of give a baseline of what we're going to be talking about in that chat.
3:193 minutes, 19 secondsUm I find that this helps to reduce hallucinations.
3:243 minutes, 24 secondsUm, you know, I find that the longer you're in a chat, you can uh start to
3:303 minutes, 30 secondsexperience some hallucinations with the LLM. But as we start to see that in this uh chat, I will show you how I get
3:393 minutes, 39 secondsaround it. So, let's go ahead and jump into ChatGpt and I'll show you how I start one of these chats.
Chapter 2: Overview of the project and AI Tools
6:066 minutes, 6 secondsThat video probably seemed like a lot.
6:096 minutes, 9 secondsI'm going to break it down um into really simple chunks and understand that
6:156 minutes, 15 secondsI'm just using chat GPT to conceptualize uh the idea that I'm trying to create to
6:246 minutes, 24 secondsunderstand if it's going to solve a real user problem and to uh figure out how I
6:326 minutes, 32 secondscan quickly create a prototype be it a clickable prototype
6:386 minutes, 38 secondstype in Figma or a actual coded prototype that I vibe code uh with
6:476 minutes, 47 secondsone of my tools which we'll get into that in just a second but first I'm going to break down exactly what I did
6:546 minutes, 54 secondsin chat GPT uh so that you can follow okay as stated before you always want to
7:027 minutes, 2 secondsstart with context I don't care what tool you're using uh AI I mean needs to understand
7:117 minutes, 11 secondsum what you are trying to do before it can actually help you build a
7:187 minutes, 18 secondsthing. Um, I see so many people go into uh TGBT or whatever LLM, Gemini,
7:277 minutes, 27 secondsPerplexity, Cursor, and they start, you know, with just they they start as if they're
7:347 minutes, 34 secondstalking to a human that understands human context and they just, you know,
7:417 minutes, 41 secondsthey just give a a a statement with no context. that is uh your your LLM will
7:497 minutes, 49 secondsdo its best to understand what you mean, but this is a surefire way to have your
7:567 minutes, 56 secondsAI start to hallucinate. So, in this project, I started with, hey, do what do
8:038 minutes, 3 secondsyou know about weather radar uh weather radar apps? Like, what do you know about it? this basically getting the chat GPT
8:128 minutes, 12 secondsin this case to understand we're going to talk about weather radar apps in this chat that's going to be our focus um so
8:228 minutes, 22 secondsI want you to understand what we're doing okay after you have set your
8:288 minutes, 28 secondscontext with your LLM in this case chat GPT what I'm using um you want to move
8:368 minutes, 36 secondson to setting your intent So, you spent some time understanding what the AI understands about your
8:458 minutes, 45 secondstopic. Now, you want the AI to understand what you plan to do with this topic um
8:548 minutes, 54 secondsand how you expect the AI to help you complete this topic. So, uh stating your
9:029 minutes, 2 secondsintent is very very important. um you want to be very clear on exactly what
9:099 minutes, 9 secondsyour expectation is uh for the output from this chat. For me, I just said uh I
9:189 minutes, 18 secondswant to build a weather app that plays music when a storm is coming. Right? So from there, the AI now understands,
9:269 minutes, 26 secondsokay, we started with context. Um what are uh radar apps? What what are
9:339 minutes, 33 secondsradar apps? How are they how do they work in the weather? Um, you know, what are their core functions? You know,
9:419 minutes, 41 secondsthese are all the questions that I asked before stating my intent to the LLM or
9:479 minutes, 47 secondsChad GPT. Um, before I ever stated my intent. So now when I state my intent,
9:569 minutes, 56 secondsthe AI is like, "Oh, I understand why you asked me all those other questions." And now I can break down your intent
10:0610 minutes, 6 secondsinto chunks that will help you achieve your goal.
10:1310 minutes, 13 secondsI always say okay when I start these clips. So I'm going to not do that this time. Here we are uh at the last step
10:2110 minutes, 21 secondsand this is really a important step in still creating context
10:3110 minutes, 31 secondsand uh this is going to make sense in a second. Um but I just want to say first
10:3810 minutes, 38 secondseverybody out there that is uh scared of code um I would suggest learning a
10:4610 minutes, 46 secondssimple text stack, HTML, CSS,
10:5310 minutes, 53 secondsyou can stop there. You can try to learn JavaScript. JavaScript gets a little bit intense, but if you know enough HTML,
Chapter 3: Deep-dive into ChatGPT interaction
11:0211 minutes, 2 secondsCSS, um if you know enough to recognize tags, you can build anything.
11:1011 minutes, 10 secondsAnd I'm going to demonstrate that. Um, but I just basically want to say you want at at this step you want to ask
11:1911 minutes, 19 secondsyour LLM, Chat GPT, whatever you're using to build you a simple front end. Um, this is not so that you can be a coder.
11:3211 minutes, 32 secondsThis really now becomes a bridging of the gap, a bridging of your knowledge um, and the gap of the AI knowledge. AI
11:4211 minutes, 42 secondsdoes not understand human thinking. It mimics human thinking. But if you write in a language that AI can understand,
11:5111 minutes, 51 secondsmathematics, coding is mathematics, you now are speaking the language of the AI. So in
12:0112 minutes, 1 secondthis step, you definitely want to ask your AI to create you a simple front end. simple.
12:1112 minutes, 11 secondsRight now, you might not understand it, but after you've uh looked at HTML probably about the 50th time, you're
12:1912 minutes, 19 secondsgoing to start to recognize some of the patterns. It's really simple to learn.
12:2412 minutes, 24 seconds[clears throat] Okay. So, now we have a front end for exactly what this app uh needs to do, how it needs to function.
12:3412 minutes, 34 secondsThe LLM understands my intent. It understands the context and now we've
12:4012 minutes, 40 secondsgot code that any any tool any AI will understand if you
12:4812 minutes, 48 secondsdrop it in. It's going to make uh sense in a second. So from here once I've created my simple UI
12:5712 minutes, 57 secondsI am now going to leave Chad GPT. There are a couple couple ways that I can go, right? If I am creating a clickable
13:0613 minutes, 6 secondsprototype in Figma, you know, I might go directly to Figma. Figma has AI now. I
13:1313 minutes, 13 secondsmay go into uh Figma and just start the whole process over of um prompting to
13:2113 minutes, 21 secondsget to uh what I want this uh tool to look like. And that's going to be
13:2713 minutes, 27 secondssomething that's super important. um you will get this this front end will be
13:3413 minutes, 34 secondsa functional front end that you could say oh I'm done I created the app however
13:4213 minutes, 42 secondsuh people consume with their eyes so if your uh app is not beautiful uh it's
13:4813 minutes, 48 secondsvery possible uh it will get looked over it could be a super helpful app but people consume with their eyes if it
13:5613 minutes, 56 secondsdoesn't seem um beautiful or like some designer like
14:0314 minutes, 3 secondsmyself designed it. Um people will overlook it.
14:0814 minutes, 8 secondsSo um we're going to do one more step uh in chat GPT. Um now that we've got our front end, we're going to create a
14:1614 minutes, 16 secondsprompt. We're gonna ask Chat GPT to create a prompt that we can take into
14:2314 minutes, 23 secondsour next tool to finish up the development of uh this app. And I'm
14:3114 minutes, 31 secondsgoing to go ahead and jump into that now.
16:3716 minutes, 37 secondsAnd there you have it. I was able to develop simple HTML in chat GPT, a
16:4516 minutes, 45 secondsprompt to use in a reasoning LLM. The one that I use is V0ero and come up with
16:5216 minutes, 52 secondsa beautiful working uh prototype for an application uh that I could actually do
17:0117 minutes, 1 seconda little bit of do a little bit more work on and package it up and create an app in the app store or create a website
17:1017 minutes, 10 secondsthat I could monetize. Um, this is just an example of being able to with a
17:1817 minutes, 18 secondslittle bit of planning and a little bit of understanding coming to these tools
17:2517 minutes, 25 secondsuh with a strategy and uh knowhow to come out the other end uh with something
17:3117 minutes, 31 secondsthat could possibly make you money. Um, I actually uh would say this took me
17:4017 minutes, 40 secondsprobably about I would say 5 hours to complete. Um, mainly because I am
17:4817 minutes, 48 secondsrecording these videos as I'm also uh writing out the application. So, it took about 5 hours with editing and with
17:5717 minutes, 57 secondsactually coding. So, it's not something that uh is long to do. If this is something that uh if you have an idea or
18:0518 minutes, 5 secondsa tool that you would like to vibe code with me, uh subscribe to this channel
18:1218 minutes, 12 secondsand also uh send me a comment. Drop a comment below. I'm happy to collaborate with anyone who would like to create an experience like this. Thanks. I made it.
Chapter 4: Creating a simple front end
18:2418 minutes, 24 secondsThat's a wrap on the first episode of Old Lady Code. I hope you enjoyed uh this series. I hope you've learned
18:3318 minutes, 33 secondssomething. Um my goal is to publish videos like this once a week. I hope
18:4118 minutes, 41 secondsthat you will join me to learn more about vibe coding and really learn how
18:4818 minutes, 48 secondsto create a process uh that you can use uh a repeatable process that you can use to jump into
18:5718 minutes, 57 secondsthese tools to create businesses to create applications uh anything that you want to do in in
19:0519 minutes, 5 secondsthis day and age. Um, we all need to know a little bit about AI. Uh, there's
19:1219 minutes, 12 secondsa lot of hype about AI coming to take jobs. Um, I don't worry about that
19:1919 minutes, 19 secondsbecause I believe that as long as you grow and you learn how to use the tools,
19:2619 minutes, 26 secondsyou will never become obsolete. So, I hope you'll join me again for Old Lady
19:3219 minutes, 32 secondsCode um as we build another uh Reddit thread into a beautiful working
19:4019 minutes, 40 secondsprototype. Thanks,