EP. 99 – The Ins and Outs of Vibe Coding with Tia

 Designer-turned-coder Tia joins the weekly “UX for AI” jam session to show how far you can push live, AI-assisted “vibe-coding.” From importing Figma shots into Cursor to auto-documenting an entire React/Superbase stack with CodeGuide, we watch the wins, the wipe-outs, and the fixes in real time. Stick around for tool-stack hacks, hard-won project-rule wisdom, and a finale that (finally!) ships without breaking the build. 

You can find Tia here: https://www.linkedin.com/in/carmine-mattia-scarciello-85b115a3/

Interested in joining the podcast? DM Behrad on LinkedIn:
https://www.linkedin.com/in/behradmirafshar/

This podcast is made by Bonanza Studios, Germany’s Premier Digital Design Studio:
https://www.bonanza-studios.com/

Chapters

• 0:00 Intro
• 3:15 Tia’s Journey from UI to AI
• 7:45 Why “Vibe-Coding”? AI as Power-Tool
• 13:30 Demo 1 — CodeGuide + Cursor Rules
• 27:40 Demo 2 — Database-First Build
• 42:30 Demo 3 — v0 & Builder.io Kick-starts
• 58:20 Audience Q&A, Next Guest & Sign-off

Transcript

1
00:00:00,000 --> 00:00:25,000
Welcome to UX for AI. If you don't know so much about this format is that it's going to be a very hands on workshop. Tia is with me. He does a lot of experimentation with wipe coding and AI. So today he's going to take over becoming a co-host and basically she was a co-host for the whole course.

2
00:00:26,000 --> 00:00:45,000
and basically she was some really useful tricks. I personally learned a lot from this jam session whenever there is a guest. So we're very much looking forward to have Tia taking over. And yeah, it's been a long time too. And good to see you.

3
00:00:45,000 --> 00:01:14,000
Yeah. Good to see you too. It's been a really, really long time. I think it's like two years probably. Yeah, yeah, yeah. Two years. How are you? Very much. Very good. Yeah we do. I mean we can have another conversation about it. But yeah, I mean still doing Bonanza. And we work now with bigger companies. We do run their innovation team, and help them with their own projects.

4
00:01:14,000 --> 00:01:20,000
Yeah. Very excited. Also, like I see that Nora Health is such a cool application. I don't know how you got into it and what was your journey?

5
00:01:20,000 --> 00:01:28,040
Yeah, very excited also, like I see that Nora Health, it's such a cool application. I don't know how you pop into it and what was your journey?

6
00:01:29,880 --> 00:01:46,840
Thank you, yes. So it's kind of a crazy journey because, you know, moving from like medium, big company to 100% startup. Kind of crazy, a crazy shift.

7
00:01:47,960 --> 00:02:10,840
I mean, mentorship also, you need to try to put yourself outside your comfort zone and experiment a lot in order to try to understand which is the best combination possible, both from the product team, engineering team and operation team.

8
00:02:10,840 --> 00:02:30,760
So I really, really love it also because the US market is completely different from the European one. Bigger competition, different technology, different usage of the social media, for example, for the marketing. So it's really a cool challenge. So I'm really enjoying it.

9
00:02:31,800 --> 00:02:55,320
Fantastic, really good to hear. I think we need to have another conversation to talk about what you're doing. And that's another conversation. But today is all about white coding and building application, designing. So I'm very excited. I think Tia is going to surprise me. And I'm going to learn a bunch of stuff here. I know it because your comment was so spot on.

10
00:02:56,680 --> 00:03:26,640
Yeah. So let me just do a bit of a quick housekeeping Tia, and then I'll pass it on to you. So a bit about myself and Tia, I'll share all the links in the chat in case you want to like follow, connect, talk, whatever. So my name is Barad, I run a product called Bonanza. We do a lot of app development and UX for AI is our basically a new brand.

11
00:03:26,640 --> 00:03:56,000
And we try to create a lot of content around it in case that you would like to know what we are doing. It's here for Bonanza Studio. Take a look. Also, also, also very important. We have this podcast called UX available on Spotify. We publish some of these episodes on the pod as well. Pod has its own stream of content, but sometimes we see a useful jam session. We publish it there too.

12
00:03:56,160 --> 00:04:26,080
Make sure to check it out. Also, we have a growing Slack channel. It's growing slowly but surely. So we'd love to have you there and we'd love to connect. I'm here. Just one message away. Slack channel in case you would like to pop into. You know its journey. I'll be doing good. You know, in case you would like to follow you and Tia on LinkedIn. The link is here. So a bunch of links here. Every Tuesday, if you like this, we have a video.

13
00:04:26,080 --> 00:04:39,000
A weekly jam session, either I'm taking over and showing casing what I find interesting and we do a bunch of experimentation. Either there's a guest like today at Tia is here with us.

14
00:04:40,480 --> 00:05:09,840
Without further ado, I would like to invite Tia. Tia would be lovely if you just introduce yourself a bit. What you're doing so people folks can get a feel. Also, this is going to be a workshop. So in case you would like to pop on your camera so we can see you also would be nice. It will be between Tia and I. So I will be hosting it. But you can be part of it too. Ask questions. It's a very tiny, cozy, you know, sessions. There is no, I don't know.

15
00:05:09,840 --> 00:05:31,280
I don't think Tia has PowerPoint slides or something like this. It's going to be just sharing screens and stuff. So without. Let me make you close Tia. Really excited man. Like I don't know what you're going to show. I learned tons from the previous guest. So I'm expecting to learn even more from you. No pressure.

16
00:05:32,320 --> 00:06:01,440
That's okay. That's okay. It's it make it more fun. And I think that just seeing all the people here, I see, you know, here, you know, good to see you. So it's kind of exciting. So just to give context of myself and Tia I'm from Milan. I'm head of design of Noura Health AI. That is a startup that is using AI to help people to find healthy food in the New York City.

17
00:06:01,960 --> 00:06:30,360
Especially for students that are low budget people with a lot of, let's say, option to choose about, especially during a stressful period like exam. And these bring them to junk food and not eating properly. So we are leveraging using AI to change this way of approach the food in the, in this case, New York City. And then we are going to expand.

18
00:06:30,960 --> 00:06:49,240
On the on all the United States, I work with Barrett in when I was in WeFox with also, you know, we had a lot of fun times. I learned a lot of things, so I'm really happy to be here again. This time talking and having fun with this new trend that is.

19
00:06:49,840 --> 00:07:15,000
Vibe coding. I found yesterday an article that say that like a quarter of all the startup in YC Combinator has code base generated by AI. So this is something that is really taking over. It's something that help us as a designer both for testing our idea really fast, but also to go inside the world of.

20
00:07:15,680 --> 00:07:38,320
The coding and bring this bridge between product and tech that was missing before, or at least it has longer time in, in my opinion. What we are going to do today. I was trying to find something that was, let's say, useful for everyone is not more on the technical side, but.

21
00:07:38,800 --> 00:07:57,240
More on what you highlight Barrett on the to find difficult at some point and to find yourself stuck in a point where you don't know where to go. And you start feeling frustrated. I remember, you know, with his application that has also the same problem. So.

22
00:07:57,680 --> 00:08:18,200
It's something that is, I think, common. It's normal because AI it's something that sometimes scares me as well due to the result that you can have due to the differences that you can see on the outputs that all of us can have because.

23
00:08:18,680 --> 00:08:30,040
Let's always remember that if each one of us give the same prompt to the same AI, we will have different results. So this is the first one. The second one is, I think the fear of.

24
00:08:30,680 --> 00:08:45,280
Don't know how to manage something that is, in my opinion, bigger than the Internet, because the impact of AI it's bigger than anything else in the history of the of human.

25
00:08:46,400 --> 00:08:57,000
So we need to understand that in, let's say, most of the times we need to try to use AI as a companion.

26
00:08:57,320 --> 00:09:15,880
It's like working with a with a human need to talk, not in the, let's say, technical way, but you need to use natural language. So it bring ourselves also to do a step forward to try to communicate better.

27
00:09:16,280 --> 00:09:28,520
I found a meme in the very beginning of AI that say for us as a designer, it's a lucky period because if someone need to describe to AI what to design.

28
00:09:29,280 --> 00:09:53,600
Then the results will be shit because our client when are not able to describe to all the design company or to us what they really want. And I think you better with the design agency the main, let's say I don't want to call it problem, but three that you need to challenge in the mind of the of the client is which will be the impact of, let's say your work.

29
00:09:54,320 --> 00:09:59,920
And not just describing, you know, like feature or cooling stuff, cool stuff and and whatever.

30
00:10:01,360 --> 00:10:14,920
So you try always to say to the client, "okay, try to describe me as much as possible. What do you want? Try to give me the context. Let's try to understand that's why we do user research and whatever with AI is the same."

31
00:10:15,640 --> 00:10:24,520
But it's ourselves that are doing requests. So we need to put ourself in the on the other side in that in this case.

32
00:10:25,440 --> 00:10:41,480
So we need to use context. We need to describe properly what we have. That's why most of the people find themselves in a point that they were stuck because they start typing on the AI. Okay, let's build these these and that.

33
00:10:42,200 --> 00:10:49,480
While I think that the main question we need to ask to ourself is okay, what do I need?

34
00:10:50,880 --> 00:11:05,240
The need that I need to solve. Otherwise, you can start building whatever you want, but that at some point you don't have in your mind the real problem to solve. So this is something that us as a designer, we don't need to lose.

35
00:11:06,480 --> 00:11:15,000
Because it's the process that we have that makes the difference between a successful product or not.

36
00:11:15,800 --> 00:11:29,240
I mean to double click on what you said. I think this came out of our initial conversation on LinkedIn as well. I'm using it a lot in my builds, in my prompts, whatever the case.

37
00:11:29,760 --> 00:11:46,960
I'll try to explain the purpose of what I'm trying to do. So if I am creating a service agent service instruction or if I'm creating an application in the beginning, I'll try to say what the purpose of this application is.

38
00:11:48,120 --> 00:12:04,760
Yes. Right. So, and one thing that also I find that's very useful for building application now I'm using is, I create the readme file myself and I put the purpose over there and I keep referring the AI to go read the readme again.

