EP. 104 - From Web 1.0 to AI: A Developer’s Evolution w/ Fame Razak

Fame Razak shares his approach to building MVPs in just ten days, blending UX design, AI tools, and dev workflows. He talks through past projects with brands like HSBC and Nike and his process for product ideation and scoping. A must-listen for anyone shipping fast and thinking deeply.

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 and Fame’s Background
• 1:05 Early Web Development and Agency Life
• 2:59 Projects with Nike, HSBC, and PwC
• 6:05 Big Data Platform for M&A at PwC
• 10:39 Prototyping with AI and Atomic Design Thinking
• 15:00 How to Build an MVP in 10 Days
• 37:45 Post-MVP Development and Scaling Real Products

Transcript

00:00:00:00 - 00:00:11:18

Welcome to UX For AI.

00:00:11:18 - 00:00:14:21

I live trying to sort of work through his background

00:00:14:21 - 00:00:17:10

and how he got it around with

00:00:17:10 - 00:00:18:14

AI and

00:00:18:14 - 00:00:19:10

coding in

00:00:19:10 - 00:00:20:16

this session. So

00:00:20:16 - 00:00:26:15

I just want to make it really quick. I'm going to skip the introduction of who I am or what I'm doing for this equation.

00:00:26:15 - 00:00:27:06

So

00:00:27:06 - 00:00:27:21

ten

00:00:27:21 - 00:00:29:05

pages are yours

00:00:29:05 - 00:00:30:20

recorded now. So

00:00:30:20 - 00:00:31:09

good luck.

00:00:31:13 - 00:00:32:01

Let's go.

00:00:32:01 - 00:00:33:15

Yeah. Cool. Thanks Brett

00:00:33:15 - 00:00:37:10

everyone. So I'm going to like share my screen.

00:00:37:10 - 00:00:41:05

For everyone else who's here, I'm guessing your designers.

00:00:41:05 - 00:00:43:06

Let me know if I'm right or wrong.

00:00:43:06 - 00:00:47:00

But, like, work out how to share my screen. You're absolutely right.

00:00:47:00 - 00:00:47:12

Yeah.

00:00:47:12 - 00:00:47:21

Yeah.

00:00:47:21 - 00:00:48:10

Cool.

00:00:48:10 - 00:00:49:20

Okay, then I have

00:00:49:20 - 00:00:50:22

the right assumption

00:00:50:22 - 00:00:52:11

and not made this wrong.

00:00:52:17 - 00:00:58:02

Okay, cool. This is me. This is my LinkedIn. I'm hoping you can see my LinkedIn.

00:00:58:02 - 00:01:05:05

Cool. So I am real. If you want to connect with me, you can connect with me on LinkedIn. That's. That's where I am.

00:01:05:05 - 00:01:10:03

As Brad said, I have been around for a very long time. I'm actually old. I know I look young.

00:01:10:03 - 00:01:10:18

But I'm.

00:01:10:18 - 00:01:12:13

I'm approaching 15th August.

00:01:12:13 - 00:01:16:24

But I started my career very long time ago. One of,

00:01:16:24 - 00:01:19:13

I guess, one of the world's most famous agencies.

00:01:19:13 - 00:01:23:03

Aka back in 1999. That's why I moved to London.

00:01:23:03 - 00:01:27:04

And back in 1999, this was a very small agency. It's

00:01:27:04 - 00:01:28:15

less than 30 people.

00:01:28:15 - 00:01:29:13

But this is where.

00:01:29:13 - 00:01:29:24

Yeah.

00:01:30:01 - 00:01:30:06

It's

00:01:30:06 - 00:01:32:24

nice. Wow. Okay. That's. That's interesting.

00:01:32:24 - 00:01:41:02

It was less than 30 people in 1999. But this is what gave me exposure to building websites. I dropped out of university,

00:01:41:02 - 00:01:44:15

in a computer science degree, and

00:01:44:15 - 00:01:45:20

just. It was

00:01:45:20 - 00:01:48:11

not web. I discovered web in the early

00:01:48:11 - 00:01:51:23

stages of, like, things like, go further. And have you ever heard of what gopher is?

00:01:52:00 - 00:01:56:20

But it was the way to navigate, connected computers without a web interface. But

00:01:56:20 - 00:01:58:07

that sparked something in me, and

00:01:58:07 - 00:02:01:06

I just really wanted to get into this world. So

00:02:01:06 - 00:02:04:19

I taught myself, web and HTML.

00:02:04:19 - 00:02:07:20

I didn't say CSS and JavaScript because it didn't exist

00:02:07:20 - 00:02:09:13

that long ago. So it was just

00:02:09:13 - 00:02:10:04

HTML.

00:02:10:04 - 00:02:11:08

And I joined.

00:02:11:08 - 00:02:12:22

Okay. And this is where I,

00:02:12:22 - 00:02:17:00

I worked on brands like Microsoft, MSN, Expedia,

00:02:17:00 - 00:02:21:12

orange, Sainsbury's. If you're in the UK, you know who they are.

00:02:21:12 - 00:02:28:02

So lot of big brands and a lot of really cool websites. So that was my first agency in my last agency

00:02:28:02 - 00:02:31:14

where I was CTO, so I'd gone from developer to CTO.

00:02:31:16 - 00:02:41:07

And analog folk, where I was for five years. We again, big brands all based in London. I look like I've again worked on massive

00:02:41:07 - 00:02:46:07

well known names like Nike, Pepsi, Coca Cola,

00:02:46:07 - 00:02:48:17

all those kind of brands, again, building

00:02:48:17 - 00:02:52:20

websites, mobile applications, and then more and more

00:02:52:20 - 00:02:54:10

platforms as they

00:02:54:10 - 00:02:59:24

became available to be able to do things like shop, make payments and become a bit more interactive.

00:02:59:24 - 00:03:00:09

So

00:03:00:09 - 00:03:04:08

I've lived through web 1.0. I've lived through web 2.0

00:03:04:08 - 00:03:09:00

and into web three, and now into the world of AI. So kind of all these

00:03:09:00 - 00:03:09:21

trends

00:03:09:21 - 00:03:14:21

that have come and gone in and, and now here and I've gone through them and read in the waves. And

00:03:14:21 - 00:03:19:05

throughout that time, I've worked on some really cool projects that have picked up awards, things like the Webby.

00:03:19:05 - 00:03:19:20

So

00:03:19:20 - 00:03:24:22

we built the Nike Trainers Hub project, and it's won a Webby. That's cool.

00:03:24:22 - 00:03:26:09

T 17.

00:03:26:09 - 00:03:31:11

This was built using React Native when it first came out. So this was like,

00:03:31:11 - 00:03:33:15

on the here. You'll see,

00:03:33:15 - 00:03:35:02

I have two developers,

00:03:35:02 - 00:03:37:13

great developers, but

00:03:37:13 - 00:03:41:00

all three of us had no idea how to develop React Native.

00:03:41:00 - 00:03:43:19

This. It was just as it came out. So there were

00:03:43:19 - 00:03:53:14

not many docs, not much, you know, YouTube that we could go and have a look on. So we literally picked this up and built it, and we won a Webby back in 2017 for that,

00:03:53:14 - 00:03:55:05

for that application, which was really cool.

00:03:55:05 - 00:04:01:11

I've also built HSBC's mobile banking app, HSBC Global Global Bank.

00:04:01:13 - 00:04:02:16

Sure. You've all heard of them?

00:04:02:16 - 00:04:05:05

My team built this application.

00:04:05:05 - 00:04:08:08

And this is really cool for me because this is actually my bank.

00:04:08:08 - 00:04:09:12

A bank I've

00:04:09:12 - 00:04:20:10

used ever since, which must be a fantastic experience. Yeah, 100%. You know, it's like all of us where if we give our money to a bank and we feel like we get very little in return.

00:04:20:10 - 00:04:25:05

This was cool for me because I got to charge the bank a lot of money for my head. Think

00:04:25:05 - 00:04:27:06

kind of the other way. I know, it was like,

00:04:27:06 - 00:04:32:07

You know, the way this works was as the agency, we were doing the design and UX of this product, and,

00:04:32:07 - 00:04:37:06

HSBC's team in China were in Hong Kong and China were developing.

00:04:37:06 - 00:04:37:15

But

00:04:37:15 - 00:04:39:09

they weren't developing the best products.

00:04:39:09 - 00:04:43:00

You know, a lot of the time when you hand over design and UX, you know,

00:04:43:00 - 00:04:47:09

to another team, it doesn't come back perfect as you designed it. So

00:04:47:09 - 00:04:53:04

the client asked us and me specifically what they could do to improve it. And I said, let us build it.

00:04:53:04 - 00:04:55:18

So we gave them a cost and gave them a timeline.

00:04:55:18 - 00:04:58:14

And they they let us build it. Which is cool because not many banks

00:04:58:14 - 00:05:01:08

allow that. Right? Like a design agency to

00:05:01:08 - 00:05:03:21

build the front end of their application. But

00:05:03:21 - 00:05:05:22

they let us and this is really cool. It's

00:05:05:22 - 00:05:11:15

now only number 20 in finance category, on the Apple. But it used to be number one when it first came out.

00:05:11:15 - 00:05:12:22

So that was a really nice

00:05:12:22 - 00:05:15:15

and yeah, what else have I done?

00:05:15:15 - 00:05:16:17

Most recently

00:05:16:17 - 00:05:20:04

I do so many things. Things that are alive or not, not alive anymore. But

00:05:20:04 - 00:05:26:22

I was, I guess you could say product director on this project where I was a freelance contractor at BWC.

00:05:26:22 - 00:05:31:15

This was a huge data driven platform. So again, no, I on this one, just

00:05:31:15 - 00:05:34:19

pure engineering, lots of data, lots of data viz.

00:05:34:19 - 00:05:37:01

And this is kind of the Google

00:05:37:01 - 00:05:37:15

for

00:05:37:15 - 00:05:39:14

M&A mergers and acquisitions at

00:05:39:14 - 00:05:41:21

is is a global product is is used by all the

00:05:41:21 - 00:05:42:11

M&A

00:05:42:11 - 00:05:44:15

teams across the world. So this is they

00:05:44:15 - 00:05:49:24

they have a new deal for a client. Client wants to sell part of their business or they want to buy another business.

00:05:49:24 - 00:05:53:18

Engage. They fire up a project in here and start dumping data

00:05:53:18 - 00:05:56:06

and then start creating analysis.

00:05:56:06 - 00:05:56:16

So

00:05:56:16 - 00:06:05:05

hypotheses and they have the data and they come up with conclusions. And they can share that with clients immediately. It's pretty cool. It really turned around how they work.

00:06:05:05 - 00:06:06:16

Previously they used to

00:06:06:16 - 00:06:10:19

create PowerPoint documents like hundreds of hundreds of slides, a PowerPoint,

00:06:10:19 - 00:06:12:02

and then once they

00:06:12:02 - 00:06:16:10

once they had this tool, they were doing everything on the web and sharing immediately with their clients.

00:06:16:16 - 00:06:20:06

So that's a pretty cool. Basically, the client wants to basically

00:06:20:06 - 00:06:22:19

go through a merger acquisition motion.

00:06:22:19 - 00:06:23:09

They got to

00:06:23:09 - 00:06:25:01

see if they're like, hey, we need

00:06:25:01 - 00:06:26:00

input on

00:06:26:00 - 00:06:29:08

what's the best route or what are the potential routes here.

00:06:29:08 - 00:06:31:02

You fire up the fire.

00:06:31:02 - 00:06:32:20

Basically analysis through this

00:06:32:20 - 00:06:34:05

platform and

00:06:34:05 - 00:06:35:13

give the report to them.

00:06:35:13 - 00:06:35:24

Yeah,

00:06:35:24 - 00:06:36:17

exactly.

00:06:36:17 - 00:06:37:15

Yeah. Okay.

00:06:37:15 - 00:06:39:20

Previously they were doing that in a,

00:06:39:20 - 00:06:40:09

you know,

00:06:40:09 - 00:06:44:24

they would throw 100, 200 people on a team depending on the size of the engagement.

00:06:44:24 - 00:06:48:02

And everybody would work in Excel and in PowerPoint.

00:06:48:02 - 00:06:51:16

And they'll work away in that process and have a document where

00:06:51:16 - 00:06:57:16

they would share at the end of that engagement, maybe about three months. In six months. Depends how, how quickly the client needed it.

00:06:57:16 - 00:07:01:22

And then the clients will then take that PDF, that PowerPoint,

00:07:01:22 - 00:07:05:07

cut it up and share it with different teams, whoever needed,

00:07:05:07 - 00:07:06:11

whoever needed the information.

00:07:06:11 - 00:07:06:18

And,

00:07:06:18 - 00:07:09:19

that's how it will get shared and consumed, which is really the.

00:07:09:21 - 00:07:10:06

Cool.

00:07:10:06 - 00:07:12:21

Yeah. So that's a little bit about me.

00:07:12:21 - 00:07:14:21

It's great to be here and I've,

00:07:14:21 - 00:07:17:06

I've kind of looked back at, I know Kathy

00:07:17:06 - 00:07:19:05

mentioned about the recordings and I've looked at

00:07:19:05 - 00:07:22:07

what's been watching some of the recordings and I think, you know, it was

00:07:22:07 - 00:07:24:01

really good, really, really good

00:07:24:01 - 00:07:25:23

insight into his workflow.

00:07:25:23 - 00:07:28:00

And I'm not going to say I had a

00:07:28:00 - 00:07:32:01

better I and I had a chat about what I could do, and I watched as I watched his recording.

00:07:32:01 - 00:07:32:18

I was like, oh,

00:07:32:18 - 00:07:36:13

that's really great. I don't need to repeat a lot of this stuff if you've seen it, but

