Shadowing Practice: My Vibe Coding Workflow (Step by Step Workflow) - Learn English Speaking with Video

This video is going to be a complete step -by -step guide to my Vibe Coding workflow.

I'm going to show you what tools I'm using, what subscriptions I have, and most importantly, the actual process that I go through when building production software.

For those of you that don't know, BridgeMind is currently at $18 ,000 in MRR, and gross volume over the past three months is at $74 ,000.

And this is all from Vibe Coding.

If you want to learn how to do this for yourself, just watch until the end of the video and make sure

that you drop a like and subscribe to BridgeMind to learn even more in the future.

The first thing that I want to talk about is the subscriptions

and the tools that I'm using to actually power my workflow.

And one thing I want to note is

that you guys do not need to be using the same subscriptions that I'm using.

Everybody has their own budget.

I am a power user and I'm using these tools like 12 to 16 hours a day.

So for me, I do not want to hit any limits.

So I have multiple subscriptions from multiple providers and here is what they are.

So I have a $200 a month, Claude subscription, OpenAI subscription, Cursor subscription, and Perplexity subscription.

Now I label these as AI subscriptions because I use Perplexity for research.

I use Cursor for some different tools that they have, and I'll get into that in the video.

I use OpenAI to access GBT 5 .5 through codex

and then I use Claude to be able to access their

frontier model Claude Opus 4 .8 via Claude code now those are the AI subscriptions

that I use to actually get the access

that I need to the models but there are tools

that you should be using if you are a vibe coder the first tool

that you need to be using in your vibe coding workflow is an agentic development environment

and I'm going to show you the agentic development environment

that I use which is bridge space and it looks like this

so as you guys are familiar with cloud code

and codex one thing that you need to know about these tools is

that you are able to work on multiple tasks at the

same time what has become incredibly important for workflows is

that you get really good at passing off tasks to multiple agents

and then managing those agents until the completion of those tasks this is the way

that I approach it as a task gets more difficult

that will make it so that you need more agents

and also need a plan so for example hey

if a task has a difficulty level of one you just need one agent

and you don't even need a plan for example like a

task with a difficulty of one is like oh i need to go change the color of a button right

or oh i need to change like this copy

or i need to change this text

or i need to adjust this here you know this is not something that's going to need more agents

and it's not something

that is going to need a plan You can just speak your intent with your voice -to -text tool

and it's going to be able to get it done Now as

that difficulty goes up like let's say to a level 5 You're gonna need more agents

so that they can kind of like gain in a better understanding of the code base

And then work together to be able to get

that task done a plan might be needed But if you go to a level 10 Hey, you're gonna need a lot of sub agents

and you're definitely gonna want to you know Abstract away from

the initial prompt you're gonna want to create a plan

So I want to show you guys how I do this from scratch.

So I just opened up BridgeSpace, and what I'm going to do is I'm going to select this right here, BridgeSpace.

I'm going to click on this, and I'm just going to open up a preset, which is already set to a particular directory on my computer, BridgeMind.

And I'm going to open up another workspace because I'll work with multiple workspaces at the same exact time.

So now what I want to do is now I want to CD into, let's CD into Vibecademy, okay?

So now I'm in Vibecademy, and let's say I want to launch eight agents, and let's say I want to do half Claude, and then I want to do half Codex.

So I'm going to launch four Codex, four Claude, and we're going to open up these in an additional workspace.

I'm about to start prompting these agents, so I just want to highlight another tool that you really do need to have in your Vibecoding workflow,

which is a voice -to -text tool.

I use bridge voice.

So I'm going to go back over to bridge space here and I'm going to begin prompting my cloud code agent.

I need you to launch three deep dive agents to do a thorough review of the website's landing page

and note that we need to add in sections for demo videos for bridge agent, bridge voice, and bridge space.

Note that currently we do not have sections on the homepage for demo videos.

So I need you to use the front end design plugin to create these new sections

which should have the icon of the app

and the name of the app

and then the iframe below for now it can just be a placeholder okay

so you guys just heard my prompt

and then what I'm going to do is I'm going to add the website directory

that I'm actually working in okay

and you can even go as far to do an ultra think as well

and I'm going to submit this prompt but I I wanna show you guys that, hey, This launched three deep dive agents,

and this will work for about the next five to 10 minutes as it reviews the website, comes up with a good way to design it.

And there's a couple things I want to draw your attention to that I did when I prompted that, okay?

One important thing is how I'm organizing my workspace.