39
00:12:05,640 --> 00:12:30,960
And purpose defined for whatever you are doing. Maybe you are like trying to create an image. Could be like a phrase, a one-liner paragraph, depending on the, on the complexity of what you're trying to do is really helpful. So because they see that the purpose here, they need to get to an end station. The end station defining that for the AI is really useful.

40
00:12:32,400 --> 00:13:01,440
Yes, exactly. I don't know if I can, but I would like to ask to all the people here if they find themselves in our same situation. And I don't know if they have any idea or feedback they want to discuss. It would be great to listen different point of view in order to also grow and see if we are facing the common issues.

41
00:13:01,520 --> 00:13:22,520
I can go first. So, hi, thank you for the introduction. So as you said, I haven't found myself in a situation where I'm building an application or I have this idea where I want to start something of my own, but I have been, like you said using AI as a companion as a, as a human assistant.

42
00:13:22,560 --> 00:13:50,360
And what's, I mean, so far it's been working well because I get to think the purpose, the questions I design and what to ask and how to ask it. So that the, so like, it's kind of configuring the settings of AI first when I first start the conversation with the context, just like I'm talking to a human being so that they understand what I'm talking about, where I'm coming from and where do I want to go?

43
00:13:50,880 --> 00:14:00,160
And then I start digging deeper. So if I have to tune it first, yeah, that's all I have to say using AI so far.

44
00:14:00,280 --> 00:14:05,000
Yes, exactly. We need to, to always think about AI as a tool.

45
00:14:05,840 --> 00:14:22,520
So don't be scared of all these type of story we hear here and there because technology and the technology that works is because solve real problem for human beings. We can think about just light or car.

46
00:14:23,160 --> 00:14:33,680
These are technology that are also let the human progress a lot. AI, one of my friend always say AI is just the human brain with super power.

47
00:14:33,680 --> 00:14:41,920
So it's nothing different of what we are able to do. The thing is that AI is doing it much way faster.

48
00:14:41,920 --> 00:14:55,880
We need to consider that our brain connection goes to five kilobytes per second and the supercomputer that we're going to face in the very near future goes to 150 gigabytes per second.

49
00:14:55,880 --> 00:15:05,720
So the way to process information is different, but AI without human direction can do nothing.

50
00:15:05,800 --> 00:15:15,520
So we need to consider that we are the special part of AI. It's a tool and as a tool, it's on us on how to use it.

51
00:15:16,200 --> 00:15:26,200
You can drive a car and go from A to B respecting the law. You can drive a car and go to A to B breaking all the law and hurting people.

52
00:15:26,480 --> 00:15:36,760
It's the same tool, but it's used in a different way and same is AI. So yes, I think it's a good approach.

53
00:15:36,760 --> 00:15:55,960
And the more you set up, the more it will help you properly. I think it's like a baby. We can say you need to let it grow slowly because the more you learn, the more you need to give context to the AI to be as much precise as possible.

54
00:15:56,080 --> 00:16:03,640
Because it's not enough the way that you receive that type of information. So it needs to be more specific.

55
00:16:03,640 --> 00:16:15,040
Would you like to carry on? And then guys, if you have any thoughts, just unmute and get involved. We love that. So it's a very cozy session.

56
00:16:15,080 --> 00:16:28,840
Yes. Okay. So I found yesterday, going around a new tool that I'm bringing my workflow.

57
00:16:28,840 --> 00:16:44,520
So I want to show it to you for the first time, because I also didn't test it properly. So basically, I was trying to, I don't know if I can share my screen.

58
00:16:45,080 --> 00:16:50,560
We should be able to. I think it shoots. Can you?

59
00:16:51,720 --> 00:16:55,520
Check. I need to go out and go back. Wait a minute.

60
00:16:55,680 --> 00:17:04,160
Has anyone in the chat right now, building application with that AI? So wipe coding, so to say, okay, you know.

61
00:17:04,240 --> 00:17:09,040
Yeah, I'm actually in the middle of by clicking right now. Got a little distracted. Actually, don't know what the question was earlier.

62
00:17:09,920 --> 00:17:11,640
Are you working on the easy?

63
00:17:12,000 --> 00:17:13,440
Yeah. Primarily. Yeah.

64
00:17:13,720 --> 00:17:15,480
Did you wipe code it yourself?

65
00:17:15,800 --> 00:17:16,640
I did. Yeah.

66
00:17:17,460 --> 00:17:18,080
Seriously?

67
00:17:18,080 --> 00:17:19,840
Yeah. From the beginning, the whole thing.

68
00:17:20,400 --> 00:17:23,200
Come on the next weekly jam then. Let's talk about it.

69
00:17:23,280 --> 00:17:34,160
Yeah, sure. I have like hours of footage. I just recorded myself working on it. I don't have like the whole journey. But then I have like, you know, clips out, I'm going to use at some point later.

70
00:17:35,360 --> 00:17:39,240
Should we lock in next Tuesday? You want to come on?

71
00:17:40,320 --> 00:17:41,560
Let me get back to that.

72
00:17:41,920 --> 00:17:45,840
Yeah, easy. Every Tuesday, any Tuesday, you name it.

73
00:17:46,040 --> 00:17:57,360
Okay. Okay. Yeah. I'm definitely interested. Yeah. I mean, this thing is pretty crazy. I tell my developer friends, they got to try it. They're a little hesitant. They try it and they're mind blown.

74
00:17:59,160 --> 00:18:14,560
Are you using React or are you using native iOS Android? So I'm just using one code base, React native, and then using Xplode to just like, yeah, make iOS and Android builds.

75
00:18:15,000 --> 00:18:16,560
Easy, one bare twist on.

76
00:18:16,760 --> 00:18:27,800
Yeah. I think a lot of people in the mobile space will recommend against it. They prefer to have separate teams, but I'm a small team. I can only vibe code with one tool at a time.

77
00:18:28,320 --> 00:18:30,360
You got to survive. That's what it should be.

78
00:18:30,600 --> 00:18:32,600
Yeah. But I mean, it works.

79
00:18:32,680 --> 00:18:43,680
Okay. So we have, we know our next guest as well. Fantastic. You know, Tia take, so what are we doing Tia? What's the, I'm really curious about the tool.

80
00:18:44,520 --> 00:18:59,040
Yes. So I was exploring, I, oh, love that. Create rules for Courser in order to limit solutionation layout.

81
00:18:59,600 --> 00:19:01,480
I was working on it today.

82
00:19:01,520 --> 00:19:19,960
And so on. So I found this tool is called Code Guide and I was testing it and I did it with two of my, of the project that I'm working on. The first one is called Fablea and it's an app to generate bedtime stories for a child with the...

83
00:19:20,760 --> 00:19:22,160
Where should I sign up? Where should I pay?

84
00:19:23,840 --> 00:19:47,440
Okay. I will share it with you. We can probably do something together. And the other one is called Promise Music. That is a small startup of one of my friends that it's similar to Spotify, but is only for new artists that doesn't have the chance to, you know, comes out from the huge library of Spotify, full of new artists and so on.

85
00:19:48,120 --> 00:20:00,400
And they basically have a contest for two months, you can upload your track and then for three months people can list them and save it to the, to their favorite playlist and so on.

86
00:20:01,280 --> 00:20:13,200
So what it basically Code Guide do. So you describe what you want to create, what you are working on, or you can import in that case, an existing project.

87
00:20:13,400 --> 00:20:28,960
And he is basically asking you to select the AI tools and then it give you, it ask you question on your project, like who are your user, what this project is going to do and so on. And it creates,

88
00:20:31,200 --> 00:20:50,120
let's say file to that can be uploaded into Gursor. I'm going to show it to you when you import an existing project, what happen. And then if you want, we can create a new one, just brainstorm a new idea and then see how this works.

89
00:20:51,360 --> 00:20:56,520
Leo, maybe like while you're doing it, maybe can touch upon why this is such an important thing to do?

90
00:20:57,240 --> 00:21:12,800
This is important because as we were saying, AI need context. And most of the time I found myself using Gursor and see that the layout where completely changed or function where completely changed.

91
00:21:12,840 --> 00:21:23,120
So I need to revert all the, all the updates and then rewrite the prompt for Gursor in order to let him be as much precise as possible.

92
00:21:24,240 --> 00:21:41,280
So I said, okay, I need something that helped me to give to Gursor the exact context in order to be as much precise as possible. And don't, you know, and limit the hallucination that the AI can have on long threads or long projects.

93
00:21:42,760 --> 00:21:50,240
That's, that's the need that I have and that I'm trying to solve with these tools.

94
00:21:50,320 --> 00:21:52,360
So it's the first time you're using code guide.

95
00:21:53,040 --> 00:21:58,840
It's the first time I start yesterday. So I'm showing to you guys for the first time.

96
00:21:58,840 --> 00:22:01,200
And you can also give me feedback.

97
00:22:02,160 --> 00:22:08,880
So it connects with your GitHub and then you, it scans your entire code base.

98
00:22:08,960 --> 00:22:23,160
And then when you save the project, so when you learn what it is in your code base, he starts generating a huge prompt and you will see it now. So you can select which tool are you using.

99
00:22:23,160 --> 00:22:28,960
So it shapes the documentation for the, for the tool that you're using.

100
00:22:28,960 --> 00:22:30,480
And then you can select.

101
00:22:32,200 --> 00:22:36,080
Tio, do you think that the step is necessary selecting AI tools?

102
00:22:36,080 --> 00:22:37,920
Do you think like each tool?

103
00:22:37,920 --> 00:22:46,200
Would be different and like the out, the return, the output here that you're getting based on the tool that you're using and the LLM.

104
00:22:47,040 --> 00:22:48,200
It's going to be different.

105
00:22:48,760 --> 00:22:58,040
I didn't test it, but I think yes, because all the LLM, the reasoning that they have is different, even if the output is more similar.

106
00:22:58,520 --> 00:23:06,640
I saw people using Gemini just because they have more context on the token side and they can read more the full code base.

107
00:23:07,040 --> 00:23:10,080
Someone say Gemini thinks, Sony execute.

108
00:23:10,080 --> 00:23:18,720
So I think that at some point it will be something that will create differences between, between the documentation.