00:07:36:13 - 00:07:38:24

what I will go through, I want to take you through

00:07:38:24 - 00:07:46:03

what I know as a developer, and what we would traditionally do, let, let's phrase it in trad code.

00:07:46:03 - 00:07:47:12

Traditional code

00:07:47:12 - 00:07:50:05

and the workflow and what we do there because

00:07:50:05 - 00:07:52:20

I and vibe coding.

00:07:52:22 - 00:07:57:12

Is getting a lot of attention right now, quite rightly. A lot of people are kind of selling,

00:07:57:12 - 00:07:59:10

selling the dream, selling the snake oil.

00:07:59:10 - 00:08:01:15

And I think a lot of people are forgetting

00:08:01:15 - 00:08:02:12

that the fact that

00:08:02:12 - 00:08:06:13

there is behind this, there is a real craft, across teams.

00:08:06:13 - 00:08:07:08

And

00:08:07:08 - 00:08:08:04

you cannot

00:08:08:04 - 00:08:09:22

you can't just publish

00:08:09:22 - 00:08:11:22

a product or an app,

00:08:11:22 - 00:08:12:24

you know, live,

00:08:12:24 - 00:08:14:13

and expect it to

00:08:14:13 - 00:08:16:03

really take off and go viral.

00:08:16:03 - 00:08:17:05

It has its place.

00:08:17:05 - 00:08:20:09

And personally, I think that's, that's at the moment it is

00:08:20:09 - 00:08:24:01

concepts and proof of concepts to develop prototypes. And it's really good.

00:08:24:01 - 00:08:27:17

But even then you can still get lost while you're developing that prototype. You know,

00:08:27:17 - 00:08:28:17

the code gets

00:08:28:17 - 00:08:33:16

completely broken sometimes the, the idea and the concept that you had for the prototype

00:08:33:16 - 00:08:34:04

just

00:08:34:04 - 00:08:38:14

go spirals completely out of control, whether you want it or not.

00:08:38:16 - 00:08:39:04

So

00:08:39:04 - 00:08:44:01

there is a, there is a thing of behind this process where we have to go through

00:08:44:01 - 00:08:50:19

a bit of a workflow, to be able to keep that product and the idea that you had on track. And

00:08:50:19 - 00:08:53:12

this comes from a traditional process, which

00:08:53:12 - 00:08:54:12

I don't know if

00:08:54:12 - 00:08:56:17

a lot of you are familiar with how

00:08:56:17 - 00:09:00:23

developers work and what that process looks like in a digital,

00:09:00:23 - 00:09:03:19

in an agency, and how that normally comes around.

00:09:03:19 - 00:09:04:05

Because

00:09:04:05 - 00:09:04:22

to say,

00:09:04:22 - 00:09:09:01

AI tools now, what kind of really merging that and making it almost

00:09:09:01 - 00:09:12:16

well, if you believe what's happening on social media is a you don't need

00:09:12:16 - 00:09:18:00

architects, you don't need designers, you don't need UX people. Right? That's just simply not true.

00:09:18:00 - 00:09:22:03

So I'm going to go through on my screen a few things,

00:09:22:03 - 00:09:23:06

that

00:09:23:06 - 00:09:24:14

maybe you haven't heard of.

00:09:24:14 - 00:09:25:20

Maybe you have heard of,

00:09:25:20 - 00:09:28:13

but yeah, I mean, just feel free to

00:09:28:13 - 00:09:33:18

drop any questions and I'll try and, All right, if you see any questions, because I can't see anybody now.

00:09:33:18 - 00:09:37:12

Feel free to just shout and and ask a question if anyone has one.

00:09:37:12 - 00:09:38:21

But

00:09:38:21 - 00:09:42:01

let's go back to here. So atomic design.

00:09:42:03 - 00:09:45:19

You've all heard of atomic design, right? I thought I'd start here because this is

00:09:45:19 - 00:09:49:16

perfect. This applies to all of us, you know, from UX

00:09:49:16 - 00:09:53:11

to design to code. Personally, as a developer,

00:09:53:11 - 00:09:54:01

you know,

00:09:54:01 - 00:09:58:18

when we started coding and thinking about, like, in small pieces,

00:09:58:18 - 00:10:00:01

it made development

00:10:00:01 - 00:10:02:18

so much easier. Like, we were able to

00:10:02:18 - 00:10:06:23

bring in, like, small components into applications and it rapidly,

00:10:06:23 - 00:10:11:04

it it rapidly helped us quickly develop applications and products.

00:10:11:04 - 00:10:11:16

And we

00:10:11:16 - 00:10:12:09

we would

00:10:12:09 - 00:10:14:20

almost productize, you know, CSS,

00:10:14:20 - 00:10:20:04

JavaScript in a functionality. We would have these components built, as an agency. And we did this

00:10:20:04 - 00:10:23:18

everywhere. We would do this everywhere and every agency. We would have our own

00:10:23:18 - 00:10:27:05

kind of components that we would reuse. And it was based on this atomic

00:10:27:05 - 00:10:30:09

design thinking. And I'm pretty sure everyone's very familiar

00:10:30:09 - 00:10:32:01

process diagram here.

00:10:32:01 - 00:10:36:03

Atoms, molecules, organisms, templates and pages not thinking. And when you think about

00:10:36:03 - 00:10:37:04

it like that,

00:10:37:04 - 00:10:40:03

it makes things so much easier.

00:10:40:03 - 00:10:45:21

And it makes it easier fit for agents and LMS actually, to start

00:10:45:21 - 00:10:49:22

coding, what you want when you think about this

00:10:49:22 - 00:10:52:09

and in this particular frame of mind.

00:10:52:09 - 00:10:54:15

Now, how how do you get here now

00:10:54:15 - 00:10:55:20

I get here by

00:10:55:20 - 00:10:56:14

using,

00:10:56:14 - 00:10:57:11



00:10:57:11 - 00:11:00:01

using Gemini actually recently.

00:11:00:01 - 00:11:02:03

So I have a set of prompts and

00:11:02:03 - 00:11:07:00

I go through this process, now, to help me

00:11:07:00 - 00:11:13:04

really break this down and turn this into a bit of documentation. So ultimately this gets turned into a,

00:11:13:04 - 00:11:13:21

a PRD.

00:11:13:21 - 00:11:16:24

And what I'm now doing is including this info

00:11:16:24 - 00:11:18:11

in a cursive file,

00:11:18:11 - 00:11:19:18

which

00:11:19:18 - 00:11:22:08

I can have cursive refer back to always.

00:11:22:08 - 00:11:23:03

And

00:11:23:03 - 00:11:26:13

a bit later on as well. I'll show you how I'm putting that into

00:11:26:13 - 00:11:28:13

a project management tool as well.

00:11:28:13 - 00:11:31:04

But the first thing first is, is this,

00:11:31:04 - 00:11:35:07

Gemini I go through a series of,

00:11:35:07 - 00:11:38:00

charts

00:11:38:00 - 00:11:41:10

and, where is the chat that I recently had?

00:11:41:10 - 00:11:42:22

And I in the digital.

00:11:42:22 - 00:11:44:04

I put this all together.

00:11:44:06 - 00:11:45:08

So I could

00:11:45:08 - 00:11:45:23

show it,

00:11:45:23 - 00:11:47:23

but now I've lost it.

00:11:47:23 - 00:11:48:17

Typical.

00:11:48:17 - 00:11:52:13

Okay, let's let's just go with,

00:11:52:13 - 00:11:53:06

concept.

00:11:53:06 - 00:11:53:21

Then. And then,

00:11:53:21 - 00:11:56:15

Oh. Actually it's here. I just need to scroll up. That's so,

00:11:56:15 - 00:11:57:02

so,

00:11:57:02 - 00:11:59:09

I'll start right at the very, very beginning.

00:11:59:09 - 00:12:02:22

Often times I have loads of ideas for apps,

00:12:02:22 - 00:12:05:12

and I've gotten into this habit of creating a notion page

00:12:05:12 - 00:12:06:12

for every idea.

00:12:06:12 - 00:12:07:09

And I'll go through

00:12:07:09 - 00:12:09:16

this process, with

00:12:09:16 - 00:12:12:09

these little prompts. And if you want these prompts

00:12:12:09 - 00:12:16:23

to show and I'll put them into, into the, slack, channel somewhere,

00:12:16:23 - 00:12:18:14

I'll copy them and paste them.

00:12:18:14 - 00:12:20:17

That would give me my very first one is,

00:12:20:17 - 00:12:26:23

you know, you are a product ideation assistant, skilled at taking early stage ideas and developing the core components.

00:12:26:24 - 00:12:28:22

I want to build an app that shows me my

00:12:28:22 - 00:12:35:17

money from all my accounts, how much money I've got from all my accounts, using the Apple APIs to aggregate my data with open banking.

00:12:35:17 - 00:12:36:19

All right, Read-Only,

00:12:36:19 - 00:12:41:03

based on this idea, please provide a concise concept and a purpose for this app

00:12:41:03 - 00:12:42:20

and the likely target audience.

00:12:42:20 - 00:12:48:24

And some potential design inspirations mentioning existing apps or general styles that align with the concept.

00:12:49:01 - 00:12:52:03

So that's a super simple prompt. It gets me started.

00:12:52:03 - 00:12:53:22

So the idea for this is,

00:12:53:22 - 00:13:00:12

I'm actually I'm taking this idea I want to build out a money management app, web based,

00:13:00:12 - 00:13:03:01

maybe mobile, platform that

00:13:03:01 - 00:13:09:12

I can connect to all my bank accounts and all my credit cards and have one aggregated view

00:13:09:12 - 00:13:10:20

of all my spending.

00:13:10:20 - 00:13:11:20

And so I can see

00:13:11:20 - 00:13:14:05

see where I'm at with my money situation.

00:13:14:05 - 00:13:17:19

There are some apps that do this. Some of them,

00:13:17:19 - 00:13:21:04

you know, they have paid, some of them have, and it's

00:13:21:04 - 00:13:22:08

some sort of revenue.

00:13:22:08 - 00:13:25:18

But anyway, I just want to build something that I can use. So

00:13:25:18 - 00:13:28:10

this is a starting point, and I want to use

00:13:28:10 - 00:13:29:09

open banking.

00:13:29:09 - 00:13:31:19

I don't know if you're familiar with open banking, but it's,

00:13:31:19 - 00:13:35:15

a standardized set of APIs that every bank,

00:13:35:15 - 00:13:38:19

in the UK and in Europe, they all follow,

00:13:38:19 - 00:13:41:08

the standard API kind of schema.

00:13:41:08 - 00:13:44:11

So that allows things like the happily,

00:13:44:11 - 00:13:49:06

they're a wrapper, to be able to connect with the bank. So me as a developer,

00:13:49:06 - 00:13:52:12

I can use Japanese APIs to then

00:13:52:12 - 00:13:56:13

pull my data and aggregate all my data from all the various different banks.

00:13:56:15 - 00:13:59:02

But I don't need to worry about the configuration with the bank

00:13:59:02 - 00:13:59:19

does all that.

00:13:59:19 - 00:14:00:11

So

00:14:00:11 - 00:14:03:12

that's what I want to build. And that's kind of my loose

00:14:03:12 - 00:14:06:23

kind of idea. And I'm asking it to help me break it down.

00:14:06:23 - 00:14:10:02

Nothing amazing here. It's it just gives me a concept,

00:14:10:02 - 00:14:13:04

gives me target audience and some

00:14:13:04 - 00:14:14:00

user groups

00:14:14:00 - 00:14:14:20

and some

00:14:14:20 - 00:14:16:03

design inspiration.

00:14:16:05 - 00:14:17:03

Designers

00:14:17:03 - 00:14:20:12

on the core might laugh, but anyway, so it's Google Pay

00:14:20:12 - 00:14:24:21

Mint, and it gives me some ideas. So if I didn't know

00:14:24:21 - 00:14:31:18

who was around or who was in this space, I could go and have a look. Look at revolute or N26 and see what they're doing and get some inspiration.

00:14:31:18 - 00:14:33:16

But what I then do, I take that,

00:14:33:16 - 00:14:35:19

that concept

00:14:35:19 - 00:14:36:18

and

00:14:36:18 - 00:14:37:18

I've now given it

00:14:37:18 - 00:14:38:08

a product name.

00:14:38:08 - 00:14:39:21

So my product is going to be called Delta.

00:14:39:21 - 00:14:41:03

And

00:14:41:03 - 00:14:42:05

I then use this

00:14:42:05 - 00:14:43:05

prompt in here

00:14:43:05 - 00:14:48:00

based on the concept. Please help me flesh out the specifics by suggesting reasonable starting points

00:14:48:00 - 00:14:50:06

or common approaches. For the areas below,

00:14:50:06 - 00:14:55:05

I'm looking for suggestions based on best practices for building a lean MVP in ten days. So

00:14:55:05 - 00:14:58:24

what I do now is I work with my clients and we do

00:14:58:24 - 00:15:00:06

little sprints ten days,

00:15:00:06 - 00:15:02:04

two sprints to five day sprints,

00:15:02:04 - 00:15:04:22

which is probably thinking, how the hell do you do a sprint in five days?

00:15:04:24 - 00:15:06:08

It's it's possible.

00:15:06:08 - 00:15:08:23

But we do two sprints in five days, and we

00:15:08:23 - 00:15:12:18

craft a really lean MVP just to test out some ideas.

00:15:12:18 - 00:15:14:21

And we would go through

00:15:14:21 - 00:15:19:01

this kind of process and we would just use AI and then finesse it as we go.

00:15:19:01 - 00:15:21:04

But what this then gives me is,

00:15:21:04 - 00:15:23:04

core features.

00:15:23:04 - 00:15:24:10

So

00:15:24:10 - 00:15:25:14

