How To Avoid Mistakes In Vibe Coding? | Build App In One Prompt | Vibe Coding Tutorial | Simplilearn

Hello. Hi Shanu. Thank you for joining us. Hi Peter. Thank you for joining us from Nigeria. Hi Aberna from India. Someone from Pune. Joseay from Michigan. Someone from Virginia. Great. Okay. Belinda from South Africa. Sean from Florida I guess. Raj Kumar from Telangana. A from Dubai. Nor from Egypt, Naven from Singapore, Surinda from India. Wow, great. Rachel from Malaysia. Amazing. Amazing. Great. Okay, so we are also live on LinkedIn and YouTube and we have uh more viewers joining us there. Uh welcome once again uh everyone. I'm Ana from Simply Learn and I will be hosting today's workshop. I want to start by saying that um you know just by registering for and attending this buildathon you have all made a very very great call uh because this is not going to be just a regular webinar. It is not going to be a lecture. Nothing here is pre-recorded. Nothing is staged. Um in the next 4 hours you're going to watch a working deployed application get built from scratch using nothing but plain English prompts. And if you follow along you're going to get um you know you're going to build one too. So before we get into it, a couple of things I want to flag right now because I don't want you to miss uh them. Uh firstly, we have a surprise contest tonight. At a point during the session, we're going to ask you to submit a screenshot of the app that you will build in the session. Our expert will be reviewing them and offering his feedback and that's going to be really really great. But you also have another bonus that you will that we will let you know in um you know the session later. So uh please stay in stay tuned and yes we'll uh get into the session right away. A few ground rules before we begin. Um if you have any questions related to career in AI or any AI tool or AI concept please put them in the Q&A box and not in the chat box. Uh the chat is for engagement responses and the activities we will run tonight. Q&A is where we will pull questions from uh towards the end of the session. Um and please keep the chat relevant to what's happening on the screen. We have a big room tonight and it helps everyone where the conversation stays focused. You can see already the number of chats that are coming in are quite a lot. So if we keep uh seeing that we will keep the chat only visible to the host and the expert so that everyone like you know um gets to have a good workshop experience. And um thirdly, we have done a very thorough audio video check at our end and everything is good to go. So if you're not able to hear or see anything clearly, the issue might probably be at your end. So please do check your network connection, check your device uh or maybe try rejoining on Zoom. That usually works. And finally, your attendance certificate. At the end of the session, there will be a certificate. Uh we will be launching a poll at the end of the session. Please enter your full name when it goes live and your certificate will be processed and sent to you on email later. Uh please don't miss that because we will not be able to take any manual submission for the certificates. Okay. Right. Uh before we begin a quick word on who we are um and um you know what we do. Um is there anyone who is joining a simply learn webinar for the first time? If it's if it's your first time here, you can just like you know type first time and let us know in the chat. Uh we'd love to know if we have um attendees uh who have been with us before. Okay. Yes. A lot of things coming in. First time. First time. First time. Great. Wow. Okay. Amazing. Amazing. A lot of first- timers here. Very very glad to have you all um here. Okay. So, a quick introduction about Simply Learn. Um we have been in this space for more than a decade. We have trained more than 15 million professionals across 150 plus countries and not through like you know just passive video courses but through structured outcomedriven learning that really changes what people can do at work. We have more than a 80% graduation rate and our learners have consistently rated us 4.8 8 on five um you know which shows the kind of learning experience we provide and we have learning pathways and certification trainings across various categories um like you know the generative AI project management cyber security AI machine learning data science product and design and a lot more um so speaking of um you know the ecosystem that we built we're really uh proud of uh the partners that we have from IITMs and globally renowned institutions to tech giants like Google, Microsoft, IBM and AWS. These partnerships mean that um you know our learners get curriculum um that is co-created with the people who are actually building the future of AI. So that credibility flows directly into today's conversation as well. Right? So with that we will get into setting a little bit of context for um the topic that we have at hand and then I uh know that all of you would be eager to meet our experts. So I'll do the introduction very very quickly. Okay. So um just want to start with like you know one thought tonight. Every app on your phone right now whether it's Airbnb, Instagram, Uber, Spotify, Cred um started as um you know just as a line of thought in someone's head. Um it was probably not a very you know technical specification. It was not a system design document. It was just a line an idea that somebody couldn't let go of. and take a look at these apps. You use at least like, you know, one or two of them every day, right? So, someone once sat where you're sitting right now and thought, what if this existed and today you're getting to do the same thing. So, um let me just quickly show you what building used to look like and honestly what it still might look like for most people. Uh you have an idea, you write a brief, you try to explain your vision to a developer who interprets it differently every time. um the estimate is higher than you expected. You go back and forth, a prototype arrives, it's close, but it's not quite right. You revise, you repeat until the budget runs out, the timeline slips, so you just give up and move on to something else. So that's the tax most ideas pay before they, you know, ever become real, right? So 3 to five lakhs um in in uh cost, 4 to 12 weeks in timeline, and that's probably for just a basic app. So most ideas do not survive this whole process, right? So this is not because the idea was not strong enough because the path was too long, too expensive and too dependent on other people. So what we've established is that the only thing that's stood between a singular idea we spoke about and a working product is the process of building it. And for most people the process has been expensive, slow and probably out of reach. What changes tonight in this buildathon workshop is that process. Um today uh the gap is like a single well-written prompt and that's what we're going to focus on. Um between your idea and a working deployed application what stands is a well structured prompt and we are not like exaggerating it. That's what you're going to watch happen tonight and by the time this workshop ends you'll know how to write that prompt yourself and build anything that you want with it. Right? So with that here's how um you know the rest of the session is going to go. Uh we have the timelines in ISTD um here but for our global audiences I'll just like you know um keep a track of it in terms of uh the minutes. We start with understanding the core concepts which is vibe coding prompt engineering and how claude code works. This is the theory um that makes the whole build part um you know make sense. Then we go straight into activity uh a reverse prompt engineering challenge. Um you'll see a finished app and try to guess what prompt built it. It's one of the most useful instincts you can develop um uh as a builder. Okay. Right. And um in about an hour's time we go live uh with the part one of the build. Um it runs entirely inside cloud.ai. So no ID, no terminal, no setup is required. If you have a claude account, you can follow every single step. And after a 10-minute break, uh, build part two moves into VS Code with cloud code extension. This is where we add an AI feature, push to GitHub, and deploy the app life. Our expert will walk you through exactly what you need while also showing you how to debug, how to ship, and a lot more. We have another short activity round planned where we're going to compare three prompts and understand which produces the best output. um do participate in these activities as they designed to make you learn and you know the instill the art of prompting um stronger in your skill set. Then we have an amazing program in partnership with Microsoft that we want to give you an exclusive preview on. Our expert will take you through its highlights, the curriculum, the skills, tools, projects involved in it and a lot more. Uh and most interestingly we have a great bonus segment on clot design after this. uh with this you will be able to walk away from this workshop and claim that you know all the layers and features of claude um and put this happening tool to its optimum use. Then we will do a dedicated Q&A segment where we will handpick relevant and interesting questions from all of you and have our expert um answer them live before wrapping up. Okay. So with that I come to a really exciting part of the workshop where I get to introduce uh the expert we have here. Um so Tim uh is who's um you know going to make all of this happen. Uh Timothy spent 18 years in hospital administration including as director of operations for the emergency department at Cincinnati Children's Hospital, one of the top ranked uh pediatric hospitals in the United States. Uh he has led clinical and operational teams across one of the most complex high stakes environments you can imagine. uh and then he made a decision that a lot of uh people in this audience also might be thinking about right now. He shifted into an AI career completely self-directed. He taught himself Tailwind base versil and a lot of other you know tools and frameworks. He founded the AI handyman LLC where he now builds human centered AI tools, intelligent workflows and full stack applications for individuals and small small businesses. But why does this um you know matter to us? Um it is because Timothy didn't come from a very typical coding, computer science, tech background. He came from the same place most of uh you are starting from a problem. Uh there was a problem that he wanted to solve and a decision to figure out how to build the solution himself. So tonight he's going to show you exactly uh how he does it. And um uh the introduction will not be complete if I do not talk about this. Sim is also one of our dearest uh trainers. He teaches multiple AI programs for simply learn and works with hundreds of learners and AI enthusiasts like you all. Uh Tim, it's an absolute pleasure to have you and lead our buildathon and as always it's an absolute pleasure to host you as well. Uh the floor is yours now. Thank you so much. That was a wonderful introduction and Anya. So yes, my name is Tim. Timothy, but you guys can call me Tim. I once I introduce myself to a cohort or a classroom or a client, you can call me Tim from then on. So, I absolutely um I love talking about this stuff. I love talking about generative AI. I actually did start with a SimplyLearn course myself back in 2024. It was more machine learning and AI. So, it was a lot of statistics and linear algebra and how these tools work from the base up. Uh but we're no longer trying to recreate the next chat GPT. We're trying to harness what already works today. will be harnessing Claude to take the next step where we can build faster, develop faster. So with my business, the AI handyman, I focus on small to mediumsiz businesses and I want to teach them how to use these tools. So yes, sometimes I do build it for them and maintain it for them. But like we were just talking about in those first few slides, it's so much more impactful. There's less back and forth if I teach somebody in a small business how to build their tool or how to edit their tool. So there's not so much back and forth between, hey, this is what I want. Then I have to make it look like that and then go back to them and say, hey, is this what you meant? It takes a very long time. So what this is one of my favorite skills to teach people. Claude is an amazing tool. It's recently in the last few months gotten uh a lot of major upgrades. So I'm really excited to talk to you guys today. And while I did spend 18 years in an emergency room in healthcare in a healthcare setting, what that taught me is that we can't just talk about solutions. We have to build them. We have to implement them. We have to collect feedback on them. So I was able to bring that over to software engineering and development pretty quickly and pretty seamlessly because I know that we can't just sit around and talk about it all day. We have we actually have to solve problems. We actually have to ship ship products that help people either get more clients, track more leads, solve whatever problem their business or individual lives might be trying to solve. And I also just want to make sure one of my biggest goals is closing the knowledge gap. So I think the more people that know how to use these tools, the more people can build them, the more people can participate in conversations about AI ethics. So, one of my main goals through teaching with SimplyLearn and being here with you today, is to show you from the start how you can start to use these tools, we'll start very basic and we'll get more complex at the end, but I'm here to answer questions as many as I can. And I'm here to make the world of AI and specifically today the world of Claude a little less overwhelming and intimidating. So, thank you so much for having me here today and I'm excited to spend the next few hours with you guys. Great. Uh Tim, I think we can get started with um you know the core concepts. Uh we have a few slides on um you know the concepts that will come in handy during the build part. So I will leave it to you. Just um let me know when you want me to move uh the screen forward and I'll take care of that. And I see a couple of uh uh people saying that they're hearing an echo. Um like I mentioned, everything the audio and video is checked at our end. So everything seems seems uh uh good. But I will um you know keep myself on mute and vice versa when the other person's talking so there's no um you know disturbance. Uh Tim over to you. Yeah, you can go ahead and go to the next slide here. So a lot of people hear the term vibe coding. It sounds kind of trendy. Uh but what what does vibe coding actually mean? So before vibe coding existed and we had all these tools like clawude and cursor that allowed us to vibe code, you had to learn a coding language. And sometimes that learning process could be a year, two years, three years, 5 to 10 years if you wanted to get really good at it. And so maybe you learn Python and then you want to learn front-end development. So then you have to learn JavaScript or TypeScript, CSS, all of them combined. Sometimes it's a very long process to just learn about the tools. So where vibe coding came in it it came in handinhand with large language models where we were using regular English whatever language you speak you could use your regular you can describe a project you can describe an action you can describe an idea and then the complex large language models that we're using for everyday chats can now seamlessly turn that into code. So we don't have to worry about perfect syntax. We don't have to worry about debugging everything. We can use these large language models and these coding tools built on top of large language models in order to bring our ideas to life by just describing them. So what we're going to learn today, especially in the first half about prompt engineering, is how to describe what we want the model to produce in a very productive way so that we're not wasting tokens, wasting subscription costs, things like that. So now instead of having to study and learn the whole life cycle and then learn how to code it and then learn where to code it a year years and years and years of a normal process. We can vibe code where we're describing what we want. Um essentially we can be the architect without years and years and years of software development and engineering experience. So the skill shift here is from syntax to specificity. So, we want to be really specific with our prompts when we're vibe coding. We want to describe exactly what we want. But yes, vibe coding has absolutely changed the game. Uh, and some people do like to say, "Well, I'm just kind of sitting here vibing." And that is kind of where it came from. So, vibe coding, yes, I've had an idea. I'm going to just kind of sit here and casually describe it to this system and it's going to build it for me. Now, of course, uh there are a lot of cool tools that work on top of that. people aren't just sitting around chilling building apps. They're very focused. They're building it into real workflows, real enterprise systems. But that's kind of where it came from as far as the term vibe coding. And you can go ahead and skip to the next slide for me. So the new mental model that we'll be talking about today. So highest leverage skill in 2026, not writing code. Absolutely. So, we're all I think whether you are living under a rock or very very invested in this AI ecosystem and the AI news, you understand that you don't necessarily have to know how to write code in order to build these really really complex and useful apps. Uh, but your writing still needs to be precise when you're describing your project. So, this slide shows us the new mental model. So, we define what the app does, who it's for, what success looks like. We direct it. We can steer it with our prompts. I'll show you in Claude Code later. We can stop it midway and redirect it a different direction if it's starting to do something we we don't like. And we don't necessarily have to know every single piece of code that it's creating, but we can see with a preview screen. Okay, I want to change the colors. I want different tabs. Things like that. So, we're very much steering clawed code and other tools like that through the process. And a lot of the times I'll show you we can turn off approvals. We can make automatic approvals, but a lot of this reinforces a human in the loop where essentially it'll say, "Hey, I'm going to do this. Do you approve?" And you can click approve. And once you're happy with your tool, you can say, "You know what? Claude Code is making really good decisions every time. I'm going to turn on automatic edits." But we're still very much part of the process. We're not just essentially setting it and forgetting it. Sometimes you can do that, but the best code and the best projects come from you sitting there watching the process, directing it as it goes, approving where needed. And then what Claw does is it's going to scaffold our whole structure. It can create 50 to 100 files almost instantly, whereas that would have taken weeks if not months for us to develop ourselves beforehand. It can write and connect logic and it'll debug. So we'll we'll see that as we go today. when even when we get to deployment, we can use cloud code to find out if there are errors in the build before we deploy and it'll seamlessly correct all of those things. So, we have cloud code. We can't just say, "Hey, here's our idea and it just turns into a beautiful web app. We still have to know a little bit about web design, web programming, the development and deployment cycles, but we don't have to spend hours and weeks and months on the actual code itself. Now we just focus on the the structure, where to do it, how to deploy it, and we get really specific with how we describe it when we start using these tools. And you can go ahead and skip to the next one and onion. So why claude and how it operates? So claude right now is a is a big topic in the news, whether it's social media, whether you follow specific AI development bulletins and things like that, but it's there for a reason. People are talking about it for a reason because it is working so well in an area where yes chat GPT and and a lot of tools are catching up to claude but I'm just going to say chat GPT I've used for almost a year. I can I can create quick code and I can create several files but then I either have to copy paste use other tools to bring it over into the codebase. So one thing that Claude Code especially did right out of the gate is have a much larger project structure awareness. So part of this comes from just its ability to take more tokens into its input than chat GPT could at least 6 months ago. So it can look at all your files in your codebase. It can look at 50 files. So if you ask for one simple change, it can go cloud code can go to the other 49 files and make sure nothing's going to be negatively affected. Whereas even six months to a year ago, we were creating the code but then a develop you still had to have some development and debugging skills to make sure okay I made this change but it made this stop working. Cloud code takes care of that and it can look at your whole codebase refactor everything necessary and so it it does take a little bit more usage than some other tools because it is looking at so much of your project but the effectiven all these companies are focusing on. So crossfile debugging, most bugs don't live in one file. As you see in that one, when you come across a bug, sometimes even with AI tools, it can take forever to find it. Quad code can find it in seconds, if not under a minute, and it can debug several different files across different portions, whether it's the front end and back end of your codebase. It can go through and fix everything all at one time pretty quickly. Claude also has a lot of skills and I'll show you that if you do like a forward slashkills it has all kinds of additional things where you can add APIs add loops add debugging add um agentic monitoring all kinds of additional features and they're just continually building every day there's seems to be 10 if not 50 new features in these tools especially in cloud code and then the conversational iteration is why we're talking about it. So, back to talking about vibe coding a little bit here. The way that it works so well for so many people is that we don't have to have years of development language built into our brains. We don't have to use the exact word like um the hero banner on a front on a landing page for a website, for example. We can describe in plain English or whatever language we're using with our chatbot what we want and how it looks and we can describe what's wrong. We can describe what we want next, what we want to build on top of what we've already started building with regular language that we're used to using as opposed to having to study and study for years and use the exact right technical words and things like that. Claude also can keep track of a very long project or a long conversation over time. So if you come back next week, you can jump right back in where you left off and continue building. If you need to update something in six months, same thing. you can jump back in, make little tweaks, and all of that history and all of that sometimes conversation history uh is all just wrapped in there so you don't have to start over every time you want to make a tweak and things like that. Next slide, Anya. So, prompt engineering, that's what we're going to spend a little bit of additional time talking about at the beginning. So, I think most of you are probably familiar with the term prompt engineering. Uh however there is a there used to be on LinkedIn if you look there was there were a lot of jobs for a prompt engineer specifically. So that was essentially someone who was really good at knowing how to interact with these AI tools using the right language using sometimes more technical language in order to get the right outputs from these AI models. Now even just 6 months to a year later when I teach prompt engineering it's something everybody has to know at least at a basic level um there are still definitely masters of prompt engineering who still know the the intense technical pieces in the more spe spe spe spe spe spe spe spe spe spe specifics of how to make prompts act in a certain way but companies like anthropic with claude and openai with chat GPT are purposefully trying to make prompt engineering better for everyone. So trying to give you the technical output from a less technical explanation or description that you get it is kind of the goal here. But you still want to have some core pieces within your prompt. And we'll get through that and I'll share my one big prompt that we're going to do here during our first build section. But first, you're going to need context. So what is this app? Who uses it? What does it replace or improve? A lot of people jump onto tools like Claude or ChatgPT and they just start talking to it. And that's great. Sometimes people have a lot of instructions saved, but if you're a new user to Claude AI and you just open it for the first time and say, "Hey, do this for me." And you don't tell it why you want it to do it. What's your audience? What is the app going to do? What do you want it to not do? You might get a strange output and it's not going to be specific for what you're looking. So, you need to give it context. Whether that's a a file that sticks with the app for a long time or at the beginning of every conversation, you have to tell what you're trying to accomplish and what you're trying to do. The next part, constraints. So, what must the app not do? What must it never do? Constraints are important. Sometimes we also call them guard rails. Whether it's, hey, this app is built for children, so don't use any language that's not appropriate for a teenager under 16 years old. That could be a constraint. You could say, "Hey, don't share company policy information about pricing from this file that I'm going to upload." Maybe you shouldn't upload that file. But constraints are a big thing. So, we want to tell the app what we want it to do with a context. We also want to tell it what not to do with the constraints. Third, we have success conditions. So, what does done look like for this app or this program? What does success look like? We can run tests. We won't get through all of the evaluation and testing in our session today, but that's something that you learn with simply learn. Uh, but you have to say what is what is this going to look like? Quad is really good at debugging, but you have to tell it what success looks like, what a successful deployment looks like, so that it knows what it needs to debug and what it needs to fix. And then the iteration signal at the end. Tell Claude how you want to ask how you want it to ask for clarification and when. So that prevents it from proceeding in incorrect assumptions. I'll also show you a planning mode that we can turn on in Claude code when we get to that part. Essentially, we can ask Claude for a whole plan that we can review before it starts building anything. And that helps us know what it's going to do before we use the tokens and use the subscription usage window that we're trying to get in before it resets and things like that. And I see in the chat already, you have to be clear on the result you want to see. Exactly. We have to tell it from start to finish. This is what we want you to do. Don't do this. This is what success looks like and this is how I want to work with you, Claude. A lot of people don't say say you don't need to use please and thank you. things like that. But even that, just setting a context. You can treat Claude like a co-orker. You'd want to tell your coworker everything about a project. If you're getting them up to speed, you want to tell Claude code everything about your project to get it up to speed. All right, you can go to the next one. Give me a second, Tim. Yeah, not a problem. Definitely. And I do see in the chat, do you need a paid Claude code subscription to follow along? So, today I will be using the $20 subscription. You can use the free tier, absolutely, but you're probably just going to hit your limits sooner in the in the build than you would. So, unfortunately, some of these tools you do have to have at least a minor paid subscription in order to get the full usage out of it. So, you can use a free tier, but you might hit a usage limit partway through the build. All right. So, we're talking about prompts and we will I we'll get into real prompts here in a second in the real builds, but what goes into a winning prompt. So, gap between a good builder and a great one is usually one sentence. So, a weak prompt here, you can see make it better. What's it? What does better mean? Just what we were talking about. You have to tell it what success looks like. So, if you tell the cloud code or cloud.ai AI make it better. It might try to improve some random things, but it's going to decide what it improves. So, a much stronger prompt would be add a search bar that filters by fill-in-theblank variable field for fill-in-thelank variable user type. A weak another weak prompt, fix the bug. Sometimes, especially if you're using an IDE like VS Code, the bugs might show up a little bit more clear. So Claude might know what those bugs look like, but again, you're just hoping that it knows what you're talking about. A much stronger prompt would be the blank button, variable button here on screen two returns null. What did I expect it to be? I expected it to come out with the weather or whatever that might be look like. Another week prompt, build a dashboard. Claude knows what a dashboard typically looks like for some users. It's going to give you a super generic dashboard. It might not do nothing, but it's not going to probably do what you intended unless you use a stronger prompt like build a dashboard showing whatever metrics or KPIs that you're following for a project manager, for example, with whatever your priority views. I want a Gant chart on the first page. I want this. I want this. So describing what you want your dashboard to actually look like in that prompt is going to give you a much better much better output, but also it's going to save your token, save your usage because you aren't going to be wasting it on Claude trying to guess what you're trying to get it to do. Last one there, add AI to this. Again, it will probably do something. It will probably add some sort of AI feature, but you don't know what it's going to be. So a much stronger prompt would be add a chat GPT API that takes whatever your input is takes username and returns username in Spanish or username in Japanese. So that's not necessarily what your app might be for. But you can see that I'm not just saying add AI to this. I'm specifically telling it to change this input into another language. That's going to give you a much more specific output. It's also going to use less of your tokens, less of your usage summary, especially if you're on a limited free or $20 tier. And you can go ahead and switch to the next one. Anya. So here, Genai application development process. So no coding required today. I do want to just stress that even in part two when I start using VS Code and GitHub, I'm still not relying on my own code coming from my own brain. So, it's still a no code workflow. I think what a lot of people misunderstand is that when I say no code required, you still need a little bit of web development experience, but if you and I'm sorry, I don't even mean experience. You might need a little bit of web development knowledge, but you can get that from Claude. Go to another chat. You can get that from Gemini. You can get that from chat GPT. If you don't know how to connect something to GitHub, ask Claude. Say, I don't know how to connect this to GitHub. And it will walk you through the steps step by step. So, what a lot of people think is no code just means I can type in one quick sentence and have a fully working app. No code means we don't have to come up with the thousands of lines of code on our own. But, we still have to know how to connect the tools, how to publish and deploy the tools, and that's what we're going to be focusing on today. So, we're going to start here. Number one, app brief. We want to write a plain language description of what the app does, who uses it, what what it needs to achieve. Get real specific. Step two is a scaffold. So, Claude's going to generate a complete project shell. Whether that's React, whether it's a single HTML, HTML file, the scaffold will pop up and you'll see that when we do our builds. Step three, features. We can describe each capability conversationally. We can add language transitions. We can add summarizations. We can add additional features after we build that full scaffold. Today, we're going to be focusing on one single prompt that kind of rules it all. So, all of these will kind of get rolled into one prompt. But a lot of times when people build this, they start by explaining what they're doing, then they get the basic scaffold, then they add features, then step four would be test and fix. When the output is wrong, Claude Code is really good at fixing it. And especially when I show you how to deploy it to GitHub, Cloud Code automatically runs a quick build to see if it will deploy safely and it fixes itself. So the testing and fixing works almost by itself, but only because I'm telling it, hey, I'm ready to deploy now. And it knows that it needs to test and fix. But again, we'll try to wrap as much as we can into one prompt. And then of course, the step five is an actual live deployment. So a URL or a link that we can email hand to our team and say here's the working app I just built. Here's how you can access it. Go ahead. So last if you joined a webinar before and a little bit today I will show you how you can publish a cloud app or an artifact within cloud.ai but part two will focus on how would I use any large language model using cloud code to build it where and if I wanted to deploy it anywhere how would I do that? So the last step here and the last step we'll be talking about today at towards the end will be about deployment and you can go ahead and skip forward for me. Yes. Uh Tim before we move forward I was just wondering if you could take this question because this seems to be a common uh query from multiple people. Um I know we're focusing the workshop on clot but people are do want to know if um you know they can follow along with uh any other um you know tool like Gemini or ChachiPT um if you could just offer your uh insights on that would be absolutely so chachbt is another one of my favorites. So Gemini I use Gemini for a lot of builds for very small features or safe features. Gemini connects to Google Cloud Run and Vertex AI. So there is a full ecosystem in Gemini. I'm not going to talk about it, but it all exists within Gemini. So Gemini, if you're already enveloped in a Google Workspace world, whether it's with work or your own personal projects, I would stick with Gemini. You can still follow along today. You can do very similar things with Gemini. Now, when I go into Claude Code, Claude Code actually interacts with your computer terminal. It's a command line interface tool. So Gemini probably honestly it might not have had one yesterday and it might have one tomorrow because this field is working so fast. I don't know of a good Gemini equivalent right this moment for claude code but part one when we build in cloud.ai completely in the cloud interface you can replicate pretty well with Gemini. Chat GPT also has a full product called Codeex, which is almost the same thing as Cloud Code. It can interact with your command line interface and your actual computer terminal, which is what allows it to make changes to files across your computer without having a user interface and clicking on icons and all of that. So, Codeex is the the most similar chatgpt OpenAI version of Cloud Code and Cloud.AI that we'll be using. Gemini does work similarly and like I said if the product doesn't exist today it might exist tomorrow. So knowing how Claude works and if you're enveloped in a Gemini workspace and a Google workspace, absolutely take what you learned today and then go talk to Gemini and say, "Hey, I just learned how to do all this with Claude code. Gemini, what do you have that's very similar? Where can I start?" So honestly, I would take what you learned today about Claude and then go to your favorite large language model and explain exactly what you learned today about Claude and ask your favorite large language model how you can replicate or get close to the same process. But codeex for chat GPT is very similar. Gemini probably has a product, but I'm not as familiar with it. Okay, great. Thank you, Tim. I'm moving on to the next slide. Absolutely. And Ana, is this slide for me or are you talking on speaking to this slide? Yeah, one second. Oh, yeah, not a problem. I just wanted to make sure. Okay. Yeah. Um, okay. So we have covered all the concepts uh w coding prompt engineering how clot code works um and what the build process going to is going to look like and I think at this point um most of you have like a sense of the mechanics uh you understand what's uh uh about to happen and um you know what you're going to build when we go live and um you know what a good prompt looks like versus a weak prompt you know what claude is actually doing when it builds across files. So um here's a question I want to plan before we you know get into uh the whole build. Uh today may be your first build but um this is what the build after today like in 16 weeks can uh possibly look like um you know uh we uh the skills we've covered prompting precisely um scaffolding with AI debugging conversationally deploying um those are all transferable transferable skills and the question is um transferable exactly to what um you know you could be building a personal finance tracker that doesn't just um you know log your spending, it can forecast it. You could be uh building an HR assistant that reads job descriptions, screen applications and drafts responses automatically. Um you could be building an AI design studio that generates brand assets um on demand from a plain English brief. Um a BI dashboard, an image generation app, a personalized language model and a lot more. Um these are the kind of applications that you know people who go deeper with this um you know whole stack are building right now. Um some of them um you know might even be uh turning it into a whole business. So this is the you know potential of um all that you can learn and all uh that you could build in 16 weeks uh with the Microsoft AI engineer uh applied genai specialization. uh we will be um you know talking um dedicatedly about this in a couple of hours. There's a full segment where we will walk you through the curriculum, the projects and what's uh what tonight's attendees will get specifically. Uh but I wanted to um you know just set context for the destination before we go live. uh because what we're about to do in the next couple of hours um you know makes a lot more sense when you know it's not just a one evening or a one morning skill. It's the beginning of building a whole stack and beginning of building a whole um you know AI portfolio. Right. So Tim if there's anything that you want to add on to this you can and then we have uh a you know round of engagement coming in and we can uh jump right into that. Yeah absolutely. So again, we're going to cover a lot of topics today and I hope as many people can follow along as possible. And of course, we'll have different skill levels today, but if you find what we're talking about today interesting, uh the next step could be a program like this with simply learn the Microsoft applied generative AI specialization. Especially if you work within a Microsoft or Azure ecosystem already, then you're going to learn the extra tips and tools for deploying Microsoft specific and Microsoft environment specific tools, whether that's um your own solo projects or whether that's across a full team. So, it's one great way to learn. Again, I just want to stress to people that these tools change so fast. So, it's it's honestly good to start somewhere. And a course like this, even if you're not completely locked into Microsoft, learning the basics from here, this is how this piece fits into this piece fits into this piece, fits into this piece is how I was personally able to transfer those skills to claude, Gemini, Microsoft, AWS for Amazon. So learning one skill in SimplyLearn helped me then translate it to any other skill that I've needed for the last two years. helped me build a business where I literally talk to clients. I find out what they're using and then I adapt my entire plan instantly to what they're already using. I don't come in and say, "Hey, we're going to switch you to Google Workspace. You're only going to use Verscell. You're only going to use Claude as an API." I go in and I say, "Hey, what are you already using? What are you comfortable with?" And we design it from there. So, I learned one tool absolutely with Simply Learned a couple years ago, but I was able to adapt that. So if anyone's saying, "Well, I don't necessarily use Microsoft. I just don't want people to get stuck." It's great to learn how enterprise tools fit together. And then you can transfer those concepts to hopefully anything else that you build in the future. But it does, if 4 hours seems like, hey, I talked about a lot in 4 hours. I need this broken down into smaller pieces. That's where tools and systems and uh programs like this from SimplyLearn come in handy because it does break it down into smaller pieces and helps you figure out what all these moving pieces look like so that you can help help yourself keep up with the AI revolution and how fast these tools are changing and moving. Great. Perfect. Thank you, Tim. And like I mentioned, full details are coming soon after the uh build segments. So before we get into that um I'm going to take over you know for one more minute um and just like you know try a a small engagement activity round. Uh what you're looking at um you know the screen on the screen right now is a finished working application. Um this was built by uh Tim himself in our previous workshop. Um and if you you know want to know more about that you can check it on uh YouTube. Um it was a great session. We had a lot of participants, a lot of engagement. So, um yeah, you can check it out on YouTube. But back to this activity, um you you know your job is simple. If um you know uh from the core concepts that Tim took you through uh till now, uh if you can look at the app and you know um share what the prompt could have been that built this, it would be great. Um it doesn't have to be a full technical specification. It doesn't have to be a paragraph of requirement. What we're looking at is just one simple prompt. Um the kind that you would type into Claude if you were, you know, starting from scratch. Uh so drop your guess in the chat box right now. There are like no essentially uh wrong answers. We just want to see what you're thinking. And while you do that, let me also um tell you why this exercise matters more than it might seem. Um think about an app that you use every day. um you know something like a food delivery app. Um you open it, you see your location. Um you see nearby restaurants, filters, ratings, delivery time, a search bar. Um so you know uh if you ask yourself um if you had to describe that in one prompt, what would you say? Uh build me a food delivery app is just a starting point, right? But it's always more than a food delivery app. It's a location aware. Um it's filterdriven. It's a real time restaurant discovery and ordering platform. It has reviews, ratings, trackings, and personalization. So, how do you describe that in a prompt? Um, when you practice looking at a finished product and working backwards to the intent, you sort of try to understand what Claude needs to know before it can build something well. So, you develop an instinct for specificity. So you stop writing vague prompts because you can see exactly where vague prompts would produce vague results. So this concept is called reverse prompt engineering and it's one of the most useful things you can practice as a builder. So that's what we are trying to um through here. Uh okay I have people seeing that it's appearing plur. Just give me a second. I'll see if you can Okay. All right. So you can just uh I think all of you would be able to zoom in um in your systems if you want to look at the screen a bit more closely. I think that would be better um than me doing it because it might just appear differently for everyone. But you can like just you know pinch um pinch out or just use your mouse to zoom in. I just tried in my another system and that works if you want to look at the screen more closely. Right. Okay. I think we have couple of answers that have come in. Mark, thank you for sharing a prompt. Okay, great. Okay, so I think I will um go ahead and reveal the prompt that we used in building the app and Tim can also come in and share his uh thoughts on why um you know thinking this way helps. Tia audio. Yeah, absolutely. So, it is kind of hard to see from two screenshots, but what we built last time, and it's totally okay if you weren't part of it. So, the point is we built a an assistant, and it was able to do several different things. It was able to respond to client emails by pulling additional documents from your company so that you could have company contextaware email responses to various clients. You could choose the tone professional um more uh whatever that looks like whether it's friendly professional you could choose like a tone. Then we also added like a project board where emails and meeting notes could get filtered in from a whole team to create like a running kind of tracking device of where the project was going from start to finish whether it was an idea before the project was actually being built. So the purpose was that we were building an assistant that was helping to do several different things, respond to emails and do other things that we would find useful. So it wasn't just a one tool uh app. So our whole prompt here was something similar to build me a simple react app. There we asked for a very specific framework and structure for our app for team workspace that will handle several functions for our small business. The core features of this app will be summarizing and creating email responses to clients based on company documents. We will also have a meeting note summarizer that feeds into an ongoing project board. And finally, we will have a section for employees to view and comment on business SOPs or standard operating procedures in order to make data sharing easier. So, one prompt, but we were very specific. We said, "Hey, build this specific framework." Uh, today I'll even show you, we'll go into being even more specific. will say, "Hey, I want three tabs or four tabs or multiple tabs." But the point that you want to take away from this is that we were very specific with what we asked. We explained what the core features were. We didn't just say, "Hey, build me an email assistant." it would have produced something. But what we produced, and it might have been a little bit easier to see if I was clicking through it and showing you how there were a lot of different features, toggles, and things that you could do within that app, uh, it was just a much more complex app than, hey, build me an email tracking app. And we still did it with very few prompts in that last session. So again, totally fine if you weren't part of that last session. Uh, but what this reverse prompt engineering does, and I often do this with any tool, if I really like an app or I really like a website, sometimes I take a screenshot and give it to Claude or Gemini or ChatgPT and say, "Hey, help me reverse engineer this app or this website. I really like this feature or I don't like this feature." and Claude or Gemini or ChatgPT can help you create the reverse engineered prompt based on what you liked from another product or another website or another app. There I see a good one. Build an AI email app that can track the mails incoming outgoing. It must handle the company contacts email separately. Absolutely. So that's a good prompt because and you'll see when we get to our one prompt, it's a very long prompt. It's longer than this prompt, but that's because it's complete. It gives a lot of information. So, the biggest thing I tell people is don't be vague. There's absolutely efficiency and token usage to think of, but today I don't want you to worry too much about that. I want you to think more about I want to be hyper specific in the way I explain what I'm trying to achieve from this product. Another one, build me a React app that do not do a lot of comparison. supply reports early. You mentioned specific reports. Yeah, go ahead. Sorry, we have to stay on time. Yes. Uh I think it just took a little while for people to for everyone to type the prompts. Uh great to see like you know some really good responses that have come in. Right. Uh Tim, thank you for setting context with um you know this activity and like you know um letting us know why thinking this way is important. So with that, maybe you can um also um you know talk us through what goes into building um this perfect prompt, right? That's uh that we're going to um kickstart the build with. So um with this uh segment, we can you know get started with the build very soon. Would you? Yeah, absolutely. So before you build anything with AI, build the prompt. So you can even start building this in your mind, but you can also start building the prompt within claude.gpt or Gemini, which I will show you here in just a couple minutes. But before you actually even start using the tool, remember what we talked about earlier, we want to give it a lot of context. So we want to think about what's the role. We want to tell Claude who it is. So we want to say, hey, you're a front-end developer. You're a full stack engineer. You're an HR expert with back-end engineering experience. we can tell it what role it's taking on so that it automatically knows a little bit more about how we expect it to behave. If we tell it it's a full stack developer at the beginning of the prompt, then it's going to be more likely to expect maybe front-end and backend logic in the app that we're building. If we tell it it's a front-end developer, it's going to focus on UI and UX and the front-end experience. If we tell it it's a certain subject expert, it might get a little bit more specific in that exact subject. things like that. And then the then the task we want to state exactly what needs to be done. One action, one outcome. We can also give it multiple tabs. Each tab could have one action, one outcome. Build a home screen here. This is the example. Build a home screen that shows a live expense summary with three categories. So, we're going to tell it very specifically what we expected to do. So, here's what here's who you are. Here's what we want you to do. And then number three, format. Specify what the output should look like. So in our last one, we said build us a React app. That was saying what sort of structure we wanted for our app. So that was part of the format right there. But we could also say return the full component code in Nex.js with Tailwind classes. No explanations. We can say hey we want this as a VTE app or a React app. So oftent times, especially for what we're building today, the format could be what sort of framework or structure do I want to build? Again, if you don't know the names of all the frameworks and structures, talk to Claude, talk to Gemini, talk to chat GPT, and explain what you're trying to achieve and ask it to give you suggestions. What's the best framework? What's the best coding language to include in my prompt to get the best outcomes? Again, you do not have to be a subject expert. You just have to keep asking questions. Don't be vague and if you don't know the answer, ask your tool the answer before you start with the prompting process because again, and I saw this in the chat, we do want to be efficient with our tokens. So, I will try to balance today being efficient. The more you know about the process and the more you know about coding, the more efficient you can be with your tokens. The less you know about coding, you might have to use a little bit of your token usage to explore what you need to ask for and how to build the perfect prompt. So that is one way that more senior developers and coding experts do have because they get a little bit more out of these tools as far as you should and tokens because they can skip right to the point. Ask exactly what they're looking for. That doesn't mean you can't do it. It just means you might have to do a little research on the front end. And that's what we're doing here by thinking about our prompt before we eat it into Claude. And then number four here, edge. the edge cases tell it what to do when something is unclear or goes wrong. So, we always want to explore edge cases because we might know how our app's going to function 90% of the time, but we might not know how it's going to function if somebody feeds it a really weird input or uses it somewhere weird or in a different setup as far as their computer environment. So, edge cases test to make sure it's not going to break if it runs into something that it's not expecting. So if the code isn't expecting us a specific output or a specific input or a specific user interface or a specific environment edge cases and exploring that before we go into the process. So for this case we can just tell it what to do when something is unclear. Sometimes that's just saying hey tell this person that I'm so sorry. So maybe your app doesn't work for that person but you've created an edge case where it says so sorry this app isn't working. Please try again later. something like that. So there's at least error handling if the app doesn't work and that keeps people from saying, "Oh, this is broken. I don't care." You at least have to kind of mind the the gaps where the app might not work. So an example here in our prompt could be if a data field is missing, show a placeholder, do not leave blank states, or don't do nothing at all. At least give an error message, something like that. All right. So, we've been talking about it long enough. Now, we're going to do it. So, part one, we're going to start our build and I will share my screen and go over to Claude AI here in just a second. After part one, we'll take a break. So, in about an hour, we'll take a 10-minute break and come back for part two. So, Ana, is it okay to share my screen and move on to part one? Perfect. Yep. All right. Share. All right. So, I'm going to start with my desktop over my shoulder and I will keep an eye on the chat to make sure things are relatively visible. Oh, let me do one thing and shrink this to the window specifically. There we go. That should make it a little bit bigger. Wider, please. All right. How is that looking, Ana? Thumbs up. Thumbs down. Too small. Is there a different way I should present? I want to make sure everyone can see it. Um, it is visible, but if you type in the prompt, it might get a little difficult for people to follow. So, absolutely. I can also Well, that might be too big. Right. Okay. Looks good for now. If we are um facing any difficulty, then maybe you can stop share and um you know not do the over the shoulder. That way like the screen might be more uh visible. Yeah, let's do that. What about does this block too much? I'm down. We'll we'll work on it as we go. You guys keep me posted and yeah, we'll make changes if need be. All right. So, we're talking about prompt engineering. So, yes, I'm getting hearts and thumbs up. So, I I I like the reactions in this case. It's a quick way for me to see on my screen when I'm trying to manage three things whether something's working or not working. So, perfect use of reactions. Thank you so much. All right. So, for the first part of the build, I want to point out here that I am just at claw.ai. So, that's the normal clawed web browser version. We're going to do part one all in this so that we don't have to worry about dependencies, downloads, or anything like that. So yes, claude code is going to live in my VS Code. I will point out as we go here. So there is a claude code section in your claw.ai web application, but you can see right here it's still in research preview. I will talk about that very briefly, but cla code works best when it's interacting directly with your terminal, which is best done currently in things like VS Code or Cursor or a full integrated development environment. So, things to come. Again, these tools are moving so quickly. Clog code in the web browser might work perfectly in a month. When I tested it over the last week or so, it still wasn't quite up to par for what we're trying to accomplish today. So, what we're going to start with just to talk more about the prompting is we're going to build a single artifact inside cloud.ai that functions as an app. And that's when in part two, we'll take the same prompt and we'll put it into Claude code and I'll show you the multi-file refactoring and how it's kind of the next level up for Claude. Um, but we'll go ahead and get started. I won't talk too much. Please put questions in the the chat, but I'm not going to go too much over settings and things like that within Claude because I don't want to take up too much time, but I'm happy to talk to it, especially when I start running these prompts. Sometimes it'll take a few minutes to run things. So, I'll try to answer questions and talk about it uh in that context. Um, but you can see here I have a pro plan. So, I just have the $20 plan. Um, I will keep track of usage. If you don't know how to look at your usage, if you click on your name down at the bottom and click on settings, you can look at usage here. You can see I've used 5% of my current 5h hour window. I've used 8% of my weekly usage. So, if you're wondering if you have enough space to follow along and you didn't know where usage was before, you can absolutely look at it there. Again, that was settings and then usage. So, to start here, I'm going to purposefully move my model over to Haiku 4.5 extended. So, Opus 4.8 is the the the best model out currently, and it's really good for complex coding tasks. It's really good for everything, but it's going to use the most tokens and it's going to hit our usage limits the fastest. Sonnet 4.6 is a very good middle of the road. It can do most coding tasks. Um, it's just going to be a little it's going to do a little less reasoning, a little less uh a little less speed than Opus. I'm liter I'm starting with the lowest one today to keep usage low. So, for anybody who's trying to follow along on a free tier, I'm going to start with Haiku 4.5. And I'm going to do that because the very first thing I'm going to give it is a bad prompt. So, the very first prompt I'm going to get it, and I'm not going to copy paste this because it's six words. I'm going to say, "Build me a habit tracker app." So, today we're going to be building a habit tracking app. So, the very first thing we're going to be generic, I do want to say though, so my claw does know that I've been working on a habit tracking app. I'm not going into the specific project, but we're all probably going to get very different applications or outcomes rather from this prompt, but let's go ahead and run it. I didn't tell it I want it to be a React app. I didn't tell it it's a front-end developer or a back-end developer. I didn't tell it what features. I didn't tell it literally anything. So, it's already going to start. It knows I'm being vague. So, it's going to say, "Before I build this, let me ask a few clarifying questions so I don't waste your time building the wrong thing." I love that. I appreciate that. It wants the scope of use, data persistence, authentication, habit types, primary interface, specific features. So, if you're using a tool like this that's going to ask you for more questions, it's automatically trying to steer you down the road of success. And so, even when I say prompt engineering is a job that some people spend 40 hours, 50, 60 hours a week doing uh much more complicated prompt engineering and things like that. But, Anthropic, Chat, GPT, OpenAI, Google with Gemini, everyone is trying to make these tools more usable. So, this is a great example here because Claude is trying to steer me towards a more structured prompt when I gave it a super generic prompt. So, I'm going to just stick with this for a second and say I just want a generic Abbit tracking app. Again, this is just to quickly show you what a very generic prompt looks like so that we can compare it to our very structured prompt. So we can see that it's working here. It's telling us it's architecting a React habit tracker with local storage persistence. Again, I have built a lot of React applications with local storage persistence. So your Claude AI might be doing something very different, much more vague, whereas mine is going to use a little bit of its chat history to understand what kind of things that I'm probably looking for. But here it says it's architected a functional habit tracker. Let's see if we can make this function in any way, shape, or form. Uh, I don't honestly think we can, which is fine because that's the point. So, what we're going to do now, we've kind of hit a little bit of a snag. What could we do? Yes, right here, we can add a habit. So, it is a working app, but what can I do with this? It's not It's not It's not very flashy. It's not very fun, but I can say go for a run. Great. I have a a single artifact here in Claude that has a habit tracker that I can add things. What do I do with this? I can throw it away. It has some basic features. But the point I'm making here is that just typing build me a habit tracker app. Now, if I had answered all of these questions, it probably would have built something more significant, but I wanted to show you that a generic prompt is going to give you a generic output. So, I'm going to start a new chat and I'm going to flip it up to Sonnet 4.6. So, Sonnet again, middle of the road as far as usage, reasoning, and it speed essentially. You can also do a few different things here. So, now I'm in Sonnet 4.6. I can look at my effort. I can choose low, medium, high, or max. So there's a little bit more to it, but essentially low is going to use the lowest token usage in this case, but it's also going to be a little lower reasoning a little. It's not going to maybe reach out to as many tools to get additional information, additional context, but I'm going to leave it on low. Again, you play with models, you find out what usage works for you. I'm going to leave mine on 4.6 low. So here I will go ahead and we're going to build the perfect prompt now. And I will drop this. I promise. So we're going to I'll drop this in the chat and Ana will get it in a or someone on the SimplyLearn team will get it in a Google Drive file. We'll get that settled here in just a second. But I want you to start focusing on this because you can absolutely type it with. So the first thing we said we need to tell it what we're going to do. We need to tell it how it's going to behave. So we'll start with something like you are a senior frontend developer building a mobile first web app. So now I told it it's a senior front-end developer. So it's going to focus more probably on the UI, UX, the user interface, but we're building a mobile first web app. So, if anybody's ever built an app, an app looks very different on your desktop, on your computer, than it does on a mobile. So, here we're automatically telling it right out of the gate, we're going to want this optimized for mobile. Now, let's tell it what we're going to do. What do we what's the task we're going to give it? So, we're going to say, build a fully functional habit. And I promise I'll share this whole prompt in a second, but I want you to walk through it with me. fully functioning haber web app. Let's do Yep. With the following requirements and I'm going to point out because I want to just keep the speed up here. Yes, I see I typed a few things in correctly. When I give you the full prompt, I'll make sure it's not. But the fact the large language models that we use today are good at understanding our meaning and our intent without every word being spelled correctly. So there are certain way places you can take shortcuts. So I'm going to build this as a full uh prompt with placeholders so that you guys I encourage you to actually fill it in with your own use cases. Okay. So let's describe our app. We're going to give it a name. But for now I'm just going to give it a placeholder app name. And I don't want it to just be any color because a lot of people are going to have some sort of theme, some sort of brand or logo that they want to match. So, we can give it a ton of information about our actual colors and things like that, but for here, and again, I'm going to drop this whole thing in the chat shortly, but we want to give it a place for the actual colors. So, I think you understand where I'm going with that. So, not to make you watch me type every single thing out in real time, let me drop this prompt in the chat and we'll get it uploaded. All right. Well, and it is not letting me type here. Give me give me a quick second here because I'm not even able to drop it. Let's see if I can drop it to hosted panelists. All right, let me troubleshoot this real quick so we can get this prompt is very long. Ana, it won't let me even copy paste in the chat. What's the quickest way you're aware of to I have I have shared the document link. Um, you can paste it in the document. That should be possible. Perfect. Thank you so much. Oh, I'm going to have to request edit access from you real quick. Thank you guys for sticking with us. We're debugging our workflow as we go. Just like Claude Code, we'll debug our code as we go. All right, reload. There we go. All righty. So, I've just pasted the full prompt that I was typing out in front of you guys. I'll still walk through it, but I'm not going to make you watch me type every single letter. So, I'm too going to copy paste this. And I'm going to come back to our claude chat. And this is also why those spelling errors didn't matter at first. So, this is a very long prompt. Yes, that's okay because we want it to build a very specific app for us. So, when we talk about token usage and things like that, I if you're worried about your token usage, absolutely you can drop this back to Haiku. You can turn your if you go to Haiku and you can turn off extended, that'll give you even more token usage. But I will say that if you start with Haiku, you can't bump up to sonnet 4.6 in the middle of your chat. You can drop down to a lower reasoning, um, but you can't go up to a higher reasoning if you didn't start there. So, I'm personally starting with sonnet 4.6. six low, but today we're essentially just learning. If you want to use the lowest model just to get an output, absolutely fine. But here we have our app name. We have features. So, we're going to add, edit, and delete habits with custom names. I created placeholders so that you guys can absolutely change this to your own spec specifications. We want a daily check-in to mark habits completed for the day. Streak tracking, dashboard showing, language toggles for different language. All UI text and buttons switch instantly when the language is changed. For the design, we're asking for clean, modern, mobile, responsive layout. Again, we want this to work really well on a mobile device from the beginning. So, we're specifying that. Habit cards with visual streak indicators. We're specifically asking for a flame icon for active streaks. If you have seen any other app that tracks streaks, you're probably familiar with the you're on fire, keep your streak going. We want a progress bar. We want an empty state messaging when no habits exist yet. So, what happens when there's nothing there? We don't want it to just look like a blank screen. We want there to some be some sort of interactivity data. What do we want to happen with the data? For this one, we're asking it to store all data in local storage so that nothing is lost on page refresh. So if somebody opens our app and then they open it tomorrow, we want there to be local storage so that their habits from the day before stay on the app. There are many ways to handle memory and long-term storage. But for today's session, we're going to start with just a local storage like this. No login or backend required. Authentication automatically just adds a whole other layer. It would probably add two two hours to our buildathon today. And at the bottom of the prompt, you'll see the placeholders. So that's what you can swap to make this your own project while we're building together. So app name, we're just going to call our app today wins as our habit tracker. For primary color, that's a hex code right there. That that pound sign 6366F1. It's some sort of shade of blue. Uh but if you have some sort of brand kit or if you're familiar with marketing hex codes and things like that, you can pick a very specific primary color for the app to build itself around. Habit categories we're choosing. We want four things to choose from. Fitness, mindfulness, learning, productivity. Change those at your will. And then languages. Again, fully fully up to you what you want to choose. I'm just going to choose English, Spanish, French, and Japanese. So, all we have to do now with our one long prompt is run it. And this will take a minute to run. So, I'll check the questions here in just a second. I just want to make sure it's getting started on the right foot. I can also close my sidebar here. So, it gives you some little says polishing the flame icons, gearing up, almost ready to crush it. It's almost kind of like it's just kind of giving you something to look at while it's thinking so you know it's not broken. like what we would do with error handling in edge cases. We want it to do something so you know that the app is working. Quad chat right here is doing the same thing. It's letting you know it's working while it comes up with So, let me see in the chat here. Absolutely. And I see in the chat someone said um I think some of it's coming to host and panelists, but if you don't know hex colors, you can absolutely say dark green, forest green, light blue, hot pink, you can describe colors. You don't have to use hex codes, but some people that are in marketing and things like that have a very specific brand kit and very specific colors they have to use. So this is just an example of how you can force the the model here to build with your colors. You could also give it primary, secondary, and tertiary colors. You wouldn't even just have to give it one color. You could give it multiple colors. It was just a broad placeholder for saying you can control how it looks, both the color. If we wanted to add our specific logo, we could do that as well. We'd have to give it our logo. All right. So, here we have an app. Let's check it out. So here's your fully functioning daily wins habit tracker. Everything live runs live right here in the chat. So what's working at habits? So you can see already that we have something a little bit closer to what we were trying to achieve with our variable generic thing with our generic prompt. So now we can automatically switch between Spanish, French, Japanese. I don't know all those languages, so I'm going to stick with English. Now, this kind of still is just kind of in its separate thing. Let's see here. This is giving us a spot to actually add a habit. What I want to do is see this as an artifact. So, I'm going to add in my chat feature here. Can you please make this an artifact? And I'll copy paste this into the Google doc in just a second that shows up here in a split screen so that I can interact with the app that we're building. So some of you might have already gotten a split screen effect and sometimes Claw does it automatically for you. Literally last week this did it automatically for me and this week it's not. Totally fine. We're here to learn how to problem solve and adapt. So, I'm just going to say, can you please make this an artifact that shows up here in a split screen? I will copy paste this over to our prompts. So, here you can see it's actually writing more code. It was giving us a handy dandy little preview, but I actually want to see a React app here in my Claude screen. So, we'll let it work. Let me see if there are any. Claude gave the whole code, not the app preview window you have. That's absolutely fine. Some people are going to absolutely get this code. If you didn't get the code, then you can use my additional prompt that I just copied to force it that way. When we get into claude code, claude code is so great and people love it because you open it in a coding environment like VS Code. It cla because I'm opening it in a coding environment, it already it's ready to code. It knows what I'm going to do. Claw.ai is here to chat with us. It can do a lot of really cool things like there's a co-working feature where you can connect it to your Google Drive or your Microsoft documents and SharePoint and things like that. Claude code is great because it's for coding. So essentially right now we're using claude.ai's ability to code to code within the app so that you guys don't have to worry about dependencies and downloads for part one. But that's the trade-off. It might not do exactly what you were asking it to do. You might have to push it in the right direction. So some of you may have got something more like this from the very first try. Totally fine. I just had to steer it with a secondary prompt to get this. So now I have what some of you might have already had. You can see what our app looks like in a little bit more of a final version. Here's my uh hex code. The hex code that we had in there. This 6366F1 was some sort of blue shade that's commonly used for development and things like that. Here we can actually see the preview of what the app looks like or we can click on the raw code and we can see that claw.ai oh let me move there that claw.ai actually just wrote 572 lines of code for us. So we have daily wins. So here we have our language toggles. We can do English, Spanish, French, Japanese. Let's go over here and add a habit. So, let's let's see what our habit's going to say. I already Well, the example is morning run. So, I'm just going to give it morning run. It's definitely in the fitness category. I'll go ahead and save it. You can see here now we can add as many as we wanted to. Let's say eat a good breakfast. I know breakfast is a lot of things people skip. That could be that's probably fitness, but we could absolutely learn. Maybe we want to add a whole nutrition section. The point of this is to show you how you can get an app up with one prompt. So, we're not going to do too much iteration today. So, we're going to focus on how it works here and I'll answer questions and then we we'll talk about how to make it work in cloud code and at the end of the session, we'll talk about cloud design. But you can fully function in here. I can see I can check things off. I can see like okay this is working how I expected this isn't working how is I I was expecting I have the ability to edit I can delete habits okay fully functioning app pretty cool right we built that with one prompt plus we had to tell it to go ahead and create the artifact on the side but we've done a few things here and let me make sure it actually ran a lot quicker than what I thought it was going to, which is great. So, Claude made and it was also probably because we had a really well structured prompt. So, Claude didn't have to guess what we wanted as far as features. It didn't have to guess what part because if we had said just make this multil- language capable, it would have probably gone out to the internet and done a web search to find out what the top four to six top languages for a habit tracking app as far as marketing requirements or who was using this and what regions they're using it in. So, it probably would have gone out and done a little research, but since we said Spanish, Spanish, English, French, and Japanese, it didn't have to go do all that. It didn't have to reason through what languages do we think they wanted. So, one of the reasons it built so fast was probably because we were so specific. But I also want to show you what to do with this. So, we can refresh the app again. You can see this code. You can copy this code and literally put it anywhere else you want to, but you're a little bit limited. So, you can absolutely download the code here. You'll get all 600 co lines of code. You can now publish this as an artifact. So let's say, hey, I'm done. I think this is the coolest app I've ever seen. I'm going to go ahead and publish this. I want all my friends to start using my app. So Claude does make a very efficient way to share things, but it's not how most developers would ship and deploy things, which is what we're going to cover with Claude Code in VS Code, as well as GitHub, which will be in part two. But essentially, if I wanted to here, I can publish this artifact. This will automatically be called daily winds.jsx unless I rename it. And then I can publish and copy the link. So now I have a published link. I could send this to you guys and I'll even put it in the chat. See if it works in the chat. So, I dropped the link in the chat. You should be able to click on it. Now, here's the important thing. If you're following along with Gemini or Chat GPT…

Transcript truncated. Watch the full video for the complete content.