109
00:23:18,720 --> 00:23:28,200
But I think that the most part is done by the coding tool because I tried, I only use Cursor, but I also tried Replit.

110
00:23:28,720 --> 00:23:32,680
I think that Replit has a learning curve that is higher than Cursor.

111
00:23:33,160 --> 00:23:44,200
Is it? Because Replit is a vibe, like built to surprise, like customized design to surprise you with one shot effect, like similar to Lovable and Bolt. Right?

112
00:23:45,320 --> 00:23:45,720
Yes.

113
00:23:46,800 --> 00:23:47,080
Yes.

114
00:23:47,120 --> 00:23:52,640
You're saying that you actually had more success with Cursor compared to Replit?

115
00:23:52,960 --> 00:23:53,600
That's interesting.

116
00:23:53,600 --> 00:23:54,040
How so?

117
00:23:54,640 --> 00:24:04,080
Probably because I was a UI developer, I was becoming a designer, so I use, I use a VS code a lot.

118
00:24:04,240 --> 00:24:08,280
And then I found myself, let's say comfortable with that experience.

119
00:24:09,200 --> 00:24:18,080
The other part is that I always want to build something in a completely freedom.

120
00:24:18,800 --> 00:24:24,960
And I also, if I see that something is working, I would like to push more.

121
00:24:24,960 --> 00:24:25,600
Complicated.

122
00:24:26,240 --> 00:24:27,320
Yes, exactly.

123
00:24:27,320 --> 00:24:31,280
It's like you, you get hungry the more you eat, you know.

124
00:24:31,320 --> 00:24:41,480
So the more I build stuff, the more I want to see this going live and see if the impact is real or not.

125
00:24:42,000 --> 00:24:48,920
And Cursor allow me to do this and it allow me to do it in the easiest way possible.

126
00:24:49,680 --> 00:24:53,520
It was good to use Replit on the phone because they have the iOS app.

127
00:24:53,520 --> 00:24:57,080
So we're showing to my friends, look, this is what AI can do.

128
00:24:57,480 --> 00:25:07,080
But then at some point you need to bring it on another tool and then try to refine and so on because I saw people doing successfully.

129
00:25:07,080 --> 00:25:20,160
We can think about the UNO application is doing this by itself, but I think that at some point you always need an engineer that gives you some tips or guidelines.

130
00:25:20,280 --> 00:25:29,080
Because at least it's their job and they know more about us, but not because, I mean, we are designer.

131
00:25:29,080 --> 00:25:37,600
Most of us are designer, but in order to give exact context to the AI, you need also to know what you are asking.

132
00:25:37,600 --> 00:25:44,640
So if you don't have a strong basics of coding, it's start to being difficult.

133
00:25:44,640 --> 00:25:49,360
So that's why engineering, stepping in in that process.

134
00:25:49,440 --> 00:26:03,840
But we are not just moving pixel in Figma anymore, but we can give a proof of concept made in a proper way that can be tested.

135
00:26:03,840 --> 00:26:05,480
I did this in Nora.

136
00:26:06,520 --> 00:26:15,320
I build the vendor dashboard in five days and then I give it to the engineering team and they are bringing on the project.

137
00:26:16,000 --> 00:26:24,920
And I'm happy because Coursor was trained to use my design system so they don't have to think about, you know, the UI and so on.

138
00:26:24,920 --> 00:26:30,840
But they only focus on the functionalities and then Coursor is doing the rest.

139
00:26:30,840 --> 00:26:48,760
If there is time, I would really love to learn a bit more how you can basically create a design system, let Coursor understand it and use it for any prompt that you ask it to, if there is time.

140
00:26:48,760 --> 00:26:50,400
Well, that's very fascinating.

141
00:26:50,400 --> 00:27:01,560
I think one of the biggest challenges is for designers to get a level of consistency across the pages they're building and according to their designs.

142
00:27:01,560 --> 00:27:18,440
Right. Because, you know, as designers, we want to have our own unique styling that is not tailwind or radix or you name it, styling, you want it to basically customize it.

143
00:27:18,440 --> 00:27:30,680
And that's why I think a lot of designers feel the headwind that they cannot move forward because they cannot get their designs implemented.

144
00:27:30,680 --> 00:27:37,120
So that would be a very good way if there is time, if we can get there, I think that would be fantastic.

145
00:27:37,120 --> 00:27:44,280
Yeah, I will show you this one is something that I think you will have fun.

146
00:27:44,280 --> 00:27:46,760
Let's finish this.

147
00:27:46,760 --> 00:27:55,560
So once you create and select everything, this is the prompt that code guide is generating.

148
00:27:55,560 --> 00:28:10,640
So you now understand your code base, what is the project, how it is organized, which are the, let's say, the last updates that you have, because you can create for each branch that you have on the project.

149
00:28:10,640 --> 00:28:21,600
So it would be also specific. You can see the text stack for the front end, the back end, all the database, the application flow, the API endpoints.

150
00:28:21,600 --> 00:28:31,040
If you're using, in that case, SuperBase, the older structure of the directory, the documentation.

151
00:28:31,040 --> 00:28:37,040
So this is this will be the structure of how the document will be will be on the output.

152
00:28:37,040 --> 00:28:48,360
And then when you generate it, it will create for you all the documentation that you can easily see and import here in Courser.

153
00:28:48,360 --> 00:28:53,680
You can see you have all the rules for this specific project.

154
00:28:53,680 --> 00:28:57,920
You can ask for step implementation. You can ask for a plan.

155
00:28:57,920 --> 00:29:06,920
You can tell to Courser, which is your back end architecture so you can easily follow every time you do a prompt.

156
00:29:06,920 --> 00:29:16,640
You can see it here that is already applied, but you can do it with also front end guideline if you want to be more specific for the front end.

157
00:29:16,640 --> 00:29:30,760
And I will try to use it also for the design system to give exact a specific rule, like describing all the components here and give it to him the reference for the component inside the code base.

158
00:29:30,760 --> 00:29:35,800
And I think that it will be it will. So. OK.

159
00:29:35,800 --> 00:29:48,960
So now he creates this document. With all the specific elements that we give in GitHub and then you can generate everything here.

160
00:29:48,960 --> 00:29:54,200
Once you finish, you can download them and then. Import it here.

161
00:29:54,200 --> 00:30:01,160
So what happened then that I don't know, let's see the 50 step implementation.

162
00:30:01,160 --> 00:30:06,360
OK, I just need to say to Courser and I give to him the context of the file.

163
00:30:06,360 --> 00:30:12,560
Let me change the settings here so I will not answer in Italian.

164
00:30:12,560 --> 00:30:21,000
So he's looking and reading. The plan that we give him, give it to him.

165
00:30:21,000 --> 00:30:25,000
So we will now focus in only on that step.

166
00:30:25,000 --> 00:30:35,320
Now better imagine that you start to scratch a project and you ask to the AI to give it to you specific plan.

167
00:30:35,320 --> 00:30:40,200
OK, let's start with creating the structure of the project.

168
00:30:40,200 --> 00:30:51,040
Let's start organizing in that way. Let's work on the back end and set up these packages or this structure for the database.

169
00:30:51,040 --> 00:30:56,260
And then in that in this way you will always have your plan.

170
00:30:56,260 --> 00:31:10,960
So you are not going, let's say around here and there based on what you feel, but you have exactly at least a plan to follow that you can easily with Gemini update every time your code base change.

171
00:31:10,960 --> 00:31:25,520
Fascinating. I didn't know that I don't use Courser, I use WinServe and maybe WinServe has this as well, but project rules is really a useful future on Courser.

172
00:31:25,520 --> 00:31:30,080
Yes, because in the beginning, Courser only have generic rules.

173
00:31:30,080 --> 00:31:45,600
So you can set up just generic rules for all the project that you are working on. But now with the project rules, you can generate specific rules for specific projects and also languages that you want to use.

174
00:31:45,600 --> 00:31:47,160
Super useful.

175
00:31:47,160 --> 00:31:52,240
So you see this is the result that you will have with code guide.

176
00:31:52,240 --> 00:32:07,000
It will explain exactly what you're in that case, if you import the project, what your application is doing, the core feature, the app flow document with the onboarding main dashboard, and then you have all the features described.

177
00:32:07,000 --> 00:32:22,220
And then once you have these, and once you ask to Courser, giving the context of the rule, you will see a really different result because it will be, let's say he will follow what you basically.

178
00:32:22,220 --> 00:32:44,180
Told him to do when you run have every time to repeat. Because the main part of AI is to write prompt again and again until it's working. That's the basically the secret behind white coding. Of course, the more you white code, the more you learn. And the more you learn.

179
00:32:44,180 --> 00:32:56,660
The more your results will be better on the, on the long run, not only on the experience side, on the security side, on the performance side and so on. Let's see if the app is running.

180
00:32:56,660 --> 00:33:04,860
Your workflow with Versa is completely different from Winserve. So basically you start with your project rules first.

181
00:33:04,860 --> 00:33:07,400
Yes, yes. Sorry.

182
00:33:07,400 --> 00:33:09,140
Wow.

183
00:33:09,140 --> 00:33:24,060
Because so right now I will start with, with the rule first. I'm not saying so this one is born without project rules because there were no project rules in, in cursor before.

184
00:33:24,060 --> 00:33:49,540
But right now my workflow changed because first they set up the rules and I understand the structure of what I want to build. And then I start coding. I can show it to you. This one, that is the app I was talking to you about, you know, this friends that has these application where basically you can.

185
00:33:49,540 --> 00:34:16,420
And, you know, that's done, that's also white code. That's completely made in cursor. Yes. And it's also a progressive web app. So you can save it. I can look to have it. Yes. I have it. I save it into my Mac and I can use it as a real application. And this is completely made in in cursor.

186
00:34:16,420 --> 00:34:24,100
So when you create this React based application, you can basically turn it into a Mac app as well.

187
00:34:24,100 --> 00:34:44,540
You can. Yes, you can turn it. You can generate a DMG file to install it, or you can have a progressive web app that works basically the same. So you don't have to use App Store or Google Play. And you can easily use this because you can use the push notification also.

188
00:34:44,540 --> 00:35:06,980
And and so on. So this one, for example, was born with another workflow. So for this one, for example, I start using v0. It is a tool from Vercel. And basically I say create sign up. I think I should add the account. Yes. OK.

