UX for AI
Hosted by Behrad Mirafshar, CEO of Bonanza Studios, Germany’s Premier
Product Innovation Studio, UX for AI is the podcast that explores the intersection of cutting-edge artificial intelligence and pioneering user experiences. Each episode features candid conversations with the trailblazers shaping AI’s application layer—professionals building novel interfaces, interactions, and breakthroughs that are transforming our digital world.
We’re here for CEOs and executives seeking to reimagine business models and create breakthrough experiences, product leaders wanting to stay ahead of AI-driven product innovation, and UX designers at the forefront of shaping impactful, human-centered AI solutions. Dive into real-world case studies, uncover design best practices, and learn how to marry innovative engineering with inspired design to make AI truly accessible—and transformative—for everyone. Tune in and join us on the journey to the future of AI-driven experiences!
UX for AI
Shorts: App Launcher Boilerplate: Workflow That Changed Everything
What if vibe coding actually felt good?
In this episode, we break down the vibe coding workflow: a mindset that centers creative energy and flow over complexity and rigid setups.
If you’ve ever felt stuck, overwhelmed, or like your tools are in control, this one’s for you.
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/
1
00:00:00,000 --> 00:00:02,480
[MUSIC]
2
00:00:02,480 --> 00:00:04,880
>> Welcome to UX for AI.
3
00:00:04,880 --> 00:00:06,860
>> For the past months,
4
00:00:06,860 --> 00:00:09,040
I've been in the trenches working on
5
00:00:09,040 --> 00:00:13,400
several projects building modern web applications.
6
00:00:13,400 --> 00:00:15,000
Whenever I started a project,
7
00:00:15,000 --> 00:00:17,640
everything was good, heavenly feeling.
8
00:00:17,640 --> 00:00:20,240
But as soon as I wanted to complicate the build,
9
00:00:20,240 --> 00:00:26,000
then I bumped into lots of problems, challenges, confusion.
10
00:00:26,000 --> 00:00:30,800
Always blame the LLM, in this case, Claude Sonnet 3.7.
11
00:00:30,800 --> 00:00:33,200
But I realized I need to take accountability.
12
00:00:33,200 --> 00:00:36,440
Something is wrong with my setup.
13
00:00:36,440 --> 00:00:40,520
I had Adam Perlis on the weekly jam session,
14
00:00:40,520 --> 00:00:43,720
which happened every Tuesday by the way you should join,
15
00:00:43,720 --> 00:00:46,840
and he showed his work environment.
16
00:00:46,840 --> 00:00:50,820
He would set up his React-based framework,
17
00:00:50,820 --> 00:00:55,880
then database, then a way to connect the database to the app.
18
00:00:55,880 --> 00:00:58,400
In this case, Prisma, authentication,
19
00:00:58,400 --> 00:01:00,920
AI integration, CSS library,
20
00:01:00,920 --> 00:01:04,000
and all the components he needs to build a frontend.
21
00:01:04,000 --> 00:01:07,120
He wouldn't start a project before he set up this.
22
00:01:07,120 --> 00:01:08,960
That was a big moment for me.
23
00:01:08,960 --> 00:01:13,480
I do not do this, I haven't done this.
24
00:01:13,480 --> 00:01:18,000
Since last week, I set up this project environment.
25
00:01:18,000 --> 00:01:22,560
It's in a GitHub repository and I started working on one project.
26
00:01:22,560 --> 00:01:27,040
Believe me, in seven hours, I finished that build,
27
00:01:27,040 --> 00:01:29,320
that web application is ready.
28
00:01:29,320 --> 00:01:34,460
But today's video is about this GitHub repository.
29
00:01:34,460 --> 00:01:37,480
Now, let's start pulling from the GitHub repo,
30
00:01:37,480 --> 00:01:39,320
adding it to the local folder,
31
00:01:39,320 --> 00:01:42,400
and start building your next billion-dollar ideal.
32
00:01:42,400 --> 00:01:44,560
How about that? I think sounds really good.
33
00:01:44,560 --> 00:01:46,560
So before doing so,
34
00:01:46,560 --> 00:01:49,120
you need a coding environment that you can use Cursr,
35
00:01:49,120 --> 00:01:50,920
Winsr, anything else.
36
00:01:50,920 --> 00:01:53,420
All of them are the same, more or less. I don't know.
37
00:01:53,420 --> 00:01:55,260
I use Winsr. I'm happy with it.
38
00:01:55,260 --> 00:02:01,140
It helps me to execute a complex set of actions, so I'm using it.
39
00:02:01,140 --> 00:02:06,420
The way we start is that you first grab this one here and ask.
40
00:02:06,420 --> 00:02:08,800
In the empty folder, as you can see,
41
00:02:08,800 --> 00:02:11,260
you need to create it and then open it.
42
00:02:11,260 --> 00:02:12,840
These are the things you need to figure out.
43
00:02:12,840 --> 00:02:15,640
I cannot really show you, but in the empty folder,
44
00:02:15,640 --> 00:02:18,240
say that, let me see first.
45
00:02:18,240 --> 00:02:22,400
Read the readme in the file of this repo,
46
00:02:22,400 --> 00:02:26,240
then pull the repo in my local file.
47
00:02:26,240 --> 00:02:29,580
Always give it a path, really important.
48
00:02:29,580 --> 00:02:34,060
Right now, let me just quickly grab the path here.
49
00:02:34,060 --> 00:02:35,880
So let's see what it does.
50
00:02:35,880 --> 00:02:38,820
It's good that you ask the LM to read
51
00:02:38,820 --> 00:02:42,720
the readme file of any GitHub repo that you want to pull first.
52
00:02:42,720 --> 00:02:44,900
Really important, because without that,
53
00:02:44,900 --> 00:02:47,900
they start doing stuff, then you have to undo it.
54
00:02:47,900 --> 00:02:49,020
You don't want drama.
55
00:02:49,020 --> 00:02:52,400
When you're white coding, you want to minimize drama.
56
00:02:52,400 --> 00:02:55,480
It's very important. Analyzing it, great.
57
00:02:55,480 --> 00:02:57,780
I'm feeling good when it analyzes.
58
00:02:57,780 --> 00:03:01,740
It says analyzing content, yeah, authentication, great.
59
00:03:01,740 --> 00:03:07,760
It's pulling. I use this project template literally for my next build,
60
00:03:07,760 --> 00:03:10,380
and it took me seven hours to finish it.
61
00:03:10,380 --> 00:03:16,800
That would have taken me days if I ever were to become successful, right?
62
00:03:16,800 --> 00:03:19,500
These project templates must be out there.
63
00:03:19,500 --> 00:03:25,340
They must be, I'm a non-coder tapping into white coding,
64
00:03:25,340 --> 00:03:27,720
and realize quickly after a few months,
65
00:03:27,720 --> 00:03:29,440
I need a setup like this.
66
00:03:29,440 --> 00:03:34,160
Coders, probably they have thought about this thoroughly, right?
67
00:03:34,160 --> 00:03:36,100
But this setup right there,
68
00:03:36,100 --> 00:03:41,260
it's pretty much good for most of the modern web application you want to build.
69
00:03:41,260 --> 00:03:44,440
So use it to your advantage, leverage it.
70
00:03:44,440 --> 00:03:45,700
So let's see what it does.
71
00:03:45,700 --> 00:03:49,160
It's generating the request, it's taking longer time.
72
00:03:49,160 --> 00:03:53,140
So it asks me, would I want to proceed? Yes, proceed.
73
00:03:53,140 --> 00:03:56,520
It's going to clone, so successful, done.
74
00:03:56,520 --> 00:04:03,860
So I want to set up all the dependencies and run the application.
75
00:04:03,860 --> 00:04:06,380
Tell me what I need to do.
76
00:04:06,380 --> 00:04:09,180
You can ask it. It read the readme file.
77
00:04:09,180 --> 00:04:10,880
It knows what it needs to be done.
78
00:04:10,880 --> 00:04:13,680
It tells you that's a great advantage of it.
79
00:04:13,680 --> 00:04:21,300
You need to basically need to download all the npm packages that needed for building any React-based application.
80
00:04:21,300 --> 00:04:24,020
So it asks me required.
81
00:04:24,020 --> 00:04:27,000
So you need to then head to NeonDB.
82
00:04:27,000 --> 00:04:30,180
We use that for our database.
83
00:04:30,180 --> 00:04:32,980
Create one, test, right? Then you connect.
84
00:04:32,980 --> 00:04:35,180
Here it shows you password.
85
00:04:35,180 --> 00:04:39,140
So what you need to do is basically copy and paste the whole thing,
86
00:04:39,140 --> 00:04:41,780
and you have this end file.
87
00:04:41,780 --> 00:04:48,260
You want to change the end.exampleToEnd file, because then that would go under git ignore.
88
00:04:48,260 --> 00:04:55,840
So in the git ignore, git ignore, what it does this file is that it does not push these files to the GitHub repo,
89
00:04:55,840 --> 00:05:02,700
which is your secret keys and all the credentials that you don't want to be exposed on GitHub.
90
00:05:02,700 --> 00:05:09,460
So when you change this end.exampleToEnd, it does not push it to GitHub. Right?
91
00:05:09,460 --> 00:05:14,300
Here, the credential for NeonDB that we copy and pasted, you add it there.
92
00:05:14,300 --> 00:05:21,340
So next added the NeonDB, let's add nextR.
93
00:05:21,340 --> 00:05:27,760
This is the next secret. You pull that one file and then you place it here.
94
00:05:27,760 --> 00:05:30,600
I already added it. Let's proceed.
95
00:05:30,600 --> 00:05:36,980
Then you need to hit to go to the GitHub repo, GitHubRF, and all of that.
96
00:05:36,980 --> 00:05:37,760
Hold on a second.
97
00:05:37,760 --> 00:05:43,620
So if you don't know what to do, just ask, let's proceed to GitHub auth and GitHub Google auth.
98
00:05:43,620 --> 00:05:51,780
What should I do? You go to it's fairly easy, to be honest, you just need to say test.
99
00:05:51,780 --> 00:05:57,060
It says on-page URL that here you added here and this one for here.
100
00:05:57,060 --> 00:05:59,300
Enable device load and register.
101
00:05:59,300 --> 00:06:03,560
So then what it does for you, give you a client ID.
102
00:06:03,560 --> 00:06:06,940
You add it here and then new secret, right?
103
00:06:06,940 --> 00:06:08,840
You copy and paste it, done.
104
00:06:08,840 --> 00:06:16,580
Then Google Auth, you go to console, Google Console, you go to API and services.
105
00:06:16,580 --> 00:06:21,840
So you go to Google Cloud now. Again, it's here, you just need to click.
106
00:06:21,840 --> 00:06:28,280
Then you go to credential and you create credential and then you need to auth client ID.
107
00:06:28,280 --> 00:06:34,860
Application type, web application. So it really is web application name for your auth.
108
00:06:34,860 --> 00:06:42,020
Test. Then here in Authors JavaScript, you need to local house 3000.
109
00:06:42,020 --> 00:06:45,220
Then for this one, we direct, you need to add this one.
110
00:06:45,220 --> 00:06:47,760
Then that's pretty much of it, to be honest.
111
00:06:47,760 --> 00:06:52,440
So you get the client ID, copy it here. Secret, you get it.
112
00:06:52,440 --> 00:06:54,740
It's done now. Let's proceed.
113
00:06:54,740 --> 00:06:59,780
What else needs to be done to run the local server?
114
00:06:59,780 --> 00:07:06,460
I didn't add the OpenAI API key because project by project is different,
115
00:07:06,460 --> 00:07:11,800
but it's available in your environment file. You might want to use another one. Right?
116
00:07:11,800 --> 00:07:15,140
So then you go to your terminal. This is how I access it.
117
00:07:15,140 --> 00:07:20,180
If you click here, terminal and then you need to create generate Prisma client.
118
00:07:20,180 --> 00:07:25,940
Prisma is between your database and the backend. Right? And you need that.
119
00:07:25,940 --> 00:07:29,020
So it's already, you need to do it.
120
00:07:29,020 --> 00:07:33,900
So it's done. Let's do, I typically just run all the commands.
121
00:07:33,900 --> 00:07:45,620
Probably don't need it, but uh-huh. It's great. This is done.
122
00:07:45,620 --> 00:07:51,680
Then you go with, and let's see if it's happening. There you go. There you have it.
123
00:07:51,680 --> 00:07:57,520
You have now the landing page for it. Then you can click on sign in. Sign up.
124
00:07:57,520 --> 00:08:02,560
Let's see if I can do it. Continue. There you have it. Your project is now running.
125
00:08:02,560 --> 00:08:06,800
Tailwind, Reddit, everything is ready. Components are ready.
126
00:08:06,800 --> 00:08:12,200
You can start building your next billion dollar idea. Let's see.
127
00:08:12,200 --> 00:08:16,780
Install running into the environment. Let's just make it easy.
128
00:08:16,780 --> 00:08:21,080
Reddit, Tailwind installed. Just the last thing.
129
00:08:21,080 --> 00:08:25,820
It should be installed because it's here, but there you go. It's installed. Easy.
130
00:08:25,820 --> 00:08:39,500
It took 14 minutes to set up this environment. Now it's going to save you days of confusions and bottleneck, challenges, friction, whatever the case may be.
131
00:08:39,500 --> 00:08:44,740
This was a short episode. I hope you liked it. Until the next one. Happy WIPECoding.
132
00:08:44,740 --> 00:08:54,980
Thank you for listening to UX for AI. Join us next week for more insightful conversations about the impact of artificial intelligence in development, design,
133
00:08:54,980 --> 00:08:56,580
and user experience.
134
00:08:56,580 --> 00:08:59,000
(soft music)