So if you look over here, you can see that in this BridgeMind directory, there are a ton of different projects.

There's BridgeMind API, there's the BridgeMind app, there's the BridgeMind MCP there's the BridgeMind UI

and I do this for a purpose I do this

because it makes it very easy for me to then go to

that particular directory on my machine and then I'll just do an app BridgeMind UI

and at BridgeMind API and at BridgeMind MCP

and then I would be able to just prompt

and Claude would know that okay these are the directories

that are being referenced so watch this

when I enter this you're gonna see did you see how it says listed directory listed directory listed directory

so if you do an at and you add a particular folder

or directory or file it makes it so

that the instance your coding agent has the context

that it needs to be able to properly pull all the files

that it needs now

that we have some of the basics out of the way like setting up your workspace speaking your intent

and adding context I now want to work on a fairly challenging sprint

that I've been planning on doing for a while now

so we're going to be working on bridgebench v3 this is the world's number one vibe coding benchmark.

It's been reposted by Elon Musk four different times

and building out BridgeBench v3 is actually a goal on my August 31st goals.

We're going to build out a database, we're going to build out an API, and then we're also going to be building out AWS infrastructure all in this video.

And I'm just going to do the best

100

that I can to walk you guys through this step -by -step using these principles.

101

The first thing that I'm going to do is I'm going to be building out the api and database

102

so i am going to use gbt 5 .5 extra high

103

fast extra high is by far the best model for back end

104

and when you put it in fast mode it kind of gets around the slowness of gpt models

105

but let's give it the prompt so i'm going to add

106

that context i'm going to do bridge bench ui

107

and i'm going to add bridge bench as well i need

108

you to do a quick review of the bridge bench ui as well as bridge bench

109

and note that we need to begin building out a back end

110

and database for bridge bench you can call it

111

and then i'm just going to give it the slug

112

that i want to call it

113

which is bridge bench api this needs to be a nest js api

114

and i want to use drizzle for the orm

115

and i want the orm

116

and the migration system to be built into the api you

117

can reference vibe academy api for how this is done

118

so there's another project that i have that does this really well

119

and i think that once you start to build up kind of like a portfolio

120

or you have things working in other projects it does help

121

when you are building something from scratch if it is similar to something else

122

that you've built i will reference something else that i've built

123

that has done it correctly so i'm gonna reference vibe academy api

124

because it does

125

that really well i need you to start out with a very simple mvp with a singular sign up

126

and sign in endpoint that uses Cognito for the auth system note

127

that the only way that we are going to allow users to authenticate is via discord

128

so I need you to assist me in building this out either should only be one table called users

129

and let's create a structured plan first so you guys can see

130

that this is going to be a difficult task

131

so I'm gonna put it in plan mode because hey

132

if I just had it go out and build it it probably wouldn't do

133

that good of a job this is a fairly difficult task

134

because you're thinking about this

135

and you're saying okay it's doing database it's doing api it's looking at another project it's going to use cognito

136

so it's a fairly difficult

137

task

138

so i'm not going to use any sub agents on this one i'm just going to let gpt 5 .5 work

139

and we'll see how it does

140

but this i would say is probably about a difficulty level of like six

141

so this one is now building out the api in the database

142

and this is a perfect example of what I referenced about being able to work on multiple tasks at the same time.

143

If you only are working on a singular task, you're not a really good vibe coder.

144

You need to be working on multiple things at the same time.

145

So the next thing that I'm going to do is I am going to reference Bridge Bench UI, and I'm going to use Claude Code for this

146

because Claude Opus 4 .8 is one of the best UI design models right now.

147

So you're going to want to use it for UI.

148

I want you to build out a page for signing up and signing in to bridge bench.

149

Don't worry about hooking this up to any backend.

150

I just want you to focus strictly on design, make it as simple as possible.

151

Add in these routes to the sidebar of bridge bench

152

and note that the only way to sign up and sign in to bridge bench is via discord.

153

Okay.

154

So that's going to be my prompt.

155

And this one here and it's not really going to need a whole lot of planning.

156

It's going to be able to do a good job.

157

This is like a difficulty level of like two, so I'm not too worried about it.

158

Now, one thing to note is I do have my Claude codes in a high effort level.

159

For the most part, you probably should be using extra high when you're using Claude code.

160

Right now, I'm not using extra high.

161

I'm using high, but let's switch this one over to extra high.

162

This time, I want to actually start building out a testing framework.

163

So I'm going to again, reference BridgeBench UI.

164