189
00:35:06,980 --> 00:35:32,420
So what I did for this application, I asked v0 to create at least the base of the application. And then from v0, you can easily connect it to cursor and have your code there. So cursor can then start from something that already exists, or you can do the same directly in cursor.

190
00:35:32,420 --> 00:35:53,300
Is there any advantage of starting with v0 first and then move it to cursor? I guess it gives you that starting point faster because Vercel is basically an empty canvas. You have to paint on it. v0 is made to give you one shot effect.

191
00:35:53,300 --> 00:36:15,180
Yes, basically on v0, you have the preview available once the code is being created. While in cursor, you need to launch your project and then go back to the browser and see the result. While with v0, you can easily have everything faster and you can see it easily.

192
00:36:15,180 --> 00:36:35,200
OK, now it's loading. So yes, my workflow changed during time, as I was saying. The more you learn, the more your workflow changes and of course the result you have. So this is the result of v0. I don't know why they have runtime header.

193
00:36:35,200 --> 00:36:51,500
But basically, it starts creating all the layout here and then you have the suggestion. You can add integration, you can add the authentication, you can continue to create functionality. Let's try to fix this. Yeah.

194
00:36:51,500 --> 00:36:54,260
That's really cool. It offers you next steps too.

195
00:36:54,260 --> 00:37:23,660
Yes, yes, exactly. They start giving to you context for the next step. This is something that Rebleed was doing really good, but now a lot of application did the same. Also, Charge GPT is doing it. OK, so this is the result that you have. Of course, you don't have images because they are not connected. Anything, but you can start at least to see that you have a good result. And then from here,

196
00:37:24,560 --> 00:37:27,000
you can start shipping.

197
00:37:27,000 --> 00:37:28,680
Yes, you can download your code.

198
00:37:28,680 --> 00:37:32,040
You can easily connect it to cursor

199
00:37:32,040 --> 00:37:34,100
and then start the development.

200
00:37:34,100 --> 00:37:35,500
Yeah, you can add it to project

201
00:37:35,500 --> 00:37:39,360
or you can continue adding requests.

202
00:37:39,360 --> 00:37:41,160
Let me see which account is this

203
00:37:41,160 --> 00:37:42,980
because I can probably,

204
00:37:42,980 --> 00:37:46,440
you can also import a design from Figma

205
00:37:46,440 --> 00:37:48,880
and then start iterating with this.

206
00:37:48,880 --> 00:37:50,520
How I knew this,

207
00:37:50,520 --> 00:37:51,480
and this is something

208
00:37:51,480 --> 00:37:55,300
I really want to see if it's possible to see it here

209
00:37:55,300 --> 00:37:56,740
as a next guest.

210
00:37:56,740 --> 00:38:00,260
I don't know if you know this guy called Mank2.

211
00:38:00,260 --> 00:38:03,740
He's basically the owner of Design Code.

212
00:38:03,740 --> 00:38:05,620
It's a really cool platform

213
00:38:05,620 --> 00:38:08,200
where you can learn a lot of things.

214
00:38:08,200 --> 00:38:12,620
And I basically learn everything from here.

215
00:38:12,620 --> 00:38:15,680
So this is the course that I made

216
00:38:15,680 --> 00:38:17,920
in order to start live coding,

217
00:38:17,920 --> 00:38:21,120
but you can really learn a lot.

218
00:38:21,120 --> 00:38:25,740
And it would be cool to see as a guest here

219
00:38:25,740 --> 00:38:28,480
in order to collect a lot of secrets

220
00:38:28,480 --> 00:38:33,480
because I really learned almost everything from him.

221
00:38:34,540 --> 00:38:36,300
And it's really active on LinkedIn.

222
00:38:36,300 --> 00:38:41,300
And I think it would be a good call.

223
00:38:41,840 --> 00:38:45,060
Yeah, bumping into his universe just recently.

224
00:38:45,060 --> 00:38:50,060
And this guy is busy, busy, busy.

225
00:38:51,020 --> 00:38:53,860
- It's like, look, this is everything we are seeing

226
00:38:53,860 --> 00:38:54,900
is wipe coded.

227
00:38:54,900 --> 00:38:56,260
I don't know how he did it.

228
00:38:56,260 --> 00:39:00,040
Like, this is really like next level stuff.

229
00:39:01,100 --> 00:39:03,000
- Yes, he did this.

230
00:39:03,940 --> 00:39:07,620
- I don't know if he built a landing page, wipe coded

231
00:39:07,620 --> 00:39:09,940
or using Framer or something.

232
00:39:09,940 --> 00:39:12,760
It feels more like a Framer situation.

233
00:39:12,760 --> 00:39:13,600
- I don't know.

234
00:39:13,600 --> 00:39:16,700
This one, so this website, what is here?

235
00:39:16,700 --> 00:39:19,100
It's something that he has from a long time.

236
00:39:19,100 --> 00:39:23,100
So I don't know if he changed, we can see the stack here,

237
00:39:23,100 --> 00:39:24,700
but I think it's React.

238
00:39:24,700 --> 00:39:27,380
Yes, it's made on React.

239
00:39:27,380 --> 00:39:31,500
He creates like a video editing tool right now

240
00:39:31,500 --> 00:39:32,820
that is really cool.

241
00:39:32,820 --> 00:39:36,700
I don't know if we will be able to find him.

242
00:39:36,700 --> 00:39:40,540
So- - It's called DreamCut.

243
00:39:40,540 --> 00:39:43,120
- Yeah, so let's see.

244
00:39:43,120 --> 00:39:45,340
So no, it's made on React too.

245
00:39:45,340 --> 00:39:47,100
So it's not Framer.

246
00:39:47,100 --> 00:39:52,100
So this is wipe coded, but the cool stuff is this one

247
00:39:53,340 --> 00:39:56,180
is completely wipe coded on Courser.

248
00:39:56,180 --> 00:39:59,320
It's the tool itself that he creates

249
00:39:59,320 --> 00:40:01,580
that is wipe coded in Courser.

250
00:40:01,580 --> 00:40:06,300
And he show his workflow during the course

251
00:40:06,300 --> 00:40:07,660
that I showed you before.

252
00:40:07,660 --> 00:40:10,580
And this is completely made on Courser.

253
00:40:12,060 --> 00:40:16,580
I don't know if like 4,000 prompt or stuff like this.

254
00:40:16,580 --> 00:40:17,600
This is crazy stuff.

255
00:40:17,600 --> 00:40:19,700
Like this is inspiring.

256
00:40:19,700 --> 00:40:23,000
I need to convince him to come on the weekly GM.

257
00:40:24,180 --> 00:40:27,540
- Yeah, you can open a pool

258
00:40:27,540 --> 00:40:31,860
and we can start voting every day.

259
00:40:31,860 --> 00:40:33,480
So at some point they say, okay,

260
00:40:33,480 --> 00:40:37,180
if these guys want to see me, why not?

261
00:40:37,180 --> 00:40:41,500
But yes, this is something really inspiring.

262
00:40:41,500 --> 00:40:45,660
And as I said, I found out everything thanks to him.

263
00:40:45,660 --> 00:40:48,520
So basically, yes, I'm changing again,

264
00:40:48,520 --> 00:40:53,520
my workflow using now Courser rules at the very beginning

265
00:40:54,300 --> 00:40:57,740
instead of going with my feelings and say, okay,

266
00:40:57,740 --> 00:41:00,680
let's start doing this, this and that,

267
00:41:00,680 --> 00:41:04,620
because I really lost a lot of sleeping hours

268
00:41:04,620 --> 00:41:07,020
trying to solving issue.

269
00:41:07,020 --> 00:41:11,540
And now I say, okay, so what's the best UX for me

270
00:41:11,540 --> 00:41:13,820
in order to don't get mad?

271
00:41:13,820 --> 00:41:15,460
Say, okay, setting rules.

272
00:41:15,460 --> 00:41:20,380
So right now I start doing research on how to set rules

273
00:41:20,380 --> 00:41:23,260
and so on how to write them in the proper way,

274
00:41:23,260 --> 00:41:25,260
when exactly to use it or not.

275
00:41:25,260 --> 00:41:30,040
So it's kind of challenging, but I'm really growing a lot.

276
00:41:30,040 --> 00:41:32,260
- Tia, let me show you what I just wrote today.

277
00:41:32,260 --> 00:41:34,420
Like it's so crazy that you brought this one up.

278
00:41:34,420 --> 00:41:35,880
I cannot believe this.

279
00:41:35,880 --> 00:41:36,900
You see my screen?

280
00:41:36,900 --> 00:41:39,600
So I had, you see it?

281
00:41:39,600 --> 00:41:41,140
Which screen you're seeing?

282
00:41:42,140 --> 00:41:45,300
- I think I see mine only.

283
00:41:45,300 --> 00:41:47,700
And I, no, I don't see you.

284
00:41:47,700 --> 00:41:48,620
I don't see your screen.

285
00:41:48,620 --> 00:41:50,280
- Do you guys see my screen?

286
00:41:50,280 --> 00:41:51,780
- Let me stop the sharing.

287
00:41:51,780 --> 00:41:52,780
- Yes.

288
00:41:52,780 --> 00:41:54,900
- So let me give you context.

289
00:41:54,900 --> 00:41:57,180
Last night at 1.30 PM,

290
00:41:57,180 --> 00:42:00,900
I managed finally to create what I wanted.

291
00:42:00,900 --> 00:42:04,440
Then I asked the Winserv, I'm using Winserv,

292
00:42:04,440 --> 00:42:06,200
to push it to GitHub.

293
00:42:07,240 --> 00:42:09,500
Then somehow at the beginning of the project,

294
00:42:09,500 --> 00:42:11,420
I pull it from another GitHub.

295
00:42:11,420 --> 00:42:13,380
I have a project template I use.

296
00:42:13,380 --> 00:42:16,940
He then as we started like, you know, working,

297
00:42:16,940 --> 00:42:19,080
then I pushed it to new GitHub repo,

298
00:42:19,080 --> 00:42:22,380
because that would be for the project I was working.

299
00:42:22,380 --> 00:42:26,700
So imagine at 1.00 PM, I finally was happy with the build.