I can actually,

00:15:25:14 - 00:15:26:13

ask it.

00:15:26:15 - 00:15:27:16

So what are the

00:15:27:16 - 00:15:28:15

four features?

00:15:28:15 - 00:15:37:11

What do we exclude from the MVP? So what's not included? So just to get some ideas, it might help us think maybe we want to reprioritize

00:15:37:11 - 00:15:39:12

what are some of the nonfunctional requirements.

00:15:39:12 - 00:15:44:03

So things like speed accessibility and all those things that we need to think about

00:15:44:03 - 00:15:45:18

performance scalability. If

00:15:45:18 - 00:15:46:06

they get

00:15:46:06 - 00:15:48:10

security and privacy obviously.

00:15:48:10 - 00:15:52:02

And then how do we measure success. So if we are doing an MVP and putting this out,

00:15:52:02 - 00:15:54:19

what are some, you know, KPIs that we should look for

00:15:54:19 - 00:15:57:02

that will indicate that this is successful or not.

00:15:57:02 - 00:16:03:19

And then post MVP, what could be some features post MVP that we might want to bring in again

00:16:03:19 - 00:16:07:14

gives us some ideas that we might want to pull those forward or push push things back out.

00:16:07:14 - 00:16:08:05

So

00:16:08:05 - 00:16:11:08

it then goes away and then spits me back out a really good,

00:16:11:08 - 00:16:14:01

set of suggestions. So core 3 to 1,

00:16:14:01 - 00:16:18:01

obviously account connection, allowing me to connect

00:16:18:01 - 00:16:22:17

one of my accounts and core feature to basic balance display. So

00:16:22:17 - 00:16:24:09

and then it also gives me a

00:16:24:09 - 00:16:25:22

simple user workflow.

00:16:25:22 - 00:16:29:02

So the welcome screen introduces Delta and its purpose.

00:16:29:02 - 00:16:30:21

So you can see all your money in one place.

00:16:30:21 - 00:16:33:13

I can connect my account to clear call to action button.

00:16:33:13 - 00:16:35:13

Connect your book connect your bank

00:16:35:13 - 00:16:36:15

bank selection.

00:16:36:15 - 00:16:40:09

In this case, it's only suggested that we support one bank,

00:16:40:09 - 00:16:44:08

and the most popular bank. Bank, maybe HSBC, because that's where my money's,

00:16:44:08 - 00:16:48:24

the authorization. So obviously the redirect and authorization flow,

00:16:48:24 - 00:16:52:04

balance display and then confirmation success.

00:16:52:04 - 00:16:52:16

So

00:16:52:16 - 00:16:54:08

the account is connected to that the

00:16:54:08 - 00:16:57:08

use a workflow that it's it's worked out for me. That

00:16:57:08 - 00:17:00:21

just about seems right. There isn't anything there that doesn't seem missing.

00:17:00:21 - 00:17:06:12

And then the scopes are what to exclude transact in history categories,

00:17:06:12 - 00:17:08:14

push notifications, manual

00:17:08:14 - 00:17:10:00

account input or anything.

00:17:10:00 - 00:17:11:08

Now that's pretty cool.

00:17:11:08 - 00:17:11:24

The

00:17:11:24 - 00:17:14:09

what's included I mean I could include

00:17:14:09 - 00:17:18:11

probably should include the ability to click on my account once it's collected.

00:17:18:11 - 00:17:19:08

So I can go see

00:17:19:08 - 00:17:20:23

transactions that would be useful.

00:17:20:23 - 00:17:24:05

So I might want to reach a few of these things around,

00:17:24:05 - 00:17:26:09

and excuse me, of nonfunctional

00:17:26:09 - 00:17:27:24

requirements as well.

00:17:27:24 - 00:17:29:09

And then

00:17:29:09 - 00:17:32:10

the success criteria, the post MVP

00:17:32:10 - 00:17:33:14

features as well.

00:17:33:14 - 00:17:36:14

So that's really cool. It's coming on now and I, I've actually have some

00:17:36:14 - 00:17:39:09

I've got something to guide me as I go in, but

00:17:39:09 - 00:17:40:02

don't stop that.

00:17:40:08 - 00:17:40:24

Keep going.

00:17:40:24 - 00:17:46:07

Now I've got this basic info. I can now put that into another template.

00:17:46:07 - 00:17:54:04

Another prompt that will give me a more detailed PR and I specifically want it in this format. So the concept

00:17:54:04 - 00:17:55:06

it's got that already

00:17:55:06 - 00:17:57:11

the core MVP's. We've already done that.

00:17:57:11 - 00:17:59:07

The simple step by step workflow.

00:17:59:07 - 00:18:00:21

And then what is the scope.

00:18:00:21 - 00:18:01:08

So

00:18:01:08 - 00:18:04:01

it then does that. And as you would expect it gives me

00:18:04:01 - 00:18:04:20

the

00:18:04:20 - 00:18:05:14

full on

00:18:05:14 - 00:18:08:14

pretty document that it's actually quite neat.

00:18:08:14 - 00:18:10:14

So that's fairly cool.

00:18:10:14 - 00:18:11:01

That's

00:18:11:01 - 00:18:16:20

a process that we go to to get the PID. I mean, doesn't there's going to be any questions there, but any questions just before

00:18:16:20 - 00:18:18:21

I move on to the next little bit of my workflow.

00:18:18:23 - 00:18:20:21

So this is what you do with

00:18:20:21 - 00:18:22:09

a new client. The

00:18:22:09 - 00:18:26:07

brand you want to work on this ten day or two five days sprint.

00:18:26:07 - 00:18:29:17

Yeah. This is the process that you go with the client together.

00:18:29:17 - 00:18:30:20

Yeah. Interesting.

00:18:30:20 - 00:18:32:02

Yeah. So cool.

00:18:32:02 - 00:18:33:05

We can work out.

00:18:33:05 - 00:18:34:22

It's not just me,

00:18:34:22 - 00:18:36:13

you know, determining

00:18:36:13 - 00:18:39:18

the features, that are in scope or out of scope.

00:18:39:18 - 00:18:42:05

It's a conversation with a client. So we have like a

00:18:42:05 - 00:18:43:13

it's very involved.

00:18:43:13 - 00:18:46:04

If they want something that is out of scope

00:18:46:04 - 00:18:48:04

or in the future, we can move it up

00:18:48:04 - 00:18:50:09

and then we can take things out of scope

00:18:50:09 - 00:18:53:06

and put them into scope and vice versa. Right.

00:18:53:06 - 00:18:54:15

But

00:18:54:15 - 00:18:56:21

we have to think about the ten days. So

00:18:56:21 - 00:18:58:19

I doesn't really do

00:18:58:19 - 00:19:00:05

it doesn't really

00:19:00:05 - 00:19:02:04

calculate how long things are going to take

00:19:02:04 - 00:19:02:19

to build.

00:19:02:19 - 00:19:03:18

So you have to,

00:19:03:18 - 00:19:06:07

you know, do that yourself and have that in mind.

00:19:06:07 - 00:19:09:18

If I ask the how long this would take you, it would give me

00:19:09:18 - 00:19:11:07

completely off,

00:19:11:07 - 00:19:17:10

of timings. So you have to work that out yourself. And that's where you need a little bit of experience. So,

00:19:17:10 - 00:19:18:19

so let's say you, you can't

00:19:18:19 - 00:19:19:19

take out the

00:19:19:19 - 00:19:24:03

technical architect or the developer or a CTO person, technical person.

00:19:24:05 - 00:19:25:20

You need to be able to have that

00:19:25:20 - 00:19:28:13

level of understanding to estimate this. But

00:19:28:13 - 00:19:32:07

here what we end up is, is a good set of features. And then

00:19:32:07 - 00:19:33:07

a discussion

00:19:33:07 - 00:19:37:12

ideation creation phase with the client that really feels really good.

00:19:37:12 - 00:19:39:08

Yeah. That was one of my initial,

00:19:39:08 - 00:19:41:16

questions that you sort of answer is that

00:19:41:16 - 00:19:43:01

when you ask to

00:19:43:01 - 00:19:44:18

map out the MVP

00:19:44:18 - 00:19:49:20

that you can deliver in ten days, what is the ten days like, how many of these

00:19:49:20 - 00:19:51:09

development days, how many of

00:19:51:09 - 00:19:53:11

these ideas, how many of this

00:19:53:11 - 00:19:54:09

workshopping days?

00:19:54:09 - 00:19:55:13

I think that's just a

00:19:55:13 - 00:19:55:20

a

00:19:55:20 - 00:20:00:03

piece. The output, such a fuzzy output and union. Typically some

00:20:00:03 - 00:20:04:01

experience will come in and basically figure out the output

00:20:04:01 - 00:20:04:20

of that there.

00:20:04:20 - 00:20:06:09

I suggest to you,

00:20:06:09 - 00:20:08:11

but filtered it down to actually

00:20:08:11 - 00:20:11:02

be able to deliver within ten days.

00:20:11:02 - 00:20:13:21

Yeah, 100%. Yeah. And a lot of the times,

00:20:13:21 - 00:20:15:22

you know, in the teams that I've worked in, it's,

00:20:15:22 - 00:20:20:23

you know, although people love the word phrase agile, you know, everyone's say I want to be agile.

00:20:20:23 - 00:20:23:14

And that means the designer and developer working together,

00:20:23:14 - 00:20:27:06

at exactly the same time. Right. And producing. But

00:20:27:06 - 00:20:32:23

it's not always possible for that to happen. It is. Developer could be working on something completely else

00:20:32:23 - 00:20:37:21

set up, you know, the infrastructure. And then a designer is working for a day or two

00:20:37:21 - 00:20:38:08

on

00:20:38:08 - 00:20:39:10

the design

00:20:39:10 - 00:20:40:18

structure, the set up.

00:20:40:18 - 00:20:43:12

So things like the fonts, the guide, the colors,

00:20:43:12 - 00:20:44:02

you know,

00:20:44:02 - 00:20:46:12

doing some initial concept for components,

00:20:46:12 - 00:20:52:01

in terms of breadth first kind of thinking at the atoms and getting those things going,

00:20:52:01 - 00:20:54:04

and then the developer coming on in day

00:20:54:04 - 00:20:58:00

and day three, for example. Now we're already in day three. So, you know,

00:20:58:00 - 00:20:58:08

we

00:20:58:08 - 00:21:00:06

so now we have to get moving.

00:21:00:06 - 00:21:00:18

So

00:21:00:18 - 00:21:07:20

it has to you know, you really do have to have people who understand timing and concept to be able to work in that time, day. So

00:21:07:20 - 00:21:08:08

you know

00:21:08:08 - 00:21:10:01

what it gave me for

00:21:10:01 - 00:21:10:22

the scope.

00:21:10:22 - 00:21:13:11

This is why I said, you know, maybe we could put

00:21:13:11 - 00:21:16:11

when I click on a card, I have all my transactions listed

00:21:16:11 - 00:21:17:04

for the month,

00:21:17:04 - 00:21:18:09

but maybe we can't.

00:21:18:10 - 00:21:21:15

Maybe it's a stretch goal, so we'd have to see how that works, but

00:21:21:15 - 00:21:22:01

that

00:21:22:01 - 00:21:23:00

it kind of,

00:21:23:00 - 00:21:23:24

you know, felt like a

00:21:23:24 - 00:21:29:11

decent MVP and it's kind of given is a good list. So this is what we would do. And we'd get to this bit

00:21:29:11 - 00:21:30:11

and then we would

00:21:30:11 - 00:21:33:13

move on to a little bit more deeper investigation.

00:21:33:13 - 00:21:37:10

What I mean by that is then

00:21:37:10 - 00:21:40:20

I go and take this pre

00:21:40:20 - 00:21:41:15

and now

00:21:41:15 - 00:21:42:20

we have a different prompt.

00:21:42:22 - 00:21:44:14

And I'm also here using,

00:21:44:14 - 00:21:45:17

two point flash,

00:21:45:17 - 00:21:47:06

2.5 flash for

00:21:47:06 - 00:21:47:23

reasoning

00:21:47:23 - 00:21:50:24

because I really want it to not just spit out something,

00:21:50:24 - 00:21:54:07

I want it to think about what it's doing and come back to things and,

00:21:54:07 - 00:21:56:18

and really give me a response where

00:21:56:18 - 00:21:57:14

it's kind of

00:21:57:14 - 00:22:01:12

gone from the beginning to the end and back to the beginning and reviewed everything again

00:22:01:12 - 00:22:02:21

so that this makes sense.

00:22:02:21 - 00:22:03:15

So now

00:22:03:15 - 00:22:07:22

what we're doing here is the technical part of it as a software engineer.

00:22:07:22 - 00:22:08:14

So

00:22:08:14 - 00:22:10:12

this is the this is the part where

00:22:10:12 - 00:22:11:21

often in

00:22:11:21 - 00:22:13:14

the the real world,

00:22:13:14 - 00:22:15:04

in the traditional agency,

00:22:15:04 - 00:22:21:07

projects are already being sold in and there's some thinking gone into it, there's a design and a concept,

00:22:21:07 - 00:22:22:00

and

00:22:22:00 - 00:22:23:11

the agency will then

00:22:23:11 - 00:22:26:20

find a developer in the agency and put this on their desk.

00:22:26:22 - 00:22:29:09

And this is how it happens. It's like there has been no

00:22:29:09 - 00:22:32:17

input or conversation with the developer to ask,

00:22:32:17 - 00:22:35:17

how might this come to shape from day one?

00:22:35:17 - 00:22:38:16

There is already a lot of design and thinking going into it, so

00:22:38:16 - 00:22:41:14

what would happen is a developer will then pick this up and think,

00:22:41:14 - 00:22:43:11

okay, how would I actually do this?