I need you to assist me in building out a complete testing framework for BridgeBench UI.

165

Launch two deep dive agents

166

and come up with a structured plan to build out a testing framework so that we can perfect the UI.

167

All right.

168

So I'm going to throw this in plan mode and then we'll submit this plan.

169

So I now have three agents that are working for me right

170

and what's really important when you're vibe coding is

171

that you remember exactly where each agent is working

172

and this can be a challenge

173

but one of the most common questions I get asked is

174

hey how do you run all these agents without them like conflicting with one another

175

and you can use get work trees okay

176

if you need to use get work trees you can in a get work tree basically

177

if you don't know what

178

that is it's a way for you to be able to have an agent

179

that runs on its own isolated work tree

180

that is not going to interfere with any of the other agents

181

and bridge space makes this really easy but the only thing about this is

182

that if you do work in a get tree you are going to have to handle actually getting

183

that merged back into whatever branch you want that merged into

184

but it will help for the overwriting but most of the time i think

185

that get work trees can be a little bit overkill

186

because there's no way that these three agents are going to overwrite each other right now.

187

This one's working in the API.

188

This one's working on the UI in a test suite and this one is working on like the sidebar.

189

So they're not going to conflict with each other.

190

So remember where they're working and it looks like our API is done now, but remember where they're working and use Git work trees if you have to,

191

but don't complicate things with Git work trees if you don't have to.

192

So now the next step is actually building out our AWS infrastructure in getting this into the cloud

193

but before we do that I do want to create a robust test suite

194

so I'm just going to prompt this agent down here great

195

work I now need you to build out a complete test suite

196

that uses Jest and any other packages

197

that you deem necessary I want you to do a thorough review

198

and build out a scalable test suite that has full coverage and full unit test coverage across all endpoints and services.

199

Okay.

200

So I'm going to give it this prompt

201

and I'm just going to have it build it out since we only have two routes right now, a sign in and sign up.

202

I'm not too worried that that's not going to be super complex, but while this works here, I'm going to go over to this cloud code agent now, and I'm going to reference the new bridge bench API.

203

Okay.

204

So you can literally see, if you look here, you can see bridge bench API, right?

205

So I'm going to reference bridge bench API, and I'm now going to give it the prompt that it needs to actually build out the AWS infrastructure.

206

I need your help in building out the AWS infrastructure for BridgeBench.

207

I need you to review the API and note that we want to use Docker and we want to use ECR,

208

ECS, and we also would like to use RDS for a Postgres database.

209

And we also will need to handle the migrations for the database.

210

I need you to review Vibecademy API and how this is done in Vibecademy API for the migrations,

211

but you can start to plan out a structured AWS infrastructure for BridgeBench.

212

Completely review the API.

213

The UI is in Vercel, so don't worry about that yet, but let's build out the VPC.

214

Let's build out the security groups.

215

Let's build out the ECR.

216

Let's build out ECS.

217

Let's build out the load balancer, and I need you to create a structured plan first to

218

build out a complete MVP for our AWS infrastructure using best practices and integrating cybersecurity best practices.

219

Okay.

220

So we're going to do a plan first.

221

Okay.

222

And honestly, what I'm going to do is actually, I'm going to switch this up because this is a difficulty level of like 10.

223

So what I'm going to do is I'm actually going to switch this prompt right here.

224

And I'm going to paste that prompt.

225

What's nice about BridgeVoice, it does save your prompts once you speak it.

226

So I can go over to BridgeVoice anytime

227

and just copy those prompts it's very nice

228

but let's go over here this now has

229

that pasted prompt i'm going to put bridgebench api back in i will reference bridgebench ui just

230

so it has it

231

but then i'm also going to give it this i want you to use the

232

and then i do have a it's called like an aws profile okay

233

but i do have an aws profile on this computer aws

234

profile on this machine to actually access my AWS account and build out this infrastructure using the CLI.

235

So I'm going to use the AWS CLI.

236

I think that this is the fastest way to build infrastructure.

237

A lot of people will use Terraform or CloudFormation.

238

but sometimes this just builds a lot of extra things to manage.

239

And once you build your AWS infrastructure, if you're using agents and one thing I wanna do actually is I do want to launch it in plan mode.

240

And I'm gonna say, I want you to launch five agents to assist you with this task.

241

This cloud code agent is now provisioning my AWS infrastructure and this is an 11 phase plan.

242

So it's gonna take a while for this to build out.

243

But one thing that I wanna highlight just for you guys to know is