300
00:42:26,700 --> 00:42:28,640
I was like, we need to GitHub.

301
00:42:28,640 --> 00:42:31,000
It pushed it to the first GitHub repo.

302
00:42:31,860 --> 00:42:32,980
- No way.

303
00:42:32,980 --> 00:42:33,820
So it gives you that.

304
00:42:33,820 --> 00:42:36,460
- And then it mess around with the first GitHub repo,

305
00:42:36,460 --> 00:42:39,100
because that was for the project template.

306
00:42:39,100 --> 00:42:43,160
So it got to a point that I was like,

307
00:42:43,160 --> 00:42:47,620
I cannot work with CloudZone anymore like this and Winserv.

308
00:42:47,620 --> 00:42:49,140
So I created these rules.

309
00:42:49,140 --> 00:42:51,280
First of all, never assume.

310
00:42:51,280 --> 00:42:55,100
Always ask follow-up question before starting any builds.

311
00:42:55,100 --> 00:42:57,500
Make sure you understand the full context of the brief.

312
00:42:57,500 --> 00:43:01,580
Second, never make a comment automatically.

313
00:43:01,580 --> 00:43:04,100
Wait till you're asked to do so.

314
00:43:04,100 --> 00:43:06,520
Never create a branch automatically.

315
00:43:06,520 --> 00:43:10,020
Always ask for confirmation before making changes.

316
00:43:10,020 --> 00:43:13,860
Follow the instructions strictly. For complex build,

317
00:43:13,860 --> 00:43:15,540
break it down into smaller tasks,

318
00:43:15,540 --> 00:43:18,500
and ask for confirmation for each task.

319
00:43:18,500 --> 00:43:21,220
For complex build, write a test that fully tests

320
00:43:21,220 --> 00:43:23,560
the feature we want to build, write the code,

321
00:43:23,560 --> 00:43:24,740
then run the test.

322
00:43:24,740 --> 00:43:27,800
Don't ask me to review the build until all the tests are

323
00:43:27,800 --> 00:43:31,100
passed, continue refining the codes until all the tests are

324
00:43:31,100 --> 00:43:31,940
passed.

325
00:43:31,940 --> 00:43:36,940
Like literally every of this command came from, like,

326
00:43:37,300 --> 00:43:41,620
one of those like all nighter I had to pull because I did

327
00:43:41,620 --> 00:43:45,200
something wrong or did the LLM did something wrong,

328
00:43:45,200 --> 00:43:48,720
especially CloudZone at 3.7 that assumes a lot.

329
00:43:48,720 --> 00:43:52,340
So it's crazy that you showed me your project rules because I

330
00:43:52,340 --> 00:43:55,400
can literally write these rules today because I was like,

331
00:43:55,400 --> 00:43:58,420
there is no way I can continue with this without having

332
00:43:58,420 --> 00:43:59,740
something, something.

333
00:43:59,740 --> 00:44:02,260
- Yes, but let me, let me ask you something.

334
00:44:02,260 --> 00:44:05,980
So it's basically you're using Winserv,

335
00:44:05,980 --> 00:44:10,980
but they run, you know, commit or creating branch and stuff

336
00:44:11,180 --> 00:44:13,740
like this all automatically?

337
00:44:13,740 --> 00:44:16,380
- Oh yeah. It does everything. It's so good.

338
00:44:16,380 --> 00:44:20,540
So it creates commits, I'd run the servers and I just need to

339
00:44:20,540 --> 00:44:23,260
sit back and like ask them what to do.

340
00:44:23,260 --> 00:44:27,340
- Okay. So you don't have to write your commit and then push

341
00:44:27,340 --> 00:44:30,940
and then wait for the build. Okay.

342
00:44:30,940 --> 00:44:32,300
Yeah. In that case.

343
00:44:32,300 --> 00:44:35,760
So I was always scared about this because you can do it also

344
00:44:35,760 --> 00:44:38,780
in cursor with the it's called YOLO mode.

345
00:44:38,780 --> 00:44:42,700
You only live once mode, but I'm not ready.

346
00:44:42,700 --> 00:44:47,700
I'm not ready because I, I never had a rule about it.

347
00:44:49,320 --> 00:44:54,320
And so I said, okay, let me check by myself every time if,

348
00:44:54,340 --> 00:44:59,340
I'm still old school, an old school developer,

349
00:45:00,020 --> 00:45:02,600
where, you know, I do the commit, I write it,

350
00:45:02,600 --> 00:45:05,860
I wait for the production on NetiFly and stuff like this.

351
00:45:07,260 --> 00:45:12,260
But yes, you need to absolutely drive in on what to do

352
00:45:12,420 --> 00:45:16,340
exactly. And the more you are specific on, you know,

353
00:45:16,340 --> 00:45:19,200
how to write the code for the test, how you,

354
00:45:19,200 --> 00:45:22,980
how do you want to him to say to you that this ready and

355
00:45:22,980 --> 00:45:26,560
stuff like this, you need to write rules more and more.

356
00:45:27,740 --> 00:45:30,260
- Yeah, I'm seeing, I'm gravitating to,

357
00:45:30,260 --> 00:45:32,740
I'm trending towards that. So I'm now running the service

358
00:45:32,740 --> 00:45:35,600
myself. I think it's faster. And also like save me on

359
00:45:35,600 --> 00:45:40,220
credits because it's expensive if you want to run

360
00:45:40,220 --> 00:45:42,800
everything. I think at some point I'm going to get to git

361
00:45:42,800 --> 00:45:45,460
commits too, because I want to avoid this kind of

362
00:45:45,460 --> 00:45:48,980
configurations, but you know, I think you are more of a

363
00:45:48,980 --> 00:45:51,460
developer than me. I think we have more experience.

364
00:45:53,220 --> 00:45:58,220
Yeah. I, I don't do it myself because I'm still not clear

365
00:45:58,540 --> 00:46:02,940
with all the git commands. I'm trying to ask Ed to do it

366
00:46:02,940 --> 00:46:06,100
because they know, especially when there is a conflict

367
00:46:06,100 --> 00:46:10,340
between remote and origin and how to resolve it and all that.

368
00:46:10,340 --> 00:46:14,940
You do it. I'm just sit back. I'm just cursing at you.

369
00:46:14,940 --> 00:46:17,660
- Yeah. No, no, no. It's, it's super cool.

370
00:46:17,660 --> 00:46:21,140
I just need to get used to in order to, because you know,

371
00:46:21,140 --> 00:46:25,500
once you learn something new, then it's easier to, you know,

372
00:46:25,500 --> 00:46:28,060
understand and play around here and there.

373
00:46:28,060 --> 00:46:33,060
- And what do you use to build and release the changes that

374
00:46:33,220 --> 00:46:38,220
you make? So once you push on git, what happens, it starts

375
00:46:40,860 --> 00:46:44,940
the release in production automatically or you need-

376
00:46:44,940 --> 00:46:48,060
- I haven't got to it. I think from next week, because I've

377
00:46:48,060 --> 00:46:51,580
been working on multiple projects at the same time.

378
00:46:51,580 --> 00:46:55,340
Now one project is ready to get published. So now I have to

379
00:46:55,340 --> 00:46:58,860
deal with the deployment and what needs to be done.

380
00:46:58,860 --> 00:47:00,900
I don't know. I get to it when I get to it.

381
00:47:00,900 --> 00:47:05,660
- Okay. Because I am using NetiFly. I don't know if you've

382
00:47:05,660 --> 00:47:10,660
heard about it. It's super easy to use. So in that case,

383
00:47:11,020 --> 00:47:15,260
I have two sites. One is for the production environment.

384
00:47:15,260 --> 00:47:18,780
One is for staging. What you can do, you can configure

385
00:47:18,780 --> 00:47:22,420
everything and basically you can say to him, okay,

386
00:47:22,420 --> 00:47:27,420
every time I push something on this branch,

387
00:47:28,700 --> 00:47:33,700
then it start automatically the deploy, but you can also set

388
00:47:33,940 --> 00:47:37,780
up sub branches in order to have sub domain to test your

389
00:47:37,780 --> 00:47:42,940
changes easily. And you can get also performances and the

390
00:47:42,940 --> 00:47:45,780
report on what it could be done properly or not.

391
00:47:45,780 --> 00:47:50,780
Like if this, what you release is, you know, slowing down

392
00:47:52,180 --> 00:47:57,180
the application and how you can improve everything.

393
00:47:57,740 --> 00:48:02,740
And you could see, automatically, let me try to show it to

394
00:48:04,860 --> 00:48:09,860
you like changing. Okay. It's got all of this. I'm going to

395
00:48:10,220 --> 00:48:15,220
get back to this later. Okay. So let me open the...

396
00:48:16,060 --> 00:48:17,900
- Do you want to push for the production right now?

397
00:48:17,900 --> 00:48:21,060
- I also have the staging one. So I create to invite,

398
00:48:21,060 --> 00:48:24,900
and then every time I push on these branch right here,

399
00:48:24,900 --> 00:48:29,900
it goes to staging.promise music. So I don't know. Let's see.

400
00:48:31,460 --> 00:48:34,740
Something that we can do. Okay.

401
00:48:34,740 --> 00:48:36,700
- Which icon library are you using?

402
00:48:39,700 --> 00:48:40,540
- Lucid.

403
00:48:40,540 --> 00:48:42,860
- Lucid. I heard about it. It's really cool.

404
00:48:44,260 --> 00:48:45,820
I haven't used it.

405
00:48:45,820 --> 00:48:50,140
- It's a React icon. So you have icon and it's easy to,

406
00:48:50,140 --> 00:48:54,620
to integrate. So I start using it from the very beginning.

407
00:48:54,620 --> 00:48:59,540
Then for example, this icon right here has been custom made

408
00:48:59,540 --> 00:49:03,380
by one of the guy that create this startup because he's a

409
00:49:03,380 --> 00:49:06,380
designer. So we, we use that,

410
00:49:06,380 --> 00:49:11,020
but we can see here that now he will start using it from

411
00:49:11,020 --> 00:49:13,860
Lucid. Create, play this. In that case,

412
00:49:13,860 --> 00:49:18,860
I'm giving to him exactly which is the component that will