00:22:43:11 - 00:22:44:22

Like what are the

00:22:44:22 - 00:22:49:13

what's the tech stack? You know, what's the front end stack? What's the backend stack libraries?

00:22:49:13 - 00:22:50:20

What are we going to use.

00:22:50:20 - 00:22:57:14

And then looking at the design, how is that going to come together? Is it even possible. Do we need to change things. So

00:22:57:14 - 00:22:58:09

this prompt

00:22:58:09 - 00:23:02:10

and what this does, it really helps to do that design part.

00:23:02:10 - 00:23:04:07

But technical design, think about

00:23:04:07 - 00:23:08:18

the frontend the architecture and the libraries that it needs to do this.

00:23:08:18 - 00:23:09:09

Now

00:23:09:09 - 00:23:11:20

part of this what I've given it is the

00:23:11:20 - 00:23:12:20

document that we

00:23:12:20 - 00:23:16:23

created in the previous step. So I haven't changed that. So I've just put that straight in.

00:23:16:23 - 00:23:20:06

And what I've asked it to do

00:23:20:06 - 00:23:22:05

is to give me an output.

00:23:22:05 - 00:23:23:08

Your design is

00:23:23:08 - 00:23:24:21

to give me a step by step,

00:23:24:21 - 00:23:28:14

but in a way that it can be implemented by a developer, a coding assistant.

00:23:28:14 - 00:23:30:00

So don't generate code.

00:23:30:00 - 00:23:32:12

You have to specifically put that in. Otherwise it would start

00:23:32:12 - 00:23:35:23

generating code here. And all we want it to do is think about the code

00:23:35:23 - 00:23:37:14

and what I want

00:23:37:14 - 00:23:41:02

for it to do is to break it down into small modules,

00:23:41:02 - 00:23:44:04

that it can then pick up module by module

00:23:44:04 - 00:23:45:05

and then develop.

00:23:45:07 - 00:23:47:21

So what I want is the title of the module goal,

00:23:47:21 - 00:23:52:16

what tech is being use what libraries and then some implementation notes and considerations.

00:23:52:16 - 00:23:53:21

So I give it a format.

00:23:53:21 - 00:23:55:14

And then we say

00:23:55:14 - 00:23:56:22

when you've design the solution

00:23:56:22 - 00:24:00:11

go back and do a compatibility, audit of all the libraries

00:24:00:11 - 00:24:05:20

so that there's no conflicts. And no vulnerabilities that we know of that exist by using anything that

00:24:05:20 - 00:24:06:24

we're specifying here.

00:24:06:24 - 00:24:08:21

This is important, I think, because

00:24:08:21 - 00:24:13:06

obviously this is not real time. This is all based on a cut off dates,

00:24:13:06 - 00:24:18:02

and things, you know, you have to check what it's recommending, whether things are

00:24:18:02 - 00:24:23:15

the latest libraries or not. And, you know, you don't want to be using a library that has two major versions of it,

00:24:23:15 - 00:24:24:15

because

00:24:24:15 - 00:24:26:05

things would have been fixed by then.

00:24:26:05 - 00:24:28:06

So, yeah, it's always best to check that

00:24:28:06 - 00:24:30:18

it won't give you the latest. So you going to have to

00:24:30:18 - 00:24:33:13

do some checking and then do some redefinition.

00:24:33:13 - 00:24:36:17

And I'll show you that in here, because this is exactly what happened.

00:24:36:17 - 00:24:37:05

So

00:24:37:05 - 00:24:40:23

what it will then do. So it comes back as module one. So this is

00:24:40:23 - 00:24:42:23

typically over sets up on the tooling.

00:24:43:00 - 00:24:45:04

And the goal is just to initialize the project,

00:24:45:04 - 00:24:45:23

established

00:24:45:23 - 00:24:48:16

the development environment, install the dependencies

00:24:48:16 - 00:24:53:08

the versions and just the basic structure of the project and what it needs.

00:24:53:08 - 00:24:54:20

And this is classic what happens

00:24:54:20 - 00:24:56:20

to developers when we pick up a project.

00:24:56:20 - 00:25:00:07

This is exactly the thing that we need to do. We need to be able to go and

00:25:00:07 - 00:25:03:02

figure out what are the libraries that we're going to be using.

00:25:03:02 - 00:25:07:13

You know, I need to make API calls. I need to fetch data, I need to cash it.

00:25:07:13 - 00:25:11:13

What's the best library to use? You know, it's come back here and it's

00:25:11:13 - 00:25:13:13

it's telling me we're going to use react.

00:25:13:13 - 00:25:19:20

Because I didn't give it specifically what I wanted it to use, but it's it's assumed react.

00:25:19:20 - 00:25:21:22

And it's given me all the libraries.

00:25:21:22 - 00:25:25:08

Now it's giving me version number so I can go off and check what that is.

00:25:25:08 - 00:25:26:21

React.

00:25:26:21 - 00:25:27:12

And

00:25:27:12 - 00:25:29:00

I just mentioned about versions

00:25:29:00 - 00:25:34:10

react. It says we are using React Native 074

00:25:34:10 - 00:25:35:22

and react

00:25:35:22 - 00:25:40:00

18.2. They're not the latest versions of react is on 19. So

00:25:40:00 - 00:25:40:21

you have to,

00:25:40:21 - 00:25:42:04

you know, be able to go in and check.

00:25:42:04 - 00:25:44:02

But at least you now have the info here

00:25:44:02 - 00:25:46:15

to go and check what they are. You can go look them up,

00:25:46:15 - 00:25:48:14

and then redefine those.

00:25:48:14 - 00:25:51:21

But it also gives me some notes as well. Now

00:25:51:21 - 00:25:53:17

these are going to mean nothing to you

00:25:53:17 - 00:25:55:00

right now, but

00:25:55:00 - 00:25:57:03

the idea is that these go in

00:25:57:03 - 00:26:02:14

into cursor, and then cursor will be able to read these, interpret them and follow the instructions.

00:26:02:14 - 00:26:04:09

Which is pretty awesome because

00:26:04:09 - 00:26:07:23

99% of people who use cursor when they build it and you

00:26:07:23 - 00:26:09:04

use it to create code,

00:26:09:04 - 00:26:14:16

they won't give it any of this information, so it won't know and it will just do whatever it thinks it wants to do.

00:26:14:16 - 00:26:19:01

So it goes through and then we start looking at module

00:26:19:01 - 00:26:20:24

two. So that's the next chunk.

00:26:20:24 - 00:26:23:17

It's going to start building. It's defined out the welcome

00:26:23:17 - 00:26:25:00

the navigation set up.

00:26:25:00 - 00:26:26:15

And again it's got input

00:26:26:15 - 00:26:28:17

implementation notes and considerations.

00:26:28:17 - 00:26:31:13

And then the libraries as well. And these are the same libraries that

00:26:31:13 - 00:26:34:19

should be mentioned above here. So we don't need to

00:26:34:19 - 00:26:37:02

it won't re install them, but

00:26:37:02 - 00:26:39:09

and I probably take these out of the notes.

00:26:39:11 - 00:26:42:22

But what it means is actually I can just scroll up and have a look and make sure

00:26:42:22 - 00:26:43:09

that

00:26:43:09 - 00:26:46:08

it's not suddenly specified a different version,

00:26:46:08 - 00:26:50:11

which it shouldn't have done. But just in case, I can now see that, you know, we're still

00:26:50:11 - 00:26:52:11

using the same library, so we're not going to

00:26:52:11 - 00:26:55:04

introduce any conflicts, which is really important.

00:26:55:04 - 00:27:01:21

So yeah, this prompt will then go through it, breaks it down into how many modules or we got a module for

00:27:01:21 - 00:27:03:17

module five,

00:27:03:17 - 00:27:04:15

six,

00:27:04:15 - 00:27:06:03

and then seven.

00:27:06:03 - 00:27:07:09

So seven is

00:27:07:09 - 00:27:10:23

the end of this is, is quite important because this is the Polish.

00:27:10:23 - 00:27:14:14

This is, this is all the things that

00:27:14:14 - 00:27:19:14

we probably don't do, when we're building things. So we're going back and looking at,

00:27:19:14 - 00:27:21:23

you know, the files, making sure the

00:27:21:23 - 00:27:27:05

code is, is clean. Looking at security, things like that,

00:27:27:05 - 00:27:32:09

and making sure that this thing is safe and secure to use and your keys aren't going to get exposed and things you it

00:27:32:09 - 00:27:33:10

and get lost.

00:27:33:10 - 00:27:33:21

So

00:27:33:21 - 00:27:36:21

that's really cool. So now I've got that I kind of leave that here.

00:27:36:21 - 00:27:39:15

And then the other detailed one

00:27:39:15 - 00:27:42:01

thing is in in another project,

00:27:42:01 - 00:27:43:23

this is where we assume

00:27:43:23 - 00:27:44:23

you lovely people.

00:27:44:23 - 00:27:47:15

You are an expert mobile app, web app, UX designer.

00:27:47:15 - 00:27:52:20

Now, I'm not a UX designer. I'm not a designer. But the tools are now here to help me learn.

00:27:52:20 - 00:27:55:14

So I'm. I'm kind of learning, but I put this together

00:27:55:14 - 00:27:56:22

to help me figure out,

00:27:56:22 - 00:27:58:21

and just start basically with a

00:27:58:21 - 00:28:00:17

a user flow.

00:28:00:17 - 00:28:01:13

Just put that

00:28:01:13 - 00:28:05:00

for me and get that, get that going so I can start thinking about it.

00:28:05:00 - 00:28:09:18

But it also includes some of the, the labels, you know, the default labels

00:28:09:18 - 00:28:11:12

for form fields, some of the

00:28:11:12 - 00:28:12:22

actions, the action labels.

00:28:12:22 - 00:28:15:19

So if I click something what's the label? And

00:28:15:19 - 00:28:17:03

this prompt will help me

00:28:17:03 - 00:28:18:21

help me do that. So again

00:28:18:21 - 00:28:23:07

I ask it pretty much the same thing. Break this down into small,

00:28:23:07 - 00:28:24:19

shippable chunks

00:28:24:19 - 00:28:27:09

and it pretty much comes back with the same

00:28:27:09 - 00:28:29:03

modules and chunks that

00:28:29:03 - 00:28:31:05

the technical one did, which is pretty cool.

00:28:31:05 - 00:28:32:15

So

00:28:32:15 - 00:28:34:05

again, I give it the MVP.

00:28:34:05 - 00:28:35:10

The PR document

00:28:35:10 - 00:28:37:16

and then what it does,

00:28:37:16 - 00:28:38:08

it

00:28:38:08 - 00:28:39:07

gives me,

00:28:39:07 - 00:28:39:21

my.

00:28:39:21 - 00:28:40:08

So

00:28:40:08 - 00:28:42:16

Gemini doesn't do graphs. Bruno.

00:28:42:16 - 00:28:44:18

Which ChatGPT does a better job at

00:28:44:18 - 00:28:46:21

it, but I can see my code snippet here, and it

00:28:46:21 - 00:28:51:16

doesn't make a great deal of sense, but you can work it out. It's given me an overall user flow,

00:28:51:16 - 00:28:52:21

for the app.

00:28:53:00 - 00:28:56:22

So I get I've got my welcome screen, I've got tap connect

00:28:56:22 - 00:28:58:00

your bank button.

00:28:58:00 - 00:29:00:10

And then I get this bank selection,

00:29:00:10 - 00:29:02:15

it shows me the supported banks

00:29:02:15 - 00:29:06:21

and then it takes me to the web. Web flow for authorization.

00:29:06:21 - 00:29:10:16

There's a success message once I've authorized,

00:29:10:16 - 00:29:12:20

and I've come back, data is retrieved,

00:29:12:20 - 00:29:13:17

and

00:29:13:17 - 00:29:16:12

bank balance and space green shows balance and success.

00:29:16:12 - 00:29:17:02

And then

00:29:17:02 - 00:29:21:06

end user remains on the balance screen because there's nothing else you can do. That's the MVP.

00:29:21:06 - 00:29:24:23

So it's kind of giving me that user flow which is pretty nice.

00:29:24:23 - 00:29:26:16

And then screen by screen

00:29:26:16 - 00:29:29:24

it gives me a breakdown. It gives me a description of what this screen is,

00:29:29:24 - 00:29:31:09

the key UI elements.

00:29:31:09 - 00:29:32:10

There's a logo,

00:29:32:10 - 00:29:35:09

there's a tagline, and there's a primary CTA.

00:29:35:09 - 00:29:38:13

Tap the button labeled connect your Bank. Action

00:29:38:13 - 00:29:40:19

navigates the user to the bank selection screen.

00:29:40:19 - 00:29:43:11

And then there's a user flow, for that screen.

00:29:43:11 - 00:29:45:19

The next one is the bank selection screen.

00:29:45:19 - 00:29:46:16

And,

00:29:46:16 - 00:29:47:12

I won't

00:29:47:12 - 00:29:49:04

go through all that completely.

00:29:49:04 - 00:29:50:00

And then there's the

00:29:50:00 - 00:29:52:02

main balance display screen

00:29:52:02 - 00:29:53:13

and what that looks like.

00:29:53:13 - 00:29:54:11

So that's pretty

00:29:54:11 - 00:29:57:22

kind of the nuts and bolts of the design kind of flow as well.

00:29:57:22 - 00:29:58:21

So I've now got

00:29:58:21 - 00:30:02:00

some guidelines, for my

00:30:02:00 - 00:30:02:16

from my

00:30:02:16 - 00:30:04:15

to my agent, cursor

00:30:04:15 - 00:30:10:22

to follow. It knows what I want on the screens and it, it can take that. And I'm going to generate those screens

00:30:10:22 - 00:30:11:14

so

00:30:11:14 - 00:30:12:02