244

that I never have My Claude code agents

245

or my codex agents in like plant like where they're asking me things I always have them in YOLO mode

246

or in bypass permissions mode because it allows you to literally just be able to walk away and

247

Go somewhere else and you know, I'll come back to this You know in like this will

248

probably take about 30 minutes to an hour to actually provision all of this infrastructure correctly

249

So I'm gonna be able to walk away now i think

250

this is a great example of being able to work on multiple tasks

251

or projects at the same time because now that this is working

252

and working on provisioning the infrastructure there's nothing else with bridgebench

253

that i necessarily want to work on right now

254

so for example this is

255

when i would just go over to another project like vibe academy

256

and we could start working with vibe academy

257

while we wait on the aws infrastructure in bridgebench to finish provisioning while we wait for the infrastructure to finish up, I do want to show you guys another tool

258

that I do think that you should be using in your vibe coding workflow, which is a screenshotting tool.

259

Okay, I use Bridgeshot, which is a product in the BridgeMind ecosystem.

260

The reason a screenshotting tool is so important is because it allows you to add context to what you're looking at.

261

So for example, let's say that I want to add a search bar on this page here, I can do a screenshot, I can go down here and I can draw an arrow to where I want the search bar to go.

262

And then I can say, uh, I want there to be a search bar here for me to be able to search models.

263

So I'll just enter this, I'll save it.

264

And then I'll go back over to an agent.

265

Uh, let's pull back bridge space and I'll just drop in this screenshot.

266

I need you to add a search bar here respectively.

267

And then again, I'm going to have to add bridge bench UI just so that it knows, okay, it's this project that he's talking about.

268

We'll enter that.

269

And that again, that's going to be a super easy prompt now that I added the context.

270

But if you do use a screenshotting tool and you add that context, I promise you it will cut down on hallucinations so much.

271

Here's our search bar.

272

Let's look up Claude Fable 5 and boom, there it goes.

273

And it works perfectly.

274

Another thing that I'll do

275

when I'm vibe coding is I like to think ahead about the next thing

276

that I'm going to need to do after one of the tasks that I'm doing is finished.

277

So for example, with our AWS infrastructure, one of the things with bridge bench

278

that you guys heard me ask for is I want to make it so that users are able to authenticate using discord.

279

So I know that that's going to be a little bit of a process in itself.

280

I've actually never done that before.

281

So we're going to start working on that with this codex agent down here.

282

I need you to assist me in thinking through how we can actually make it

283

so that users can sign up

284

and sign in using discord what is the process for this do i need to create a discord application

285

so let's first figure out how to do that

286

because i actually don't know how to do that

287

so i'm just going to ask the agent that worked on building out

288

that functionality in the first place what we need to do okay the agent came back quick

289

and what it says is that you do need a discord application

290

so what i'll do now is i need you to write a handoff prompt to the AI

291

that is going to be working in the browser to create this discord application.

292

So you guys are actually going to see a really cool workflow that I use and it's using comment.

293

So I told you guys at the start of the video that I use comment.

294

And what I do is I'll actually use codex

295

or I'll use cloud code to write handoff prompts for

296

when I need to use AI in the browser

297

or do anything in the browser

298

so I just had it write this handoff prompt I'm gonna copy all of this

299

and then we're gonna go over to comment

300

and actually have AI set up this discord application for us

301

so here's comment I'm currently in the discord application portal

302

and all you have to do is click assistant over here

303

and then I can submit that entire prompt

304

and then I can go over here

305

and I can just say control browser do you guys see this button right here control browser

306

so I'll click that and I can then submit this

307

and you guys will see how this works I think this is

308

so cool there are other ways that you can do this

309

but Comet will basically take control of your browser

310

and then it'll begin actually creating this discord application for us

311

and we won't have to do anything

312

because we already gave it a handoff prompt with all the context

313

that it needs to create the discord application the discord app has been created using comment

314

and it's now time to actually wire all of this in.

315

and get it deployed

316

so i'm going to prompt this agent i need you to

317

now wire the front end bridge bench ui into the api

318

so that we are actually able to sign up using discord respectively i'm going to reference the bridge bench ui

319

and the bridge bench api

320

and then i'm also going to put in ultra think on this one ultra think does make it think harder

321

so we're going to submit that and we're going to wire all this in

322

and then we're ready to test okay guys

323

so i did just push this to production

324

and i'm getting an error in production here

325

when i click sign up with discord you can see

326

that i'm getting some errors here and what's cool is