413
00:49:19,900 --> 00:49:21,420
let the user to save.

414
00:49:23,460 --> 00:49:28,220
- You need it. Wouldn't, wouldn't Versa find it themselves?

415
00:49:28,220 --> 00:49:29,820
Or do you want to specify?

416
00:49:29,820 --> 00:49:33,700
- Now Coursor will find it because you know,

417
00:49:33,700 --> 00:49:37,380
3.7 is able to scan all the code base,

418
00:49:37,380 --> 00:49:42,380
but the more you give context, the more you limit him to go.

419
00:49:42,700 --> 00:49:44,780
- That's a really good point. Do you have to build this?

420
00:49:44,780 --> 00:49:46,700
Or is this basically?

421
00:49:46,700 --> 00:49:49,740
- No, no, no, it's something that we are doing.

422
00:49:49,740 --> 00:49:54,260
- Wow. While this is loading here, I would love to get you,

423
00:49:54,260 --> 00:49:57,820
cause your design, your front end is very consistent.

424
00:49:58,820 --> 00:50:01,940
How did you, what did you do to get to that level of

425
00:50:01,940 --> 00:50:05,060
consistency, which is very unbranded, unique.

426
00:50:05,060 --> 00:50:09,500
Did you have to use Figma design system and do some magic

427
00:50:09,500 --> 00:50:10,340
there or?

428
00:50:11,380 --> 00:50:15,500
- No, so I had the Figma design from the designer,

429
00:50:15,500 --> 00:50:19,020
but due to the fact that we're no connection like two or three

430
00:50:19,020 --> 00:50:21,780
months ago between Coursor and Figma,

431
00:50:21,780 --> 00:50:24,660
we start going by a screenshot.

432
00:50:24,660 --> 00:50:29,180
So we start uploading screenshot into Coursor and then asking

433
00:50:29,180 --> 00:50:33,540
him to create components for like, for example,

434
00:50:33,540 --> 00:50:36,380
for all the layout in that case,

435
00:50:36,380 --> 00:50:41,020
or UI components like the alert, the badge, the button,

436
00:50:41,020 --> 00:50:43,100
the dialogue. So you start creating.

437
00:50:43,100 --> 00:50:44,860
It's like in, in, in Figma,

438
00:50:44,860 --> 00:50:46,740
you start creating smaller component,

439
00:50:46,740 --> 00:50:51,140
like the UI component, and then you start bringing in one

440
00:50:51,140 --> 00:50:55,580
another in order to build bigger components.

441
00:50:55,580 --> 00:51:00,180
But again, when you start building a big component,

442
00:51:00,180 --> 00:51:05,180
you need to write on the prompt and tag exactly and say,

443
00:51:05,500 --> 00:51:09,820
okay, I want to use this card and then I want to use the

444
00:51:09,820 --> 00:51:10,660
progress.

445
00:51:10,660 --> 00:51:13,780
And then I want to use this component right here.

446
00:51:13,780 --> 00:51:16,540
So it's like building it in Figma.

447
00:51:16,540 --> 00:51:20,220
That's why I was saying to you at the very beginning,

448
00:51:20,220 --> 00:51:25,220
the process that we have when we design is the same here,

449
00:51:25,580 --> 00:51:29,740
but we are seeing it in a, in a different way.

450
00:51:29,740 --> 00:51:32,300
Cause you see you have the top bar, you have the side bar,

451
00:51:32,300 --> 00:51:35,940
you have the layout. So it's different for the model.

452
00:51:35,940 --> 00:51:38,540
So it's like working on Figma,

453
00:51:38,540 --> 00:51:43,060
but seeing it as a, as a list of folder and file.

454
00:51:43,060 --> 00:51:47,060
So basically text UI components, the UI part,

455
00:51:47,060 --> 00:51:51,220
and put it in the models and the models in layouts.

456
00:51:51,220 --> 00:51:55,620
- Yes, exactly. You, or you can leave it as a component for

457
00:51:55,620 --> 00:51:58,860
the part or you have, yes,

458
00:51:58,860 --> 00:52:03,020
exactly. All the form create playlist form, edit profile,

459
00:52:03,020 --> 00:52:03,940
upload form.

460
00:52:03,940 --> 00:52:08,700
So yes, it's like working on,

461
00:52:08,700 --> 00:52:11,340
see if I have any answers here.

462
00:52:11,340 --> 00:52:16,340
- Are you using a specific, or, like, authentication?

463
00:52:16,500 --> 00:52:21,060
That pass for characters,

464
00:52:21,060 --> 00:52:23,940
but the check mark that you showed,

465
00:52:23,940 --> 00:52:25,820
that was really cool.

466
00:52:25,820 --> 00:52:29,280
- Which one? This one. I just ask Courser to do it.

467
00:52:29,280 --> 00:52:30,120
- Yeah.

468
00:52:30,120 --> 00:52:34,780
- So he follow the style and I say I want to do,

469
00:52:34,780 --> 00:52:38,020
to see step validation for the password.

470
00:52:38,020 --> 00:52:42,280
I think that this is a cool, I say to him,

471
00:52:42,280 --> 00:52:46,060
improvement for the user. So then he had it.

472
00:52:47,320 --> 00:52:51,260
Easy there. So let me see. Okay.

473
00:52:51,260 --> 00:52:54,460
So now I have the playlist page here.

474
00:52:55,420 --> 00:52:58,820
And as you see, now I have the first error.

475
00:52:58,820 --> 00:53:02,940
So usually what I do is to just take a screenshot,

476
00:53:02,940 --> 00:53:07,300
put it here. Sometimes you see it didn't finish,

477
00:53:07,300 --> 00:53:09,640
but you have any type of notification.

478
00:53:09,640 --> 00:53:11,700
So you need to stay here.

479
00:53:11,700 --> 00:53:15,740
I don't know if Windsor sends you some kind of notification

480
00:53:15,740 --> 00:53:18,300
like a I finished to do that.

481
00:53:18,300 --> 00:53:21,940
- No. Same. Same. And I do that often.

482
00:53:23,480 --> 00:53:27,620
Load and look at the build and like a pissed off and saying

483
00:53:27,620 --> 00:53:28,860
that it's still working.

484
00:53:28,860 --> 00:53:29,700
- Okay.

485
00:53:29,700 --> 00:53:31,580
- And right now, so we say like,

486
00:53:31,580 --> 00:53:33,100
when you started working on this,

487
00:53:33,100 --> 00:53:35,980
you had to basically screenshot your way into building

488
00:53:35,980 --> 00:53:39,780
components and UI stuff. Is there robust?

489
00:53:40,700 --> 00:53:45,700
I used a builder that I owe recently to give it a try.

490
00:53:46,940 --> 00:53:48,900
- And how it was?

491
00:53:48,900 --> 00:53:53,860
- It's, it was good. I think the build was successful,

492
00:53:53,860 --> 00:53:58,380
but I think, I think now looking at it,

493
00:53:58,380 --> 00:54:00,980
that was looking at your file structure.

494
00:54:00,980 --> 00:54:04,360
I wanted to go from,

495
00:54:04,360 --> 00:54:07,500
I wanted to build me the layout right away,

496
00:54:07,500 --> 00:54:12,100
but I should have used builder.io to build a smaller UI

497
00:54:12,100 --> 00:54:17,100
components for me and then use that to build the bigger ones.

498
00:54:17,760 --> 00:54:19,300
I think that was my mistake.

499
00:54:19,300 --> 00:54:22,100
And also for that specific project,

500
00:54:22,100 --> 00:54:27,100
I started the front end first and I wanted to find my way

501
00:54:27,420 --> 00:54:31,120
back to the, you know, the gravy mistake maybe.

502
00:54:31,120 --> 00:54:33,860
But now what I'm doing right now,

503
00:54:33,860 --> 00:54:38,100
I think the new workflow that I find is that first I define

504
00:54:38,100 --> 00:54:42,220
my database, what I want, I think that's needed.

505
00:54:42,220 --> 00:54:43,060
- Yes.

506
00:54:43,060 --> 00:54:47,040
- And then I figured out all of my initial authentication.

507
00:54:47,040 --> 00:54:49,380
So everything that I'm working on is behind that,

508
00:54:49,380 --> 00:54:50,620
basically sign a wall.

509
00:54:51,660 --> 00:54:56,660
And then, then I start wanting to found it.

510
00:54:56,860 --> 00:54:59,600
Mental health is really important when you wipe coding.

511
00:55:00,500 --> 00:55:02,780
I really, seriously, I think both of us,

512
00:55:02,780 --> 00:55:04,260
we know what we're talking about.

513
00:55:04,260 --> 00:55:06,400
So now I'm like, okay,

514
00:55:06,400 --> 00:55:10,740
you start with the typical tailwind Radix components,

515
00:55:10,740 --> 00:55:14,300
because it's really good using those, right?

516
00:55:14,300 --> 00:55:15,680
Build the front end for me.

517
00:55:15,680 --> 00:55:19,080
Let's get to the finish line that I have everything I need.

518
00:55:19,080 --> 00:55:22,260
Then I do the front end as last step.

519
00:55:22,260 --> 00:55:24,900
So even if I don't have a front end,

520
00:55:24,900 --> 00:55:26,340
I have a working application.

521
00:55:27,380 --> 00:55:28,700
- Okay. What is zoom?

522
00:55:28,700 --> 00:55:29,620
Okay, here.

523
00:55:29,620 --> 00:55:30,840
Okay, now I can see you.

524
00:55:32,100 --> 00:55:37,100
- Yes, I mean, it's common to, you know, that's the point.

525
00:55:38,580 --> 00:55:42,420
The front end side is the visible one.

526
00:55:42,420 --> 00:55:46,900
You can see easily if something is working or not,

527
00:55:46,900 --> 00:55:50,020
but then you need to go back and set up your structure.

528
00:55:50,020 --> 00:55:52,820
So, you need to know which data do you need?

529
00:55:52,820 --> 00:55:57,460
How they at least need to interact within one another?

530
00:55:57,460 --> 00:55:58,860
Because once you create,

531
00:55:58,860 --> 00:56:02,280
if you create the database relation first,

532
00:56:02,280 --> 00:56:05,900
you can easily visualize the page