that

00:30:12:02 - 00:30:14:09

provides me overall with documentation.

00:30:14:09 - 00:30:15:21

So I've got tech, I've got

00:30:15:21 - 00:30:16:22

quite a detailed

00:30:16:22 - 00:30:18:20

tech document and I've got fairly

00:30:18:20 - 00:30:19:12

okay

00:30:19:12 - 00:30:22:00

user flows in here to to start off with.

00:30:22:00 - 00:30:23:12

There any any questions. So

00:30:23:12 - 00:30:25:09

that's very cool. So for you

00:30:25:09 - 00:30:29:21

use how many agent a senior developer a senior UX here

00:30:29:21 - 00:30:30:10

and

00:30:30:10 - 00:30:32:01

and brainstorm

00:30:32:01 - 00:30:35:02

yeah a brainstorm. So my first one was

00:30:35:02 - 00:30:37:18

just generally it's like a

00:30:37:18 - 00:30:39:10

product ideation assistance.

00:30:39:10 - 00:30:40:24

Exactly. Yeah. Yeah. Okay.

00:30:40:24 - 00:30:42:09

A brainstorm, a who can write

00:30:42:09 - 00:30:42:23

who's right.

00:30:42:23 - 00:30:43:19

That's great.

00:30:43:19 - 00:30:44:22

So that's my team.

00:30:44:24 - 00:30:48:21

So we've got we've got an idea of this thing now. And

00:30:48:21 - 00:30:49:10

you know,

00:30:49:10 - 00:30:50:22

if I was now to

00:30:50:22 - 00:30:51:15

take it

00:30:51:15 - 00:30:53:13

into cursor,

00:30:53:13 - 00:30:54:15

I'd have a pretty

00:30:54:15 - 00:30:55:05

good

00:30:55:05 - 00:30:57:18

place to start with. And what I would doing

00:30:57:18 - 00:30:58:22

in cursor.

00:30:58:22 - 00:31:00:13

And I'm sure you've seen all these,

00:31:00:13 - 00:31:02:03

those of you who,

00:31:02:03 - 00:31:06:16

use cursor. I've seen it, but you can, you can have,

00:31:06:16 - 00:31:10:10

you can have an instructions file or a cursor rules file where you can

00:31:10:10 - 00:31:13:17

start filling out that information and put it into here.

00:31:13:17 - 00:31:15:18

So I've left this perfect purposely

00:31:15:18 - 00:31:18:20

templated. But this is what I'll be using for my app. So

00:31:18:20 - 00:31:21:24

it's, I'm giving it my concept, an overview here.

00:31:21:24 - 00:31:25:17

And then you will be using so this will be the tech stack

00:31:25:17 - 00:31:29:15

and then core functionality. So I'm going to define the task.

00:31:29:15 - 00:31:32:19

And then I'm going to take the user journey from that.

00:31:32:21 - 00:31:34:13

From what it's given me and put it

00:31:34:13 - 00:31:38:07

in here for each of my core functionality. Core features.

00:31:38:07 - 00:31:43:17

And then down here I will have some code examples. So if there's anything specific that I need,

00:31:43:17 - 00:31:45:22

the, you know, perhaps from,

00:31:45:22 - 00:31:47:19

the Apple documentation

00:31:47:19 - 00:31:48:17

or is,

00:31:48:17 - 00:31:50:04

you know, something that

00:31:50:04 - 00:31:53:24

is custom that it can't do? I will put it in here for reference.

00:31:54:01 - 00:31:54:18

And then

00:31:54:18 - 00:31:59:21

you can have cursor look at this to keep on track. So you can constantly say,

00:31:59:21 - 00:32:00:23

you know, review

00:32:00:23 - 00:32:05:08

task two and the implementation steps and it will go back and have a look at it.

00:32:05:08 - 00:32:08:11

The way you do that is if you, you can have

00:32:08:11 - 00:32:12:22

a context here. So if you do have documentation or if you want it to have a look at

00:32:12:22 - 00:32:13:17

a component,

00:32:13:17 - 00:32:14:10

you can

00:32:14:10 - 00:32:16:24

you can just do that ampersand and,

00:32:16:24 - 00:32:20:00

you know, give it some context, the file so you can search for a file.

00:32:20:02 - 00:32:23:05

You've got some code. There might be a filing a machine that you have

00:32:23:05 - 00:32:25:23

get repos and docs you can point to at it.

00:32:25:23 - 00:32:27:24

And then that refreshes its context.

00:32:27:24 - 00:32:30:09

So how would you, for example, right now

00:32:30:09 - 00:32:31:09

refer to

00:32:31:09 - 00:32:34:01

instructions in the and core functionality?

00:32:34:01 - 00:32:35:16

Yeah. You could just say,

00:32:35:16 - 00:32:37:11

instructions. And so just like that

00:32:37:11 - 00:32:39:01

got it correct.

00:32:39:03 - 00:32:40:01

Let's build

00:32:40:01 - 00:32:43:16

I'm not going to hit return but let's start building

00:32:43:16 - 00:32:44:12

task. What

00:32:44:12 - 00:32:45:03

am.

00:32:45:03 - 00:32:46:24

And then it will keep it into task one.

00:32:46:24 - 00:32:51:17

So you could do it that way. Now what I have been doing, what I've just found,

00:32:51:17 - 00:32:56:04

it's a project management tool, which,

00:32:56:04 - 00:32:58:06

there's loads of, but

00:32:58:06 - 00:32:59:23

one I've just started playing with.

00:32:59:23 - 00:33:01:16

Is this one called,

00:33:01:16 - 00:33:02:16

it's,

00:33:02:16 - 00:33:06:16

called dart. I, I don't know if you've heard of Dot. I, it's a,

00:33:06:16 - 00:33:08:14

it's dotcom and

00:33:08:14 - 00:33:11:18

this, it's just like any other project management tool. But

00:33:11:18 - 00:33:15:04

what this has allowed me to do is configure.

00:33:15:04 - 00:33:18:11

It's got MCP right. It supports MCP.

00:33:18:11 - 00:33:19:04

So

00:33:19:04 - 00:33:22:08

model context protocol MCP allows

00:33:22:08 - 00:33:24:17

AI agents to

00:33:24:17 - 00:33:25:22

talk to other

00:33:25:22 - 00:33:26:12

products.

00:33:26:15 - 00:33:28:19

So it's kind of like an a API

00:33:28:19 - 00:33:30:06

to connect to another API

00:33:30:06 - 00:33:31:18

and do things and give them

00:33:31:18 - 00:33:33:20

API context and awareness.

00:33:33:20 - 00:33:34:14

So

00:33:34:14 - 00:33:37:03

what I I'm going to do,

00:33:37:03 - 00:33:38:11

it's a bit of a live demo.

00:33:38:11 - 00:33:39:01

I've

00:33:39:01 - 00:33:40:23

queued this up in ChatGPT

00:33:40:23 - 00:33:43:06

because I've got dart installed here as a,

00:33:43:06 - 00:33:44:04

as a GPT,

00:33:44:04 - 00:33:45:11

which is pretty nice. So I've got

00:33:45:11 - 00:33:48:19

ChatGPT, you can have a go to GPT, TS and dart.

00:33:48:19 - 00:33:49:19

They have made a GPT

00:33:49:19 - 00:33:51:16

that allows you to take

00:33:51:16 - 00:33:52:13

stuff from

00:33:52:13 - 00:33:56:12

anything you've generated and throw it straight into the into the project. So

00:33:56:12 - 00:33:58:20

what I'm doing here is I'm just saying

00:33:58:20 - 00:34:05:02

create a new dart board called Veloso and add each chunk as new tasks, save a chunk informations item and description.

00:34:05:02 - 00:34:06:11

Now these chunks are from

00:34:06:11 - 00:34:08:00

the design brief that I created, right?

00:34:08:00 - 00:34:09:04

So I've just cut and pasted

00:34:09:04 - 00:34:10:18

from the

00:34:10:18 - 00:34:11:07

one.

00:34:11:07 - 00:34:12:03

There's two,

00:34:12:03 - 00:34:16:22

that's three. And what I'm now going to do I'm just going to hit enter. Let's see if it works.

00:34:16:22 - 00:34:17:20

It's a live demo.

00:34:17:22 - 00:34:19:05

Now it's going to connect.

00:34:19:05 - 00:34:21:16

It's connecting. Just like a piece of code would

00:34:21:16 - 00:34:23:07

connect to an API. All right,

00:34:23:07 - 00:34:26:11

we're already authenticated. I've set this up. It's got my API key

00:34:26:11 - 00:34:27:11

in the dart

00:34:27:11 - 00:34:28:00

GPT.

00:34:28:00 - 00:34:31:03

But that means now I can

00:34:31:03 - 00:34:33:14

send stuff to dart as task just using,

00:34:33:14 - 00:34:34:07

prompts,

00:34:34:07 - 00:34:35:07

which is really neat.

00:34:35:07 - 00:34:36:09

Okay.

00:34:36:09 - 00:34:36:24

So.

00:34:36:24 - 00:34:40:04

And number three. So let's go and see what it's done

00:34:40:04 - 00:34:43:18

now is that there is a bug with this. It's not perfect.

00:34:43:18 - 00:34:44:15



00:34:44:15 - 00:34:46:22

If I now go in there we go. Oh see

00:34:46:22 - 00:34:49:01

automatically it's now there. Right. So

00:34:49:01 - 00:34:51:07

I now have this task called Welcome screen

00:34:51:07 - 00:34:52:14

not assigned to anyone.

00:34:52:14 - 00:34:54:19

Priority one. It's got everything that

00:34:54:19 - 00:34:55:19

I prompted into it.

00:34:55:19 - 00:34:56:04

Right.

00:34:56:04 - 00:34:57:00

And

00:34:57:00 - 00:34:58:20

what I can do from here.

00:34:58:20 - 00:34:59:13

Which is

00:34:59:13 - 00:35:01:23

really neat. I can now go into

00:35:01:23 - 00:35:02:19

cursor.

00:35:02:19 - 00:35:04:15

And this is the reason why I set this up,

00:35:04:15 - 00:35:05:14

a little differently.

00:35:05:14 - 00:35:07:01

But the cursor settings

00:35:07:01 - 00:35:07:17

and

00:35:07:17 - 00:35:09:09

cursor supports MCP

00:35:09:09 - 00:35:10:04

and

00:35:10:04 - 00:35:15:18

what it will do, I've got and dart configured here. So now in cursor I can say

00:35:15:18 - 00:35:19:05

go to my dart board and get the tasks, get task one

00:35:19:05 - 00:35:20:12

and it will read it from

00:35:20:12 - 00:35:22:01

the task management tool.

00:35:22:01 - 00:35:25:20

And I will only work on that. And when it's done I can say when you're done

00:35:25:20 - 00:35:26:19

market is done,

00:35:26:19 - 00:35:27:21

which is really nice,

00:35:27:21 - 00:35:31:21

really cool. I'm not going to do that yet because I don't have my cursor set up, but

00:35:31:21 - 00:35:35:14

there's not. That's that really cool integration. Now, as cursor moves

00:35:35:14 - 00:35:40:22

through feature one, feature two, it can now just pick up this welcome screen

00:35:40:22 - 00:35:43:17

and work through it, and then set it to done,

00:35:43:17 - 00:35:44:19

which is really nice.

00:35:44:19 - 00:35:45:20

And that's it done.

00:35:45:20 - 00:35:47:17

And then I can ask it to come back

00:35:47:17 - 00:35:48:10

and pick up

00:35:48:10 - 00:35:49:16

the main balance card

00:35:49:16 - 00:35:52:00

and start working through that. And in the ticket

00:35:52:00 - 00:35:55:02

it has the reference documents, it has the UI,

00:35:55:02 - 00:35:56:04

what it needs.

00:35:56:04 - 00:36:01:00

And then I will add to this, and this is the reason why I've put it here, because I can come back to here

00:36:01:00 - 00:36:03:21

and edit and add things as I'm working on it offline.

00:36:03:23 - 00:36:09:04

I can add detail in here before I get into cursor to code it. I can actually go in and sync

00:36:09:04 - 00:36:10:17

and finesse these tickets

00:36:10:17 - 00:36:14:17

and then I can. Then once it's done, I can go back into cursor,

00:36:14:17 - 00:36:16:20

and

00:36:16:20 - 00:36:20:12

get to get my items. So let me just say get

00:36:20:12 - 00:36:21:12

tasks

00:36:21:12 - 00:36:22:06

from

00:36:22:06 - 00:36:23:09

boom boom boom,

00:36:23:09 - 00:36:24:15

from

00:36:24:15 - 00:36:25:08

dart.

00:36:29:10 - 00:36:30:19

Show me a list.

00:36:30:21 - 00:36:32:06

Okay. I run the tool.

00:36:32:06 - 00:36:33:18

There you go. They're now available here.

00:36:33:18 - 00:36:34:06

But it's actually

00:36:34:06 - 00:36:35:10

for a different project.

00:36:35:10 - 00:36:36:19

It's pulled. All of them, actually,

00:36:36:19 - 00:36:39:05

there are some here that not part project. So

00:36:39:05 - 00:36:42:20

what you can see there is main balance display. That's that's part of this

00:36:42:20 - 00:36:45:00

bank selection screen. That's part of this project.

00:36:45:00 - 00:36:48:02

Optimizing pricing tiers and website is not part of the project.

00:36:48:02 - 00:36:49:20

So maybe I didn't filter it properly,

00:36:49:20 - 00:36:51:00

but that's in a different,

00:36:51:00 - 00:36:52:18

different board here where I've got these

00:36:52:18 - 00:36:53:21

these tickets here

00:36:53:21 - 00:36:57:09

generally I've got them here. So if there was a filter that I didn't put in, but

