Vibe code a skills showcase app in minutes - Replit Tutorial

Picture yourself in a room with your business partners. Now they're explaining the business problem that needs to be solved, and you're moving from conversation to app building right there, live. As changes come up in the conversation, you're able to make them on the fly. That's possible right now with Vibe Coding. Just imagine the possibilities that this unlocks. As an AI strategist for business leaders, I no longer spend hours and hours creating lengthy technical requirements. Instead, I jump right into Vibe Coding. Let's put Vibe Coding to work for you. We'll get started by creating a website that showcases the impact of your work. It's like your own personal brand and you can even highlight your live Vibe Coded apps. It's just an example. I'll show you how that works. I'm going to go over to Repl.it and I'm going to enter in a pretty basic prompt, which is to design a personal professional website to highlight my experience and the impact of my projects. Now, you don't have to be super technical or long with your prompting. The AI understands the intent and the context of what you're asking for. So I made spelling errors here, but I often don't worry about it. I don't let it stop me, because this is vibe coding after all. We just keep going with momentum. And AI is smart enough that it knows the intent of what you're asking. So don't let that slow you down. Now I have my resume on my desktop. So I'm going to add it here as an attachment. Because I'm adding my resume, it's going to give the agent context about my experience, my skills, my education, and my projects. It's just going to make that process quicker. I'm going to click Start Designing right now. Now, what's really great about having a website is you get to showcase more detail than you can get on a static resume. If you've ever tried to put all of the impact of your work in one or two pages of a document, you likely struggle. And so that's one of the advantages of having a website that is just on all the time. The agent in Repl.it will always let you know where it is in the process of building. So on the left-hand side, you can follow along if you're interested to see how that process works, or you can go do something else and come back in a few minutes. I can see here, it's telling me that the preview is going to be available very soon. What happens is it's in the background, It's doing all of the work, creating my website based on my requirements, and it's going to present me with a template that I can either continue iterating on or I can choose to go ahead and promote that and publish it. Because the AI understands my background, it's read my resume, it's trying to get a picture and a profile of who I am, it's also gotten created some placeholder images for me. So it's generated an image of a data flow background, and it's done that because it can tell in my resume that I've got experience as a data engineer. You don't have to keep these, you can change them out if you want to. The other thing that's pretty neat about this tool is it lets you know how long something is taking to be created. You might be interested in this, but it's taking 11 seconds to develop the component assembly. It would take me longer than 11 seconds just to log in and get signed up to try and build the website by myself. So we're getting close to it being ready here. We'll have a website in under 10 minutes. So here I have the sample website that's been created. Now you can see that this is just an example. We've got Sarada Kapoor. That's her resume. It is her portfolio that we're building. If we go down, we can see the selected projects. This is where some of the magic happens with having a dynamic portfolio versus a static resume, because you can build this out as much as you want to. You could also include links to your projects if you like. Now, I can make some changes here. If I don't like the color theme, if I want to highlight anything at all, I can do that. I think what I'd like to do is add in a picture so that I can make this more personal. And I'm going to add this as a section at the top of the page. And we'll see how the agent is able to interpret those instructions. I have my example photo right here. I've uploaded it and I'm just going to send it to the agent. In the back-end, it's interpreting my request. It's going to evaluate this image file and then attempt to make changes to the template so that hopefully, we get a portfolio picture at the top of the page per my instructions. I also find it pretty neat when you follow along with what the agent's telling you it's doing. It's speaking to itself almost as it goes through its process and telling what is it doing to create this image. It's saying I'll likely use a two-column layout, so you can read along and see all of that if you're interested in it. But it's done what it was supposed to do. I really like this example. It feels personal. The picture's there, the website's developed, and our portfolio is here.