533
00:56:05,900 --> 00:56:10,900
that will do that part in your mind.

534
00:56:10,940 --> 00:56:12,860
So this is the, for example,

535
00:56:12,860 --> 00:56:16,420
we have for this project two different database.

536
00:56:16,420 --> 00:56:20,100
We have the staging one and we have the production one,

537
00:56:20,100 --> 00:56:22,840
but the first thing I made was this.

538
00:56:23,700 --> 00:56:28,700
Start creating all the tables in the database.

539
00:56:29,220 --> 00:56:32,640
All the relation between one another.

540
00:56:32,640 --> 00:56:37,640
And only after that, I start building the front end side.

541
00:56:38,060 --> 00:56:40,180
- Authentication is there too?

542
00:56:40,180 --> 00:56:43,740
- Yes, this is managed by SuperBase.

543
00:56:45,860 --> 00:56:50,620
I can now create what could still give to me for the place.

544
00:56:50,620 --> 00:56:52,700
Okay. So it's successful.

545
00:56:52,700 --> 00:56:56,060
We should have, yes, playlist.

546
00:56:56,060 --> 00:56:57,360
That's the new table.

547
00:56:58,180 --> 00:57:01,420
- Create. So now let's see.

548
00:57:01,420 --> 00:57:04,520
- Let's see we can end this session with a successful build.

549
00:57:04,520 --> 00:57:07,800
Ladies and gentlemen, the moment has arrived,

550
00:57:07,800 --> 00:57:11,200
we are now going to witness a successful build

551
00:57:11,200 --> 00:57:15,000
out of Versal, no, Cursor, not Versal.

552
00:57:15,000 --> 00:57:20,000
SuperBase orchestrated by the one and only TIA.

553
00:57:20,960 --> 00:57:22,960
Let's see if we can push this application

554
00:57:22,960 --> 00:57:26,000
to the new horizon of experiences.

555
00:57:26,000 --> 00:57:26,840
- Yes.

556
00:57:26,840 --> 00:57:28,140
- And get this made by DeCereber.

557
00:57:28,140 --> 00:57:30,180
I think we're going to pass this.

558
00:57:30,180 --> 00:57:33,480
I always want to end this weekly jam session

559
00:57:33,480 --> 00:57:34,700
with a successful build.

560
00:57:34,700 --> 00:57:36,120
Never was successful.

561
00:57:36,120 --> 00:57:38,640
So hopefully you can break this curse.

562
00:57:38,640 --> 00:57:39,760
- Let's see, let's see.

563
00:57:39,760 --> 00:57:40,600
We will do it.

564
00:57:40,600 --> 00:57:41,720
- I think one of the frustrations,

565
00:57:41,720 --> 00:57:43,720
while you're trying to figure this one out,

566
00:57:43,720 --> 00:57:45,720
that a lot of non-technical,

567
00:57:45,720 --> 00:57:48,240
especially designers have with wipe coding,

568
00:57:48,240 --> 00:57:51,960
is that when you lock in your Figma file

569
00:57:51,960 --> 00:57:54,560
and get into that lovely state of flow

570
00:57:54,560 --> 00:57:57,120
that we are all familiar with,

571
00:57:57,120 --> 00:58:00,160
everything moves smoothly.

572
00:58:00,160 --> 00:58:02,440
You have full control because you are the ones

573
00:58:02,440 --> 00:58:04,040
who are making decisions.

574
00:58:04,040 --> 00:58:07,360
But it's a different experience with wipe coding.

575
00:58:07,360 --> 00:58:12,360
You get a lot of pushbacks for like sometimes hours on and on

576
00:58:13,880 --> 00:58:15,860
till you get to that like, you know,

577
00:58:15,860 --> 00:58:20,300
final build that you feel like is stable.

578
00:58:20,300 --> 00:58:23,260
So I think that's a big bottleneck.

579
00:58:23,260 --> 00:58:26,620
And I found that personally, the bottleneck.

580
00:58:26,620 --> 00:58:30,140
It took me a long while to start enjoying wipe coding.

581
00:58:31,120 --> 00:58:34,260
- Yes, yes, absolutely. Yes, absolutely. Yes.

582
00:58:34,260 --> 00:58:38,740
It's really a new field for people,

583
00:58:38,740 --> 00:58:42,120
especially for designer, because it's completely different.

584
00:58:42,120 --> 00:58:46,720
I spent one night during the development of this project,

585
00:58:46,720 --> 00:58:50,360
literally one night because I was using a comma

586
00:58:50,360 --> 00:58:53,160
instead of a semicolon in a file.

587
00:58:53,160 --> 00:58:56,920
And this was completely crazy because I was asking to Courser

588
00:58:56,920 --> 00:59:00,480
and then Courser was changing again and again,

589
00:59:00,480 --> 00:59:03,220
the layout, the logic.

590
00:59:03,220 --> 00:59:07,800
So for a comma, I spent the night to solve

591
00:59:07,800 --> 00:59:11,760
and to bring back all the logic that I had before

592
00:59:11,760 --> 00:59:14,840
because it was not working.

593
00:59:14,840 --> 00:59:18,600
So let's see if right now we will have this

594
00:59:21,480 --> 00:59:25,480
successful build or not.

595
00:59:25,480 --> 00:59:26,880
Is that console error?

596
00:59:26,880 --> 00:59:29,800
- Okay. I think we're a bit past beyond time.

597
00:59:29,800 --> 00:59:32,000
Let's see. I really want to see it.

598
00:59:32,000 --> 00:59:36,100
- And for the Figma part, I found out this,

599
00:59:36,100 --> 00:59:39,980
I'm testing this, Verad, this core superflex.

600
00:59:39,980 --> 00:59:41,880
- Let me get it done.

601
00:59:41,880 --> 00:59:46,880
- Where basically you just copy your link section inside.

602
00:59:49,920 --> 00:59:51,540
In that case, who has code.

603
00:59:52,360 --> 00:59:53,800
- Hi, we're building super.

604
00:59:53,800 --> 00:59:56,040
- So you basically copy these here

605
00:59:56,040 --> 00:59:59,480
and then it starts creating all the components.

606
00:59:59,480 --> 01:00:02,520
- What is this? Is it Courser?

607
01:00:02,520 --> 01:00:06,520
- This one, I think is who has code probably. I don't know.

608
01:00:06,520 --> 01:00:08,960
- Wow, this is crazy.

609
01:00:08,960 --> 01:00:11,760
- And then you can see the preview.

610
01:00:11,760 --> 01:00:15,940
Just thinking your Figma. - What? You don't believe this?

611
01:00:15,940 --> 01:00:19,000
No, no, I don't. I gotta use it now.

612
01:00:19,980 --> 01:00:22,320
- Sorry. My God. This is so...

613
01:00:22,320 --> 01:00:25,240
- They develop and this is the UI.

614
01:00:26,600 --> 01:00:27,440
- Oh my God.

615
01:00:27,440 --> 01:00:29,900
- Yes. This is something that interesting.

616
01:00:29,900 --> 01:00:33,480
You see, you utilize your existing UI component,

617
01:00:33,480 --> 01:00:38,480
adapts to your coding style and you have the free plan also.

618
01:00:39,160 --> 01:00:41,160
- Yeah. I'm gonna give this a try.

619
01:00:41,160 --> 01:00:42,700
- You can test it easily.

620
01:00:44,080 --> 01:00:48,520
So let's see if it's working or not.

621
01:00:48,520 --> 01:00:51,400
Let me know if you feel confident I can start a drum roll.

622
01:00:51,400 --> 01:00:53,780
- I'm not here for the code.

623
01:00:53,780 --> 01:00:57,600
- Okay. All right. No pressure. Don't pressure build it.

624
01:00:57,600 --> 01:01:02,600
- Not at all. But yeah, this is something that can...

625
01:01:02,760 --> 01:01:06,640
- Yeah. I mean, that's fine. I learned a lot today.

626
01:01:06,640 --> 01:01:10,280
I don't know about you guys, but that was very insightful.

627
01:01:10,280 --> 01:01:14,680
Thanks Tia for being so open and transparent,

628
01:01:14,680 --> 01:01:16,360
open sourcing your builds.

629
01:01:18,040 --> 01:01:21,920
I really appreciate it to be honest. I really do. It's for free.

630
01:01:21,920 --> 01:01:24,300
It's a lot. Thank you a lot. Get it right.

631
01:01:24,300 --> 01:01:25,140
- Nope.

632
01:01:25,140 --> 01:01:27,800
- No. Okay. Tia, thanks a lot.

633
01:01:27,800 --> 01:01:31,140
- Thanks to you guys for your support.

634
01:01:31,140 --> 01:01:34,020
- It's been very insightful. If you allow me,

635
01:01:34,020 --> 01:01:38,020
I want to publish it on our podcast and YouTube too.

636
01:01:38,020 --> 01:01:40,900
I hope. I didn't see any sensitive information.

637
01:01:40,900 --> 01:01:43,360
Open invitation, you can always come back.

638
01:01:43,360 --> 01:01:47,120
'Cause it's basically, you know, it's not a presentation style.

639
01:01:47,120 --> 01:01:50,440
This is just like us, my coding. Please come back.

640
01:01:50,440 --> 01:01:53,080
You know, you're next. You let me know.

641
01:01:53,080 --> 01:01:54,920
- Yeah, actually I have time next Tuesday.

642
01:01:54,920 --> 01:01:57,080
Same time next Tuesday, I can do it.

643
01:01:57,080 --> 01:02:00,220
- Fantastic. I'll reach out to you on LinkedIn.

644
01:02:00,220 --> 01:02:01,060
- Okay. Perfect.

645
01:02:01,060 --> 01:02:04,440
- I love that. Love that man. I think this is really good stuff.

646
01:02:04,440 --> 01:02:07,900
I learned tons. I'm going to make a summary of what I learned,

647
01:02:07,900 --> 01:02:11,640
but now I know that I have to make my UI components first,

648
01:02:11,640 --> 01:02:13,980
smaller one, not starting with the layout.

649
01:02:13,980 --> 01:02:18,760
I think that really stopped me from progressing in front of the way I wanted.

650
01:02:18,760 --> 01:02:22,920
And... Netlify.