00:36:57:09 - 00:36:58:21

you can see how now

00:36:58:21 - 00:36:59:17

you've got

00:36:59:17 - 00:37:02:04

the info, all these tools connected

00:37:02:04 - 00:37:05:12

and now all of a sudden cursor become that one place where

00:37:05:12 - 00:37:06:14

you can really,

00:37:06:14 - 00:37:07:16

you know, start building.

00:37:07:16 - 00:37:09:09

And this is really important to do

00:37:09:09 - 00:37:10:11

that pre-work

00:37:10:11 - 00:37:14:17

and have this ready for when you come into a sorry and start picking up

00:37:14:17 - 00:37:15:09

tickets,

00:37:15:09 - 00:37:20:10

and working through those tickets and then getting costs such as to go back into the tool and

00:37:20:10 - 00:37:21:01

hit done

00:37:21:01 - 00:37:22:18

or add notes, because you could,

00:37:22:18 - 00:37:25:00

you know, you could have somebody else teaming up with you.

00:37:25:00 - 00:37:25:17

And

00:37:25:17 - 00:37:27:20

it's not that easy to

00:37:27:20 - 00:37:32:03

contribute to the project if you're just using custom rules, files or things like that. So

00:37:32:03 - 00:37:33:04

that's a really cool

00:37:33:04 - 00:37:33:20

little

00:37:33:20 - 00:37:37:05

workflow thing that I just recently discovered, and I will

00:37:37:05 - 00:37:39:07

I will report back on how that goes.

00:37:39:07 - 00:37:40:17

That's really cool. I think

00:37:40:17 - 00:37:42:03

I think something that

00:37:42:03 - 00:37:45:17

I think two things that having that PDF document and the

00:37:45:17 - 00:37:47:08

user flow document

00:37:47:08 - 00:37:48:16

always in your

00:37:48:16 - 00:37:50:22

project document in person,

00:37:50:22 - 00:37:52:15

when you establish that,

00:37:52:15 - 00:37:57:13

it forces you that if there are changes to the strategy and what you want to be

00:37:57:13 - 00:37:59:07

first, you reflect on that

00:37:59:07 - 00:38:00:02

and then

00:38:00:02 - 00:38:00:15

and

00:38:00:15 - 00:38:01:13



00:38:01:13 - 00:38:02:04

and then

00:38:02:04 - 00:38:05:15

then basically from the butterfly effect to your.

00:38:05:15 - 00:38:06:00

Yeah,

00:38:06:00 - 00:38:07:10

a system to

00:38:07:10 - 00:38:11:18

I was using GitHub initially for it, but I think.

00:38:11:18 - 00:38:14:18

That that caused a lot of hallucination because

00:38:14:18 - 00:38:16:13

there was not a track of

00:38:16:13 - 00:38:18:08

what needs to be done.

00:38:18:08 - 00:38:18:19

Yeah,

00:38:18:19 - 00:38:21:06

yeah, I'm going to implement that. Combined with this set up.

00:38:21:06 - 00:38:22:11

Yeah. It is really cool.

00:38:22:11 - 00:38:27:01

I think it's it's really important to, you know, always give it context so you can,

00:38:27:01 - 00:38:28:23

you know, like like I showed

00:38:28:23 - 00:38:31:06

I don't want that any more.

00:38:31:06 - 00:38:33:15

And that was the MCP servers. I mean, just go back.

00:38:33:15 - 00:38:35:20

Up. It's always good.

00:38:35:20 - 00:38:37:00

Go back to

00:38:37:00 - 00:38:37:16

the.

00:38:37:16 - 00:38:38:15

I don't want that.

00:38:38:15 - 00:38:39:02

Oh, no.

00:38:39:02 - 00:38:39:19

Getting looks.

00:38:39:19 - 00:38:40:16

It's not what I want.

00:38:40:16 - 00:38:45:11

Always to go back, give it that conflict. So whether it's this file that you want to

00:38:45:11 - 00:38:49:15

point it to, which is fine, it could get lost. But

00:38:49:15 - 00:38:52:15

I really like the idea of pointing it to a ticket.

00:38:52:17 - 00:38:53:03

The.

00:38:53:03 - 00:38:55:13

That is in a place where other people

00:38:55:13 - 00:38:56:06

can

00:38:56:06 - 00:38:58:08

also work on it, because things like cursor.

00:38:58:08 - 00:39:01:10

So I'm working on this project. So this is my wife's

00:39:01:10 - 00:39:02:09

growth plan.

00:39:02:09 - 00:39:05:14

So don't want it to get taller or anything about for her business.

00:39:05:14 - 00:39:09:04

I do this really cool ChatGPT

00:39:09:04 - 00:39:10:18

deep research thing and it

00:39:10:18 - 00:39:12:10

came back with some amazing stuff.

00:39:12:10 - 00:39:13:17

So we put it all in here.

00:39:13:17 - 00:39:15:04

Now

00:39:15:04 - 00:39:17:10

this means that she can go in and edit it

00:39:17:10 - 00:39:22:22

and update and provide context, and then I can then use that and pull that in

00:39:22:22 - 00:39:25:20

into cassowaries. If all this stuff sits in cursor,

00:39:25:20 - 00:39:27:04

she's not going to

00:39:27:04 - 00:39:31:06

be able to edit that because she's not a developer or a techie or a designer, or it sees a,

00:39:31:06 - 00:39:33:07

you know, she's a wellness and health expert,

00:39:33:07 - 00:39:33:17

okay,

00:39:33:17 - 00:39:36:13

who does not get code or applications or coding.

00:39:36:13 - 00:39:37:04

Right? So

00:39:37:04 - 00:39:44:02

this is a really good place for her to come and contribute and, and set direction in where she needs to input and things like that.

00:39:44:02 - 00:39:47:01

And then I can take it straight from code so I don't need to come here.

00:39:47:01 - 00:39:50:07

I'm just I can get that context in the tool that I'm in

00:39:50:07 - 00:39:51:01

and

00:39:51:01 - 00:39:51:17

really

00:39:51:17 - 00:39:54:22

just get on with what I need to be doing just by asking cursor

00:39:54:22 - 00:39:56:09

what's what's in the lesson?

00:39:56:09 - 00:39:57:10

Well, what can I pick up?

00:39:57:10 - 00:40:02:01

You know what is ready. It can be assigned to me and I can filter that and get it done. So that's pretty cool.

00:40:02:01 - 00:40:03:23

It's a really nice workflow.

00:40:03:23 - 00:40:07:07

I've not used this before. But this is similar,

00:40:07:07 - 00:40:11:12

you know, in the traditional workflow. We'd have tickets in Jira,

00:40:11:12 - 00:40:15:01

you know, in Trello, Basecamp, and every single tool

00:40:15:01 - 00:40:16:07

we've used throughout our careers.

00:40:16:07 - 00:40:18:18

But developers are used to working and things like this,

00:40:18:18 - 00:40:20:03

to keep it clean

00:40:20:03 - 00:40:24:18

and under control and organized by a really good product, product and a project manager.

00:40:24:18 - 00:40:25:05

So that's

00:40:25:05 - 00:40:28:22

basically my flow at the moment for for creating

00:40:28:22 - 00:40:30:17

apps. And I haven't used

00:40:30:17 - 00:40:36:18

many AI tools. I mean, you've seen I've done the initial thinking in Gemini because Gemini's I think is

00:40:36:18 - 00:40:38:18

really good at the moment, better than anything else

00:40:38:18 - 00:40:39:10

at the moment.

00:40:39:12 - 00:40:42:10

It might change ChatGPT might get better, but

00:40:42:10 - 00:40:43:15

Gemini has just

00:40:43:15 - 00:40:46:08

really done really, really well. Over the last,

00:40:46:08 - 00:40:46:23

last,

00:40:46:23 - 00:40:49:11

maybe 3 or 4 weeks. I don't know what happened, but

00:40:49:11 - 00:40:50:08

just got really good.

00:40:50:08 - 00:40:55:10

With a couple of other things that I had in here that I wanted to show you.

00:40:55:10 - 00:40:59:03

And ask one question here before you move away from dart.

00:40:59:03 - 00:41:02:05

Yep. So, for example, if you if cursor

00:41:02:05 - 00:41:03:13

created a,

00:41:03:13 - 00:41:04:01

you know,

00:41:04:01 - 00:41:08:10

you ask cursor how you got dart. I don't want you to do this test.

00:41:08:10 - 00:41:12:18

Yeah. And it goes to that. And then you approve that which is to GitHub.

00:41:12:18 - 00:41:15:05

And then you can ask your sister to go

00:41:15:05 - 00:41:16:16

on that path. Please

00:41:16:16 - 00:41:19:00

provide the summary of what has been done

00:41:19:00 - 00:41:20:13

GitHub commit in there

00:41:20:13 - 00:41:21:09

and lock the doors.

00:41:21:09 - 00:41:24:20

Done. Can can do it all with a command from the cursor.

00:41:24:20 - 00:41:27:18

You could do it in cursive, but I wouldn't do it in cursor.

00:41:27:18 - 00:41:29:05

But it's

00:41:29:05 - 00:41:30:23

it's great that you ask me.

00:41:30:23 - 00:41:35:18

It's it's as if this was set up, but it's not, I promise you, because what I wanted to show you

00:41:35:18 - 00:41:37:09

was this tool called Code Rabbit.

00:41:37:11 - 00:41:43:17

Code rabbit, I get I feel like I'm not sponsoring this. I'm just starting to use this. So

00:41:43:17 - 00:41:44:24

what this does is

00:41:44:24 - 00:41:46:24

literally what you just said is

00:41:46:24 - 00:41:48:09

once you have

00:41:48:09 - 00:41:53:21

done your code with, with cursor or any other agent,

00:41:53:21 - 00:42:00:23

and you've pushed it back to GitHub, you make what's called a pull request. A pull request and get is like saying

00:42:00:23 - 00:42:03:04

it's git saying or developer saying, look,

00:42:03:04 - 00:42:05:15

I've done this code, I've submitted it back.

00:42:05:15 - 00:42:13:06

I want to merge it back into the main code. Here's a pull request. Can you look at it and somebody, you know, the line manager or another developer would look at it and approve it?

00:42:13:06 - 00:42:18:15

What code rabbit is? It's literally that person who's doing the approval process

00:42:18:15 - 00:42:21:00

and what it does it it looks at

00:42:21:00 - 00:42:22:16

it basically looks at the code,

00:42:22:16 - 00:42:24:17

and then it analyzes it and scans it.

00:42:24:17 - 00:42:26:15

And it will tell you what's changed

00:42:26:15 - 00:42:27:17

and what it what

00:42:27:17 - 00:42:28:16

what my,

00:42:28:16 - 00:42:30:22

what my it have done

00:42:30:22 - 00:42:33:03

that introduced vulnerabilities

00:42:33:03 - 00:42:35:22

or broke something which is. Oh, yeah.

00:42:35:22 - 00:42:38:15

Which is what you want. This is more,

00:42:38:15 - 00:42:41:21

more security focused. So

00:42:41:21 - 00:42:43:12

that's really, really important.

00:42:43:12 - 00:42:46:05

To have something in and

00:42:46:05 - 00:42:47:16

the free tier, I think

00:42:47:16 - 00:42:49:05

it says 14 day.

00:42:49:10 - 00:42:52:17

Well you get 14 days of pro, but then it will go back to,

00:42:52:17 - 00:42:58:10

a free tier, which is it doesn't end. So I'm going to try using that on this code base that I create

00:42:58:10 - 00:43:00:03

and see what happens. Because

00:43:00:03 - 00:43:01:08

this is a real

00:43:01:08 - 00:43:04:23

big problem. With agents, they may, you know,

00:43:04:23 - 00:43:07:15

you've got a bit of code, you've created it and it works.

00:43:07:15 - 00:43:10:19

And then you've gone and asked it to do something else, and he's broken it, right.

00:43:10:19 - 00:43:12:18

And you've gone and fixed it.

00:43:12:18 - 00:43:19:17

But what you may not know is that may be a security, like a vulnerability. Your keys are open and inaccessible

00:43:19:17 - 00:43:24:10

and you want it. You should know that before you push it live. So that's what Code Rabbit will do.

00:43:24:11 - 00:43:25:04

You can then

00:43:25:04 - 00:43:27:05

tell Code Rabbit. You can integrate that

00:43:27:05 - 00:43:30:06

and say, hey, here's a PR request, go test it.

00:43:30:06 - 00:43:33:12

And code rabbit will test it and then it will tell you if it's okay

00:43:33:12 - 00:43:34:14

and if it's not okay.

00:43:34:14 - 00:43:35:08

And

00:43:35:08 - 00:43:38:08

I will be checking that. So ideally I'd like to give it

00:43:38:08 - 00:43:41:23

a snap of things that, that I should have been created or done,

00:43:41:23 - 00:43:46:12

and then for it to verify whether those things have been done and work and verify also

00:43:46:12 - 00:43:47:04

whether

00:43:47:04 - 00:43:48:10

it's still secure

00:43:48:10 - 00:43:50:09

and it still meets the standards.

00:43:50:11 - 00:43:50:23

So

00:43:50:23 - 00:43:52:22

this is a really cool tool that I'll be using

00:43:52:22 - 00:43:55:17

to help with exactly what you just said.

00:43:55:17 - 00:43:58:24

Because, my fear is that if I ask cursor,

00:43:58:24 - 00:44:00:20

cursor will just say yes, right?

00:44:00:20 - 00:44:01:17

Any agents.

00:44:01:17 - 00:44:08:02

You know, you could have another agent look at it like Claude. You could integrate that and say, hey, here's my code base.

00:44:08:02 - 00:44:10:12

But the only issue with that is in a code.

00:44:10:12 - 00:44:11:17

Claude might have

