Abdurrahman Rajab: [00:00:00] Hey. Hey, and thank you everyone for joining today. I’m Abdurrahman Rajab, software engineer, web developer. I’m podcast host. The podcast name is before starting for today talk. I would like to thank everyone in. Virtual Coffee, especi and IO for having this kind of awesome opportunity to. Talk about AI and enabling everyone in the community to move forward.

As for today’s talk, I’m going to show you how to use AI to build a modern website, especially visit the Dev, which is like a Vercel project. And at the same time, I will share with you the main points to write an awesome prompt and what you can use AI for. Because like at the end, AI is a statistical model and.

The more you know how to engineer your prompt and having an awesome [00:01:00] ideas about that, you’ll be able to create an awesome. Project with this. To start with this, I will go and show you v0, which is like, as I mentioned, a Vercel project, enables you to create an awesome UI with ai. You can think about it as your AI assistant or like your design assistant that you can talk with.

So to write an awesome product here or like. And now you to write and also prompt here. You need to have a precise information and knowledge that you will share with your, with you. Share in your prompt. For that. You can like, as I will show you here, I have already written a prompt, and in this prompt you can see that I told, I wrote that I need a header.

And the top of the page with the page that I want. Then I wrote what kind of sections I want to have in the main page. Beside that, I wrote the colors that I want in my website. So this kind of information, as you see, [00:02:00] I, I, I almost like described everything here in the prompt and this kind of description and having a descriptive prompt will.

Give you the best output for your, for your website. You, you, you can’t think about this as like designing and imagining the website in your mind before writing it as a prompt and then providing that as a prompt to your, to, to the AI tools. And one of the most important thing here is to keep in mind is that you, every tool in AI is using.

TO is have been trained on different data sets. And for v0 they have used that to train it on Next.js projects, Tailwind projects, and which is the first thing that they start with. And then over time they added an extra frameworks, which is, which you can see in, in the frequently asked questions. And the website, they added boost trial material, ui, and I think they added chra and styled components.

So if you are familiar with [00:03:00] this. Stuff you’ll have like a more advantage when you are writing your prompt. If you are not, you could like learn that by the day or like while you are moving forward with ai. And to, to be more clear about what I mean here is that. When you know the com, the technology of this thing that AI is using, using you will have a better opportunity to write a better results.

For example, if you know what kind of the component that AI can provide, you can share, you can like have a list, list text, and get best result from that so you’ll work less and get better results. And here you could see like you can just move forward with ShadCN UI. I see the component they have and you can like write that component in your prompt so you will have a better result if you don’t have like a direct, if you are imagining something that is not already being done here.

You can just like describe it with merging different kind of components and telling what kind of stuff that you want. Besides [00:04:00] creating an awesome website, uh, v0 is not just good for that. You can use that to create animation, 3D essay, other stuff that you want. As for the stuff that we have here, we just can wait a little bit for the AI to finish and we see the results.

As you can see right now, v0 just designed the project that I want, which is I mentioned here that, let me write the prompt again. I mentioned here that I want a safe color picture with a person in the middle of the main page. Here it is. Which is like, I feel like it’s awesome already, but like you could, you could have had more creativity, but like this is what came to my mind.

Then I wanted to have timeline with personal history, which is like, I think it’s cool here, and I wanted to have testimonial page and a session for pictures, highlights, whatever. At the end, I want to have a photo, which is awesome. If you go to the other pages, you could see that story they wrote about me, story experience.

What, what? I’m not [00:05:00] designing. Okay, so when I’m not designing, so just like added some creativity here and you could see the blog, YouTube and the podcast here. So here you could see that I already created less than 10 minutes. I have a personal website, 3D for me, if I want to change this stuff here, instead of like going directly with AI and writing stuff here, I just can go to code and.

Find the places that I want to change, for example, here, and let’s say the pa, the main page, I would like to change the name from Jane Doe to Abdurrahman. So here you could just save that and it’s saved and you can see that changes. It should be. Okay, this is the podcast page. I need to go to the main page here, homepage here.

Let me just refresh that. Here is mine. So as you can see in the main page, it’s just showing the changes that I already did here. I misspelled my name. I need to have an N here. Okay, [00:06:00] so we could save again. Save, and you could see that in a few minutes. It’ll be here already for that. So here, as you can see, like in less demo, as I mentioned, you have a website for the function working for you.

If you want to deploy that and share it with people, you could just like click on deploy and then you could add your. Custom domain and you’ll have your website ready published. If you want to take this one step forward, you can use and you would like to use a database. You could just use database to build, which is a super base project that you can write a prompt to create your database and you can deploy that to super base.

And here, this is just a previous prompt that I wrote. You have the tables and everything related to the relationships, and then you could just deploy that and you can. Connect this with your static website and move forward, but like it’s up to you and how you would like to move forward. Just let me, before ending this here, just go and see the website [00:07:00] as a full page.

And I would like to thank you for, for joining today and listening to this. And then like, as I mentioned in the beginning. AI is just like statistical model, even if it’s a LM or whatever. And you could see like some kind of also creative stuff out of there. But like it’s a statistical model that’s using human input to generate an output compared to the previous input.

So by having this in your mind, you could keep, like you, you, you know, you will know that there know more, you know about terminology. And the design system and architecture in general, the more you’ll be able to direct AI to the stuff that you would like to see and you would like to design. And by doing this, you’ll have an awesome portfolio, websites and whatever you want to do with that.

So thank you everyone for joining today and hopefully we’ll see you later.