651
01:02:22,920 --> 01:02:29,800
- Yeah, you really, yes. Don't lose your designer approach on stuff,

652
01:02:29,800 --> 01:02:36,820
because it's the same that engineer using, use when we give to them,

653
01:02:36,820 --> 01:02:42,500
you know, our creation. I think it's working. So let's try.

654
01:02:42,500 --> 01:02:48,340
- We finally going to end the first session with a successful build.

655
01:02:48,340 --> 01:02:50,680
- This is the playlist part. Let's see.

656
01:02:50,680 --> 01:02:53,000
- I've seen that there are. - I know.

657
01:02:53,000 --> 01:02:58,880
- I know. It's infinite refresh. I know that is typical next year stuff.

658
01:02:58,880 --> 01:03:06,360
- Yes, exactly. It's exactly what basically Courser said,

659
01:03:06,360 --> 01:03:12,000
but just to give it to you, just this last part. So once...

660
01:03:12,000 --> 01:03:16,120
- Yeah. - ...you commit and push, and then you go here,

661
01:03:16,120 --> 01:03:19,660
you will automatically-- what is it? Staging? Yes.

662
01:03:19,660 --> 01:03:25,080
You will start seeing here all the-- let me see. You see?

663
01:03:25,080 --> 01:03:30,200
Now it automatically start the release. And then in usually one minute

664
01:03:30,200 --> 01:03:35,160
and 29 second you have introduction or the staging. You see now it's building.

665
01:03:35,160 --> 01:03:41,060
And then you will see everything on the new environment. Of course, now it's--

666
01:03:41,820 --> 01:03:48,300
super flashing, refreshing and so on. But that's the cool part.

667
01:03:48,300 --> 01:03:52,560
You just write the commit, you push, and then you don't have to do nothing,

668
01:03:52,560 --> 01:03:57,060
because then NetiFly will take care of everything. So it's really super fast

669
01:03:57,060 --> 01:04:00,780
to test in real time everything and not in the local host.

670
01:04:00,780 --> 01:04:04,900
- Do you want to see something crazy, you know? Let's stay here.

671
01:04:04,900 --> 01:04:10,840
- Mm-hmm. Sure. - It's not crazy, but it's a really cool hack.

672
01:04:10,840 --> 01:04:24,220
So let me share the screen. So you send me a photo. Just a second. Let me see.

673
01:04:24,220 --> 01:04:31,680
It's so cool. I'm doing it for everyone. I've done it for my father. This one.

674
01:04:31,680 --> 01:04:35,420
- Well, we break the curse. It's working. It's really working.

675
01:04:35,420 --> 01:04:42,460
- Hold on. Hold on. Let me do this and use. Let's see if it does it. Usually does.

676
01:04:42,460 --> 01:04:45,140
- I mean, if it's nice, I'll use it for my official LinkedIn.

677
01:04:45,140 --> 01:04:51,880
- Yeah. I mean, I generated tiers like this too. Yeah, I did not have any complaints,

678
01:04:51,880 --> 01:05:00,140
so it just, you know, it does a really good job. This was this gentleman and this was the photo.

679
01:05:00,140 --> 01:05:04,580
- No. - No, I think it's loaded. Don't freak out.

680
01:05:04,580 --> 01:05:08,900
- Wait a minute. - No, no, no. Hold on a second. Hold on a second.

681
01:05:08,900 --> 01:05:15,920
It's going to get it right. It's creating an image, because it's basically a very big credit menu.

682
01:05:15,920 --> 01:05:19,960
So it's just loading. Do you want to show yours? See if this one loads?

683
01:05:19,960 --> 01:05:22,220
- I closed everything. - Okay. That's fine. That's fine.

684
01:05:22,220 --> 01:05:27,660
So let's end this with this. I don't know if it's going to do it, but don't let me down.

685
01:05:27,660 --> 01:05:31,900
Don't let me down. - Yeah, by the way, these sessions are good for anyone, right?

686
01:05:31,900 --> 01:05:34,920
- I have some people - There you go. Not bad.

687
01:05:34,920 --> 01:05:41,700
- You know who you look like. - Not bad. That's how I mean, it's not 101.

688
01:05:41,700 --> 01:05:45,340
But, you know, the position is like that. Really difficult to...

689
01:05:45,340 --> 01:05:51,720
- Yeah, put it on my Tinder profile. - I'll give you a second. I'm having so much fun with this.

690
01:05:51,720 --> 01:06:01,820
- I'm going to catfish this girl somehow. - You know, the first app I'm building and I'm releasing next week, you know, what is it?

691
01:06:01,820 --> 01:06:10,300
- What is it? - It's a prompt saver. You know, you store a lot of prompts. I don't know how you store things.

692
01:06:10,300 --> 01:06:19,660
- I'm just going crazy. - Me too. - Because I have a note here and here. So I'm creating a Next.js to... It's a basically simple table.

693
01:06:19,660 --> 01:06:28,780
You store all of your prompts, organize them in folders and categories, in tags. And then I'm building a Mac OS to always be the shortcut.

694
01:06:28,780 --> 01:06:39,420
You can search through prompts and just copy and paste them. - Nice. Are you publishing? - Yeah, first 100 users is for free lifetime deal.

695
01:06:39,420 --> 01:06:47,700
- So, as soon as you announce it, I think if you guys want it, you are going to be the first two users. - Yeah. There's no... - I wait.

696
01:06:47,700 --> 01:06:56,720
- Yeah, but no, like don't show your code me. Is it a good idea or not? - I think so. That's just case. Good use case.

697
01:06:56,720 --> 01:07:14,520
Yes. I mean, you can test it easily because a lot of people are having this issue. I see a Notion file here, Notion file there, and it's kind of crazy because you get lost every time.

698
01:07:14,520 --> 01:07:26,700
I think that also if you want to cut it from YouTube and you want to keep it for yourself, you can try to test and use MCP also to make things.

699
01:07:26,700 --> 01:07:41,740
Prompt container more intelligent during the time because then, I don't know, you can organize prompt in a certain way, you can improve them more and more using memory and MCP. So.

700
01:07:41,740 --> 01:07:52,340
- Many cool ideas for it. I think just getting the MVP out, I just wanted to put table that I can store things. But MCP is really... - Are you?

701
01:07:52,340 --> 01:08:03,580
I mean, you know what I'm using MCP for? I'm using MCP to create an ATM automation for me, and I'm not touching anything. - Really?

702
01:08:03,580 --> 01:08:13,540
Yeah. The first, like it gives me the first, then I have to fine tune it myself, but the first... - Almost complete.

703
01:08:13,540 --> 01:08:26,500
It's almost there. You just need to fine tune it, but it writes all the codes that needed, just the integration authentication you have to insert it, but use the MCP, use the NITEM MCP. Really.

704
01:08:26,500 --> 01:08:32,060
Like it connects to your cursor too. It's really good. It's really powerful.

705
01:08:32,060 --> 01:08:43,460
Great. Great. This part of MCP is getting really crazy. I saw one. Do you remember the guy that was working with me and Yunho in WeFoxMohamed? That was...

706
01:08:43,460 --> 01:08:57,500
Basically, someone on X released the MCP for Blender, where you can write natural language and create 3D. And they use his design, his creation to...

707
01:08:57,500 --> 01:09:08,100
I don't know if to train, but to show up, the example and so on. And the result is completely crazy. And if you're able to connect it with 3JS, could be...

708
01:09:08,100 --> 01:09:15,420
Really fun game changer. 3JS is so fun. I did this for our contact us page.

709
01:09:15,420 --> 01:09:24,100
The thing is that we have so many things to test that it can... You did this with 3JS?

710
01:09:24,100 --> 01:09:30,180
3JS and Gemini 2.5. Gemini 2.5 is so good, the creative stuff.

711
01:09:30,180 --> 01:09:31,540
I never tested.

712
01:09:31,540 --> 01:09:45,940
It's so good. You give it a try. So I was very bored of our contact us page. I was like, let me just do something really cool. So whenever I don't want to look at anything else, I just open our contact us page and let this thing rotate.

713
01:09:45,940 --> 01:09:53,940
So I just play around with the edges and it just evolved because it's rotating. And yeah, that's our contact us.

714
01:09:53,940 --> 01:09:59,460
That's great. Did you ever try also Spline as a tool?

715
01:09:59,460 --> 01:10:06,580
We use Spline for building a project for clients. Yeah, the really good stuff.

716
01:10:06,580 --> 01:10:12,460
Did you ever see this? This is a guy that... this is made entirely in 3JS.

717
01:10:12,460 --> 01:10:17,980
Crazy. My God. You know, you see this? Absolutely nuts.

718
01:10:17,980 --> 01:10:19,700
Yeah, that is wild.

719
01:10:19,700 --> 01:10:20,500
Yeah, that's wild.

720
01:10:20,500 --> 01:10:28,020
And you have a... here on awards. I don't know if I can find one, probably one of my favorites.

721
01:10:28,020 --> 01:10:31,220
How did he do this?

722
01:10:31,220 --> 01:10:44,580
Well, you need to... No, no, absolutely not. But you can create it on Blender and bring it into 3JS. Come on. Can I see this one?

723
01:10:44,580 --> 01:10:48,420
You can create really immersive experience.

724
01:10:48,420 --> 01:10:55,460
MCB with Blender is really good at creating environment. That's something that I know for a fact.

725
01:10:55,460 --> 01:11:05,060
I don't know. It's good for characters, environment, the backgrounds, really good.

726
01:11:05,060 --> 01:11:11,420
Alright guys, I think that's enough. I'm feeling I need to get back to white coding. Thanks a lot, both of you.

727
01:11:11,420 --> 01:11:19,220
And whenever you want, we can connect to LinkedIn if you have any question or whatever, change feedback and so on.

728
01:11:19,220 --> 01:11:26,500
Come back on Tuesdays. It's like, you know, us close whenever you feel like it.

729
01:11:26,500 --> 01:11:27,780
Bye bye.

730
01:11:27,780 --> 01:11:30,460
Thank you for listening to UX for AI.

731
01:11:30,460 --> 01:11:39,580
Join us next week for more insightful conversations about the impact of artificial intelligence in development, design and user experience.

732
01:11:39,580 --> 01:11:41,640
you