00:44:11:17 - 00:44:15:07

its own opinions on how it should have been done, just like any other developer,

00:44:15:07 - 00:44:17:02

and give you advice

00:44:17:02 - 00:44:18:20

that isn't exactly what you want it.

00:44:18:20 - 00:44:19:04

So.

00:44:19:04 - 00:44:20:00

And I don't want

00:44:20:00 - 00:44:25:16

something changing my code base. If it doesn't need changing, I'd rather stick with it and just keep moving forward.

00:44:25:16 - 00:44:26:15

As long as you know.

00:44:26:15 - 00:44:31:24

Yeah, that's really good that you get an agent is is very customized to do so because

00:44:31:24 - 00:44:32:10

yeah,

00:44:32:10 - 00:44:32:22

who

00:44:32:22 - 00:44:35:23

happened to me many times and I don't really even know

00:44:35:23 - 00:44:38:00

that I'm developing very secure.

00:44:38:00 - 00:44:39:01

All the comments

00:44:39:01 - 00:44:39:19

and all the

00:44:39:19 - 00:44:42:11

so it basically check every pull request.

00:44:42:11 - 00:44:42:22

Yep.

00:44:42:22 - 00:44:45:03

And then check it against the code base,

00:44:45:03 - 00:44:45:23

on

00:44:45:23 - 00:44:47:06

origin GitHub

00:44:47:06 - 00:44:48:13

and then say, okay,

00:44:48:13 - 00:44:50:02

these are the things that are being

00:44:50:02 - 00:44:51:11

requested to be

00:44:51:11 - 00:44:55:12

pulled into the code base, that they will create vulnerabilities.

00:44:55:12 - 00:44:59:15

And what happens here is that you get that feedback. You go back to yourself and say, hey,

00:44:59:15 - 00:45:02:12

we got this stuff that needs to be improved before, like

00:45:02:12 - 00:45:04:17

make, you make a PR request.

00:45:04:17 - 00:45:06:13

Exactly. Yeah. Yeah.

00:45:06:13 - 00:45:10:07

Which is really good, right? It's exactly what we need in this space

00:45:10:07 - 00:45:12:23

because, you know, people have vibe coding,

00:45:12:23 - 00:45:14:24

and then you. I'm sure everyone's seen it like,

00:45:14:24 - 00:45:16:24

you know, posts about

00:45:16:24 - 00:45:24:15

vibe coded apps not being secure or not being flexible. For sure. I mean, if you've never coded, you don't know,

00:45:24:15 - 00:45:28:03

like your, you know, environment files are going live and you,

00:45:28:03 - 00:45:29:09

you haven't secured them.

00:45:29:09 - 00:45:29:24

It's like

00:45:29:24 - 00:45:32:13

bad stuff is going to happen. That's great. That's the

00:45:32:13 - 00:45:35:24

Wild West. So this is a tool that I kind of I found

00:45:35:24 - 00:45:38:20

over the weekend and it's something that

00:45:38:20 - 00:45:39:21

I want to I will

00:45:39:21 - 00:45:41:07

use for this project.

00:45:41:07 - 00:45:43:03

And then

00:45:43:03 - 00:45:45:20

something that I'm pretty sure you guys have

00:45:45:20 - 00:45:46:20

seen before.

00:45:46:20 - 00:45:48:22

It's called storybook.

00:45:48:22 - 00:45:50:21

Have you heard of storybook?

00:45:50:21 - 00:45:51:05



00:45:51:07 - 00:45:55:04

I have no. Yeah. No. So what's storybook is,

00:45:55:04 - 00:45:58:02

there is a, like, a ten second

00:45:58:02 - 00:46:00:12

video on YouTube, which I can send it to you, but

00:46:00:12 - 00:46:01:16

it's basically

00:46:01:16 - 00:46:05:21

your component library. So if you've created a custom component library,

00:46:05:21 - 00:46:08:02

you can

00:46:08:02 - 00:46:09:03

document it

00:46:09:03 - 00:46:12:21

in storybook. So this is like react components.

00:46:12:21 - 00:46:15:16

But you can create little stories for.

00:46:15:16 - 00:46:16:15

So a story

00:46:16:15 - 00:46:19:13

describes that component and its behaviors.

00:46:19:13 - 00:46:23:12

And then you can import it into storybook and it lives within your

00:46:23:12 - 00:46:25:04

project in code.

00:46:25:04 - 00:46:28:09

So whenever you pull a project from your repo

00:46:28:09 - 00:46:32:00

there's a subfolder called storybook. And all your components are in there

00:46:32:00 - 00:46:37:12

for you to then reuse within your project. So if you're working with a team of developers on a product,

00:46:37:12 - 00:46:41:02

everyone's pulling the same storybook and the components are you

00:46:41:02 - 00:46:42:00

creating

00:46:42:00 - 00:46:45:03

card that's consistent in terms of its UI and experience?

00:46:45:05 - 00:46:47:15

That's what storybook does. And there's a

00:46:47:15 - 00:46:50:12

there's a few examples on the web. This is probably one of my favorites.

00:46:50:12 - 00:46:52:18

So this is a windows

00:46:52:18 - 00:46:55:19

implementation. And you can

00:46:55:19 - 00:46:58:11

like here I can click these.

00:46:58:11 - 00:47:00:08

Oh my God, this is bringing back memories.

00:47:00:08 - 00:47:01:12

But it's so good.

00:47:01:12 - 00:47:04:07

I can then go through here and I can look

00:47:04:07 - 00:47:07:02

literally this is a modal component.

00:47:07:04 - 00:47:08:15

I can look at a simple one.

00:47:08:15 - 00:47:10:18

I can click the button, I can click, you know,

00:47:10:18 - 00:47:12:11

shows me all the interactions.

00:47:12:11 - 00:47:16:00

There's multiple buttons here from launching

00:47:16:00 - 00:47:19:19

the minimize want minimize one has a progress bar component.

00:47:19:19 - 00:47:21:06

I can look at

00:47:21:06 - 00:47:25:03

look at that there. And it's kind of tells me all the properties of that component.

00:47:25:03 - 00:47:25:19

I can just

00:47:25:19 - 00:47:27:13

check out what it looks like by doing that.

00:47:27:13 - 00:47:28:19

So what this does is it

00:47:28:19 - 00:47:30:09

allows me to make sure that,

00:47:30:09 - 00:47:33:04

you know, as a developer and all the components I need are here.

00:47:33:04 - 00:47:35:21

And then once I have the libraries in my project,

00:47:35:21 - 00:47:38:19

I can look at the code and just take it and there it is.

00:47:38:19 - 00:47:39:20

I just pull that in

00:47:39:20 - 00:47:41:11

and reuse that in,

00:47:41:11 - 00:47:42:06

in my code.

00:47:42:06 - 00:47:44:24

So consistency is is never a problem.

00:47:44:24 - 00:47:45:21

Because otherwise,

00:47:45:21 - 00:47:47:05

you know, you have developers,

00:47:47:05 - 00:47:55:23

they'll create a taskbar and then somebody else will create their own code for a taskbar. And, and I does this now like one, it might generate a button.

00:47:55:23 - 00:47:59:13

And then on another page it might generate a totally different button. But

00:47:59:13 - 00:48:00:07

with

00:48:00:07 - 00:48:04:07

with these tools, with storybook you can get

00:48:04:07 - 00:48:07:05

cursor to look at your components within storybook

00:48:07:05 - 00:48:08:06

and always use them.

00:48:08:06 - 00:48:13:05

So it's not generating random components that you didn't design.

00:48:13:05 - 00:48:17:23

There's loads of examples of storybook so that website here, at least some

00:48:17:23 - 00:48:19:20

and then,

00:48:19:20 - 00:48:21:01

you know, you can find one

00:48:21:01 - 00:48:23:22

and then also go to the code so you can go pull it out.

00:48:23:22 - 00:48:24:20

So

00:48:24:20 - 00:48:28:24

I can demo Coursera, I can have a look at their component library here.

00:48:28:24 - 00:48:29:17

So they've got

00:48:29:17 - 00:48:31:14

all these. And if I wanted to use it

00:48:31:14 - 00:48:34:12

like there's a GitHub link

00:48:34:12 - 00:48:35:01

as well

00:48:35:01 - 00:48:35:24

which is broken.

00:48:35:24 - 00:48:36:13

Great.

00:48:36:13 - 00:48:40:14

Thanks. Coursera. There's a good one that I found.

00:48:40:14 - 00:48:42:02

I really like this one.

00:48:42:02 - 00:48:42:23

Again. It's

00:48:42:23 - 00:48:44:21

got the controls. So there's like a

00:48:44:21 - 00:48:45:03

it's

00:48:45:03 - 00:48:46:16

an individual one. There you go.

00:48:46:16 - 00:48:47:19

Simple accordion.

00:48:47:19 - 00:48:48:18

And look at that.

00:48:48:18 - 00:48:50:14

And they've configured all the themes.

00:48:50:14 - 00:48:52:23

So they've got a hack tober first theme.

00:48:52:23 - 00:48:55:21

So I can play around with these components and see how they

00:48:55:21 - 00:48:56:14

behave.

00:48:56:14 - 00:48:58:14

And then if I wanted to use one,

00:48:58:14 - 00:49:00:04

can

00:49:00:04 - 00:49:02:17

pull in the GitHub repo from

00:49:02:17 - 00:49:03:11

somewhere,

00:49:03:11 - 00:49:04:18

where there is the link,

00:49:04:18 - 00:49:06:13

you go, this is the Gromit website

00:49:06:13 - 00:49:07:18

and

00:49:07:18 - 00:49:09:15

you can then go to that GitHub

00:49:09:15 - 00:49:10:07

and

00:49:10:07 - 00:49:12:23

pull that down and use it within your project.

00:49:13:00 - 00:49:13:18

You can pull it in

00:49:13:18 - 00:49:15:15

so you can reuse that. But

00:49:15:15 - 00:49:20:14

ultimately what it will do, it will give you this locally so you can play with it and make sure

00:49:20:14 - 00:49:24:01

you can then tell curser, hey, this is my components in this folder.

00:49:24:01 - 00:49:26:12

This is what I when I say add a menu,

00:49:26:12 - 00:49:28:01

use this menu component.

00:49:28:01 - 00:49:31:00

Basically download all of this in your local find.

00:49:31:00 - 00:49:31:11

Yes.

00:49:31:11 - 00:49:31:21

Yep.

00:49:31:21 - 00:49:32:16

It's really handy.

00:49:32:16 - 00:49:33:02

Yeah,

00:49:33:02 - 00:49:37:04

that's really cool. So if you I mean, you don't have to use anybody else's, but you could

00:49:37:04 - 00:49:39:05

if you, if you've I think like, you know,

00:49:39:05 - 00:49:42:16

you know, in his example, he's created his UI and he's got his icons.

00:49:42:16 - 00:49:44:15

He could actually just push that into,

00:49:44:15 - 00:49:46:02

storybook

00:49:46:02 - 00:49:49:03

and then include that into his project folder and then so cursor

00:49:49:03 - 00:49:50:06

here's my components

00:49:50:06 - 00:49:51:10

I want a

00:49:51:10 - 00:49:53:20

pin or I want a module a card.

00:49:53:22 - 00:49:56:11

And give me, you know, use that

00:49:56:11 - 00:50:00:14

code for that component. One thing you'll notice as well is that they actually are

00:50:00:14 - 00:50:03:17

pretty well defined and quite broken down. So

00:50:03:17 - 00:50:04:14

as an anchor,

00:50:04:14 - 00:50:06:06

there's a simple one.

00:50:06:06 - 00:50:06:18

There's a

00:50:06:18 - 00:50:07:22

drop button,

00:50:07:22 - 00:50:10:23

so there's one in the calendar, and then there's a menu

00:50:10:23 - 00:50:12:02

just doesn't work.

00:50:12:02 - 00:50:13:05

And then there's a simple one.

00:50:13:05 - 00:50:16:21

So all the different variants, they've created little components. So there's atoms.

00:50:16:21 - 00:50:19:12

So they've really gone granular and added those in.

00:50:19:12 - 00:50:22:15

One thing I really like about storybook

00:50:22:15 - 00:50:26:01

as well is that you can actually do testing on components,

00:50:26:01 - 00:50:27:20

separately. So

00:50:27:20 - 00:50:33:20

there's an accessibility tab built in. And what that Will is already has done accessibility testing on just

00:50:33:20 - 00:50:34:09

this

00:50:34:09 - 00:50:36:04

simple drop down component.

00:50:36:06 - 00:50:39:14

It shows you all everything is done. Aria attributes.

00:50:39:14 - 00:50:41:19

It's tested everything. So

00:50:41:19 - 00:50:46:12

that's really cool. So you got that pre-built testing so you can make sure that accessibility

00:50:46:12 - 00:50:48:01

that's important, it should be important.

00:50:48:01 - 00:50:50:21

That your, your UI is, accessible.

00:50:50:21 - 00:51:01:18

But you can also do functional testing. And you can run that when you have it, integrate it into your code, but you can't really do it from a, from a demo on the web browser.

00:51:01:18 - 00:51:02:01

But

00:51:02:01 - 00:51:05:13

this is in my local host. I'll be able to say if I had a,

00:51:05:13 - 00:51:06:20

if I had a component

00:51:06:20 - 00:51:08:21

that had some parameters, I could,

00:51:08:21 - 00:51:09:18

I could

00:51:09:18 - 00:51:11:17

start testing, I could create a test,

00:51:11:17 - 00:51:17:05

and say, you know, test the component with these parameters and make sure that it passes

00:51:17:05 - 00:51:21:20

and you can do that individually without needing any of these other components.

00:51:21:20 - 00:51:22:06

So

00:51:22:06 - 00:51:26:06