327

that all you have to do is that you have to copy those

328

and then just drop them in to the agent

329

and then drop in the screenshot and i actually already did

330

that and it found it it found the bug you can

331

if we move up here it says found it this was the error

332

and then it fixed it and then it just pushed it to the main branch

333

and we'll be able to see if this is now fixed but typically

334

when you are pushing stuff to production it won't necessarily work

335

the first time you'll have to do a couple things to actually getting working in production

336

so make sure that you do use browser tools and

337

that you're giving your agent the context that it needs to fix any issues

338

that are happening in production so i deployed that fix

339

and i just attempted to sign up again

340

and now it's actually working okay look at this guys

341

so i am going to see this is going to be

342

the first time can we actually authorize let's see guys this

343

is going to be huge let's see wow okay look at

344

that look at that my account right here bridge mind official that's my discord account

345

and guys this works perfectly

346

so this is um this is how you build software in

347

today's world you guys can see the account right here bridge line official

348

so in this video we literally built the entire stack we

349

built the database we built the api we built the AWS infrastructure and we sorted out some issues that we had,

350

but you can see that I now am able to actually sign up for bridge bench and log in and log out.

351

This is amazing.

352

So we are going to be working on bridge bench V three.

353

Like I said, this is a big goal.

354

And one of the steps

355

that we're taking towards bridge bench V three is actually allowing people to sign up for bridge bench

356

and participate in different things that we're going to create for bridge bench.

357

So go check out bridgebench .ai go sign up using discord it is live now

358

so i'm super excited about this that's gonna wrap it up for today's video

359

if this was helpful for you in any way shape

360

or form make sure you drop a like on the video

361

and subscribe to bridgemind and join the bridgemind discord community

362

which is the largest

363

and fastest growing vibe coding community on the internet right now

364

it has like over 12 600 builders there's going to be a link in the description below but with that being said, I will see you guys in the future.

📺 Same Channel

Claude Fable 5 Makes New Things Possible

University StudentsBusiness English+1

✨ Recommend Video

117 sentences

Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project

University StudentsBusiness English+1

309 sentences

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

University StudentsBusiness English+1

236 sentences

How I Consistently Study with a Full Time Job: My Scheduling Formula

University StudentsBusiness English+1

443 sentences

Complete Roadmap for Backend Software Engineers (START HERE!)

University StudentsBusiness English+1

108 sentences

How I Learned Procedural Generation

University StudentsBusiness English+1

103 sentences

Amazon Bedrock Tutorial | Getting Started with Amazon Bedrock | AI Model Access & Testing

University StudentsBusiness English+1

207 sentences

How I Made $30,000 Hacking Broken Access Control

University StudentsBusiness English+1

78 sentences

How I deploy serverless containers for free

University StudentsBusiness English+1

138 sentences

Going Online with a PLC, Uploading and Downloading Code!

University StudentsBusiness English+1

What is the Shadowing Technique?

Shadowing is a science-backed language learning technique originally developed for professional interpreter training and popularized by polyglot Dr. Alexander Arguelles. The method is simple but powerful: you listen to native English audio and immediately repeat it out loud — like a shadow following the speaker with just a 1–2 second delay. Unlike passive listening or grammar drills, shadowing forces your brain and mouth muscles to simultaneously process and reproduce real speech patterns. Research shows it significantly improves pronunciation accuracy, intonation, rhythm, connected speech, listening comprehension, and speaking fluency — making it one of the most effective methods for IELTS Speaking preparation and real-world English communication.

Shadowing technique: read the full step-by-step guide →

Shadowing Practice: My Vibe Coding Workflow (Step by Step Workflow) - Learn English Speaking with Video

Claude Fable 5 Makes New Things Possible

I've Changed My Opinion On DEVELOPERS Vibe Coding

Master n8n Triggers in 20 Minutes – Automate Anything

JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)

Brand Identity Design Challenge - Part 2 - How to create a full Behance Portfolio project

Claude Code: The Advanced Guide (99% of Devs Skip These Features)

How I Consistently Study with a Full Time Job: My Scheduling Formula

Complete Roadmap for Backend Software Engineers (START HERE!)

How I Learned Procedural Generation

Amazon Bedrock Tutorial | Getting Started with Amazon Bedrock | AI Model Access & Testing

How I Made $30,000 Hacking Broken Access Control

How I deploy serverless containers for free

Going Online with a PLC, Uploading and Downloading Code!

About This Lesson

What is the Shadowing Technique?