if I had a test for the tabs, it would only work. It will only test the tabs.

00:51:26:06 - 00:51:29:00

It wouldn't need pagination to exist or anything else

00:51:29:00 - 00:51:31:24

because you'll you know, you'll. So they're quite separated and really cool.

00:51:31:24 - 00:51:36:18

So it's really good. Storybook is something I highly, highly recommend taking a look at as well.

00:51:36:18 - 00:51:37:16

These are like,

00:51:37:16 - 00:51:38:19

you know, once you are

00:51:38:19 - 00:51:41:00

progressing with your projects and you want that

00:51:41:00 - 00:51:43:10

control, then you've realized that components are

00:51:43:10 - 00:51:44:15

getting a bit to

00:51:44:15 - 00:51:47:04

get too big and you need to kind of refactor it.

00:51:47:04 - 00:51:48:11

The design and the code,

00:51:48:11 - 00:51:52:14

you can start looking at things like storybook and migrating components into storybook.

00:51:52:14 - 00:51:52:24

Yeah,

00:51:52:24 - 00:51:54:19

probably a storybook as a

00:51:54:19 - 00:51:57:06

figma plug into that. We can basically. Yes,

00:51:57:06 - 00:51:58:14

exactly. Yep yep

00:51:58:14 - 00:52:06:21

yep. What else? I mean, that is Gromit. And then probably the last, last little thing,

00:52:06:21 - 00:52:09:17

is this website called pulse MCP.

00:52:09:17 - 00:52:13:19

So I mentioned that MCP allows the, cursor and any other tools to

00:52:13:19 - 00:52:15:13

talk to each other. And so,

00:52:15:13 - 00:52:19:12

you can now you can have an MCP that

00:52:19:12 - 00:52:21:03

allows tools to talk to Figma.

00:52:21:03 - 00:52:25:07

So you can get the flat file version of Figma. So

00:52:25:07 - 00:52:30:18

get that and then you can have tools talking to it so you can understand what's in Figma.

00:52:30:20 - 00:52:32:06

I haven't tried that yet, but

00:52:32:06 - 00:52:34:22

things are happening in that world. So maybe

00:52:34:22 - 00:52:37:02

the, you know, from

00:52:37:02 - 00:52:39:10

you'll be able to spit out really nice,

00:52:39:10 - 00:52:44:19

code, representations of what you see in Figma. Really cool. Really easily.

00:52:44:19 - 00:52:50:04

But this is really cool. You can find some really nice MXGp, servers and clients

00:52:50:04 - 00:52:51:04

on this website.

00:52:51:05 - 00:52:53:10

It's a basically a big directory

00:52:53:10 - 00:52:54:10

of MSPs.

00:52:54:10 - 00:52:56:16

Let that let you do really cool things.

00:52:56:16 - 00:53:00:06

One of those, for example. I mean, I just seen the MySQL one.

00:53:00:06 - 00:53:02:21

So if you are using MySQL as a database,

00:53:02:21 - 00:53:08:00

you can hook up the MCP and do it straight from cursor. You don't even have to open the interface.

00:53:08:00 - 00:53:09:02

You could say,

00:53:09:02 - 00:53:12:20

you know, create a database, give me the schema and just automatically do it

00:53:12:20 - 00:53:13:17

in MySQL.

00:53:13:19 - 00:53:17:15

There is a super base one. So if you're using a backend like Super Base or Firebase,

00:53:17:15 - 00:53:21:22

you can then do all that kind of stuff within cursor. As long as you've got your API key,

00:53:21:22 - 00:53:25:07

they can both talk to each other. Then and just do things straight from

00:53:25:07 - 00:53:26:00

cursor

00:53:26:00 - 00:53:26:12

or

00:53:26:12 - 00:53:29:19

any agents tool that you are using. Claude supports cursor.

00:53:29:19 - 00:53:30:17

You can use Claude.

00:53:30:17 - 00:53:33:12

I haven't really done it in ChatGPT. It's

00:53:33:12 - 00:53:34:10

moving so

00:53:34:10 - 00:53:35:19

smoothly, so fast

00:53:35:19 - 00:53:36:11

that they

00:53:36:11 - 00:53:37:14

have their first

00:53:37:14 - 00:53:39:15

Amqp conference ever

00:53:39:15 - 00:53:43:21

was a month ago. Yeah it is. They can do the conference. Great.

00:53:43:21 - 00:53:50:19

McAfee conference. Right. Who'd have thought? I mean, there's buzz. I just, just started and now there's a conference for it, and,

00:53:50:19 - 00:53:52:14

it's powerful stuff, to be honest.

00:53:52:14 - 00:53:53:15

Yeah, I guess.

00:53:53:15 - 00:53:54:11

Yeah, I so

00:53:54:11 - 00:53:58:08

I started creating anything on a commission without even touching anything.

00:53:58:08 - 00:53:58:17

Yeah.

00:53:58:17 - 00:53:59:01

Yeah.

00:53:59:01 - 00:54:01:05

It's cool that that is

00:54:01:05 - 00:54:01:22

me.

00:54:01:22 - 00:54:05:00

That's what I am currently doing. That's my workflow.

00:54:05:00 - 00:54:08:05

I'm going to be building this app over the next ten days.

00:54:08:05 - 00:54:12:06

So we can check in next week. I can show you what I've done.

00:54:12:08 - 00:54:17:07

Oh, yeah. Definitely. So this is actually you want to start working on build to for you?

00:54:17:07 - 00:54:19:07

Yes. For real? Yeah yeah yeah.

00:54:19:07 - 00:54:19:23

Oh, yeah.

00:54:19:23 - 00:54:20:19

With luck.

00:54:20:19 - 00:54:24:18

Yeah. It's something that's kind of. I've been looking around. There's been a few.

00:54:24:18 - 00:54:30:21

There were a few products in the UK, in the UK market that were that did this for free, but they've shut down

00:54:30:21 - 00:54:31:20

and

00:54:31:20 - 00:54:33:06

you know it's a shame.

00:54:33:06 - 00:54:33:18

But

00:54:33:18 - 00:54:38:01

I mean there are other products as well, but they're more commercial. So there's like

00:54:38:01 - 00:54:40:23

basic features you get for free. And then there are,

00:54:40:23 - 00:54:45:11

you know, tiers that you can pay. But I don't need those tiers, and I don't really want to pay for something

00:54:45:11 - 00:54:48:06

to manage my money. And that's a, I guess, a great

00:54:48:06 - 00:54:49:13

use case for vibe coding.

00:54:49:13 - 00:54:49:21

Right.

00:54:49:21 - 00:54:51:21

But I'd like to pay for software, just build it.

00:54:51:21 - 00:54:55:23

But, well, basically we can become your, accountability

00:54:55:23 - 00:55:02:07

fellows and. Yeah, so it's very, you can. Yeah. Just just don't spit on my design.

00:55:02:07 - 00:55:03:10

No, no no no.

00:55:03:10 - 00:55:08:15

Yeah. We have to really give feedback. No. For for real. If you want to, like, show up, like where you're at and,

00:55:08:15 - 00:55:12:04

and, get feedback from us, I think what would have been.

00:55:12:06 - 00:55:15:14

Yeah, that'd be cool. I mean, I it's a, it's a ten day sprint. So

00:55:15:14 - 00:55:19:16

I would do it. And then we'll check in next week. Right. So that's seven days.

00:55:19:16 - 00:55:21:22

So I'll have a few days left.

00:55:21:22 - 00:55:28:07

For, that. So thanks a lot for this. Really. Like, you know, certain things that I am going to do a whole

00:55:28:07 - 00:55:34:11

bunch of project is to get my documentation right and put it in the instruction book and whatever.

00:55:34:13 - 00:55:39:01

Yeah, that dot that they are is so cool. I'm going to implement it to be on

00:55:39:01 - 00:55:42:14

it is good. I mean, if you want them, you can throw in,

00:55:42:14 - 00:55:47:08

a doc, into slack and you can just go through

00:55:47:08 - 00:55:51:11

some of those, some of those prompts and get that yourselves. And then,

00:55:51:11 - 00:55:54:00

yeah, I can go into can I have some

00:55:54:00 - 00:55:55:03

on that, that do

00:55:55:03 - 00:55:57:11

that would be fantastic for the community, I think.

00:55:57:12 - 00:56:00:03

Yeah. You could take it. Yeah, 100%. Yeah, yeah.

00:56:00:03 - 00:56:00:18

It's not,

00:56:00:18 - 00:56:02:00

it's not

00:56:02:00 - 00:56:03:20

it's not value like it's no

00:56:03:20 - 00:56:05:20

money attached to it. It's just prompts.

00:56:05:20 - 00:56:13:06

It's like it's easy. But I think it's the, the key to it is working backwards. And like anything, anything that we do across,

00:56:13:06 - 00:56:16:12

you know, digital and creating products, there are steps,

00:56:16:12 - 00:56:20:08

you know, traditional steps that you would take to create something really good.

00:56:20:08 - 00:56:24:13

And I think a lot of people who are jumping on this just don't know what those steps are.

00:56:24:13 - 00:56:26:15

You know, across our trade, whether that be,

00:56:26:15 - 00:56:29:22

you know, one thing I haven't touched on is user research, right? So

00:56:29:22 - 00:56:32:03

that's also very important to understand

00:56:32:03 - 00:56:33:12

those key needs. Like

00:56:33:12 - 00:56:37:17

I wouldn't have even jumped into key needs with my MVP without talking to people

00:56:37:17 - 00:56:38:13

in a real job.

00:56:38:14 - 00:56:40:17

That's what we would have, you know, really had,

00:56:40:17 - 00:56:43:08

people in roles go do that job.

00:56:43:08 - 00:56:46:13

But with live coding and all this stuff popping up, people are just

00:56:46:13 - 00:56:48:14

jumping straight to go. I'm

00:56:48:14 - 00:56:49:01

into

00:56:49:01 - 00:56:49:13

or and

00:56:49:13 - 00:56:50:15

or in lovable

00:56:50:15 - 00:56:53:07

and starting to make without having that context.

00:56:53:07 - 00:56:54:02

So yeah,

00:56:54:02 - 00:56:55:21

it's really wild. So having this

00:56:55:21 - 00:56:56:13

upfront,

00:56:56:13 - 00:56:58:15

really gets you

00:56:58:15 - 00:57:00:12

thinking straight, but also keeps

00:57:00:12 - 00:57:02:10

your agent thinking straight as well.

00:57:02:10 - 00:57:04:20

I mean, I think, you know, having gone through the

00:57:04:20 - 00:57:05:16

coding

00:57:05:16 - 00:57:07:15

craze and,

00:57:07:15 - 00:57:14:05

got to a point that of no return and had to do some so much fighting. That's actually what I will say to everyone,

00:57:14:05 - 00:57:17:00

like in the chat and everyone else, if we

00:57:17:00 - 00:57:18:15

hear this later, is that

00:57:18:15 - 00:57:20:10

follow the same advice

00:57:20:10 - 00:57:22:06

and process because it works.

00:57:22:07 - 00:57:23:03

I,

00:57:23:03 - 00:57:23:14

I've

00:57:23:14 - 00:57:25:18

experienced the burn. You don't have to.

00:57:25:18 - 00:57:26:19

The burn is a real

00:57:26:19 - 00:57:27:06

it's

00:57:27:06 - 00:57:28:08

and you know, it's

00:57:28:08 - 00:57:34:09

also what it does is like gets you off the moment on metrics. You want to get back to them and to

00:57:34:09 - 00:57:37:09

especially if you have like other things to juggle.

00:57:37:09 - 00:57:40:17

And it's not something that you do on a 24 hour basis.

00:57:40:17 - 00:57:41:04

Yeah,

00:57:41:04 - 00:57:41:16

yeah.

00:57:41:16 - 00:57:44:06

It can literally derail you, right? With

00:57:44:06 - 00:57:46:05

an idea what you're testing,

00:57:46:05 - 00:57:50:03

when it gets stuck in a loop. And it can just cannot figure it out.

00:57:50:03 - 00:57:54:00

It's like, right, I'm walking away from this, I'm going to come back tomorrow, but you don't come back tomorrow

00:57:54:00 - 00:57:56:10

here. And then when you do come back to it, you're like,

00:57:56:10 - 00:57:57:07

what was I doing?

00:57:57:09 - 00:57:58:24

Let's move on to the next thing.

00:57:58:24 - 00:58:07:08

All right. So, thanks a lot fam, for this. I really appreciate it. And I will make sure that we get broadcasted, I think. Yeah, a lot of people

00:58:07:08 - 00:58:10:22

I really like the way you took your time and walk us through your process.

00:58:10:22 - 00:58:12:16

How many agent that you are getting

00:58:12:16 - 00:58:13:10

involved.

00:58:13:10 - 00:58:18:05

And these are the stuff that I won't be skipping for new projects ever again.

00:58:18:05 - 00:58:19:17

Like, literally, I want

00:58:19:17 - 00:58:21:14

to hold you accountable for that. Yeah,

00:58:21:14 - 00:58:25:01

definitely. Like I am so close group. So,

00:58:25:01 - 00:58:28:05

it's it's definitely needed. And thanks a lot for this.

00:58:28:05 - 00:58:34:21

We will, I would love to follow the process in case you would like to hear, next week we are available

00:58:34:21 - 00:58:37:10

to see where you're at. And until

00:58:37:10 - 00:58:40:13

next week, which is a fantastic rest of the week.

00:58:40:13 - 00:58:42:04

Yeah. Thanks, everyone. Thanks for having me.

00:58:42:04 - 00:58:43:04

Thank you for it.

00:58:43:04 - 00:58:43:24

Thank you

00:58:43:24 - 00:58:45:04

and good luck with your app.

00:58:45:04 - 00:58:45:17

Thanks.