HomeVideos

Complete CRM Building Guide With Claude (Start to Finish)

Now Playing

Complete CRM Building Guide With Claude (Start to Finish)

Transcript

1134 segments

0:00

If you're using Go High Level, HubSpot,

0:02

Salesforce, Zoho, you're at least 100

0:05

times less productive than everyone else

0:07

using custom CRMs built by Claude.

0:09

>> You probably recall over the course of

0:11

last 10 years, 15 years, almost

0:13

everybody who sits on a stage like this

0:15

would tell you it is vital that your

0:18

children learn computer science. And in

0:20

fact, it's almost exactly the opposite.

0:23

>> that business applications exist, that's

0:26

probably where they'll all collapse,

0:28

right? In the agent era.

0:30

>> AI is moving fast. By prompting Claude

0:32

with words, we can have a CRM web app

0:34

without any technical or coding

0:36

experience at all. Even my grandma could

0:40

easily do this in her sleep, so I'm sure

0:42

you can as well. I've literally built

0:44

four CRMs that I use every day across my

0:47

own businesses, and all four cost me

0:49

less than $20 per month to run in total.

0:52

By the end of this video, you're going

0:53

to become an expert at using Claude

0:55

code. You're going to have a fully

0:58

functional CRM web app with your

1:00

existing data imported, 24/7 automation

1:03

workflows, secure authentication, data

1:06

storage, and a complete mobile app for

1:08

your CRM as well. So, whether you're

1:10

replacing your existing CRM, building a

1:13

new one from scratch, or you just want

1:14

to learn application building with AI,

1:17

this is going to be the perfect video

1:19

for you. And make sure to watch all the

1:20

way through as I'm going to share with

1:22

you a secret Claude skill that makes the

1:23

design of your CRM 10 times better. Now,

1:26

before we get started in building out

1:27

the CRM, I am just going to go through a

1:29

couple of previous CRMs that I have

1:30

built just so you can get a very clear

1:32

idea as to what to expect with a Claude

1:34

built CRM. So, this right here is a

1:35

content CRM that I use literally every

1:38

single day to plan out all of my content

1:40

across social media. So, this page in

1:42

particular is a content pipeline, and

1:45

once again, everything that you're

1:46

looking at is fully AI-generated. I've

1:48

got an entire pipeline from editing,

1:50

reviewing, publishing. I'm able to fully

1:53

see which video is at which stage at

1:55

which point, make updates to the video,

1:57

and just continuously move it down the

1:58

stage until it's live on YouTube or

2:00

whatever. So, for example, I could click

2:02

into this video right here, which I'm

2:04

currently working on. I can click into

2:06

this, and if I just quickly scroll

2:08

through, you can see all of the features

2:10

and functionality that I have built out

2:12

into this content CRM system. So, it is

2:15

pretty extensive. I've got a lot of

2:17

features here related to, obviously,

2:19

creating thumbnails, creating titles,

2:21

brainstorming the video concept itself,

2:23

all of these thumbnails that uploaded

2:25

into this system. I can even click into

2:28

a thumbnail on this little YouTube

2:29

button and demonstrate how this

2:31

thumbnail actually looks as if it was

2:33

published on YouTube. I've got the

2:35

ability to set dates that I'm going to

2:36

be filming, that I'm going to be

2:37

publishing. And then when I've actually

2:39

uploaded the video as well, I can

2:41

actually add in the YouTube video URL.

2:43

This system will use an API to extract

2:46

the transcript, and then I'm going to be

2:47

able to generate a bunch of different

2:49

things like the description, the video

2:51

keywords, timestamps for the video

2:53

description as well. So, it really just

2:55

helps to speed up my entire workflow.

2:57

So, whilst you might not be making

2:58

content, hopefully that just gives you

3:00

an idea as to the power of a

3:01

custom-built application as opposed to

3:03

something that is just static that

3:05

everybody uses. And just lastly, this is

3:07

the CRM that we use inside of our AI

3:09

agency. Once again, fully created by

3:11

Claude, and we have a bunch of features

3:13

in this system. For example, I was able

3:15

to integrate the Fathom AI noting meet

3:18

taker software into our CRM all

3:20

natively. So, you can see if I scroll

3:21

down a little bit, you can see I have

3:23

692

3:25

meeting recordings associated with my

3:27

contact in the CRM specifically. And

3:29

when clicking into a meeting, I can get

3:31

all of the details related to that

3:33

meeting, entire summary. I've even got

3:35

the entire meeting recording up here as

3:37

well. Underneath this, an AI chatbot, so

3:39

I can ask it any questions about the

3:40

project. Pretty much anything that you

3:42

can imagine off the top of your head,

3:43

you're going to be able to tell Claude

3:45

to add into your CRM. It's going to do

3:46

all the coding and build everything out

3:48

for you. And once again, you don't need

3:49

any technical or coding expertise at all

3:51

to do this. Okay, so just quickly before

3:53

we jump into building, I do just want to

3:55

run through very high level how this

3:56

even works. I'll try to break it down as

3:58

simply as I can because it really isn't

4:01

that complicated. So, I've just quickly

4:02

created this very simple diagram right

4:04

here just to walk you through the

4:06

step-by-step process that I'm about to

4:07

go through for the rest of this video.

4:09

So, on the left-hand side we have Claude

4:10

Code. This is really going to be the

4:12

main thing that we're going to be using

4:13

to build the CRM system. Ultimately,

4:15

Claude Code right now is just one of the

4:17

best applications when it comes to

4:18

writing code with AI and then turning

4:21

that code into a fully functional

4:23

application. Once again, even though

4:24

it's called Claude Code, you don't have

4:26

to know anything about code at all. It's

4:28

just the AI that's going to be doing it

4:29

for us in the background. So, in plain

4:32

English from prompting, we're going to

4:33

get Claude Code to create a folder on

4:35

our computer which is going to host

4:37

everything related to the CRM itself.

4:39

Once we've created the first version of

4:41

our CRM and it seems to work and do what

4:43

we want it to, this folder we are then

4:45

going to be pushing that over to GitHub.

4:47

So, GitHub is simply a platform that

4:49

allows us to store our code in the

4:51

cloud. The main reason that we want to

4:52

do this is for something called version

4:54

control. I will get back to this later

4:56

in the video, but ultimately it just

4:57

helps to ensure that we never lose our

4:59

code anywhere. And then finally, we're

5:01

going to connect to GitHub into a

5:02

platform called Hostinger. And Hostinger

5:04

is essentially where we're going to be

5:06

hosting the code from GitHub onto a live

5:09

website on the internet. And this is

5:11

going to be the main way that we're

5:12

going to be able to access our CRM. And

5:14

because obviously it's hosted live on

5:16

the internet, we're going to be able to

5:17

give this out to all of our team members

5:19

and other users as well. Everybody's

5:21

going to be able to log in no matter

5:23

where they are. Okay, so hopefully that

5:24

all makes sense. And if it doesn't, I am

5:26

going to keep going through step-by-step

5:28

so it should make sense as we keep

5:29

going. First thing that we are going to

5:30

need of course is going to be Claude

5:32

Code. To get to this web page, all you

5:34

need to do is just head over to Google,

5:35

Google Claude Code, just scroll down a

5:37

bit until you see Claude Code by

5:39

Anthropic. Click onto this and then

5:41

you're going to land on this page right

5:43

here. Now, if you'd like, there is a

5:44

download button that you're going to see

5:46

on this Claude Code page right here. And

5:48

this is going to be downloading the

5:49

Claude desktop app onto your computer.

5:51

So this is certainly an option for

5:53

accessing Claude Code and getting it to

5:54

build out our applications and our CRM

5:57

and doing this whole process. But the

5:58

way that I prefer to use Claude Code and

6:00

what I would recommend for you as well,

6:01

especially if you are going to be

6:02

building out applications specifically,

6:04

is to use Claude Code through Visual

6:06

Studio Code, which is this option in the

6:08

blue right here. So Visual Studio Code

6:10

is an AI code editor. Once again, you

6:13

don't have to be technical. We're not

6:14

even going to be looking at any of this

6:15

code. But the reason that I like to use

6:17

Visual Studio Code is so that we can

6:19

simply see the files and folders that

6:21

are being created by the agent itself.

6:23

And I personally think that it's a

6:25

little bit more customizable than the

6:26

Claude desktop app right now. But

6:28

honestly, you could use either. Don't

6:29

get stuck on a decision here. Just pick

6:31

one and go with it. They're going to do

6:32

pretty much exactly the same stuff. So

6:34

go ahead and just click download for

6:36

Windows on Visual Studio Code right

6:38

here. Once you've downloaded Visual

6:39

Studio Code onto your computer and

6:41

opened up the application, it's probably

6:42

going to look something very similar to

6:44

this. Once we're here, we just have to

6:45

go to the top left, click on file, and

6:47

then go down to open folder. Once we're

6:49

here, we're just going to right click,

6:50

go down to new, and do new folder. You

6:52

can name this whatever you want. I've

6:54

just named mine CRM app. I'm then going

6:56

to hit select folder. And once we've

6:57

done this, it's going to load us into

6:59

Visual Studio Code once again here. Now

7:01

that we're inside of our folder, all we

7:03

need to do is go to the left-hand side

7:05

and click on these sort of boxes right

7:06

here. And this is the extensions tab.

7:08

Once we're in the extensions tab, we

7:10

then need to go ahead and search Claude

7:12

Code in extensions. Once we do that,

7:14

take a couple of seconds, we should now

7:16

see Claude Code for VS Code. It's got

7:18

about 23 million downloads. Make sure to

7:21

download the right one. You will then

7:22

just see an install button. Mine's

7:24

already installed at the moment, so I

7:25

don't need to do it again. But you will

7:27

see a green install button. Make sure to

7:29

click that. And then Claude Code will be

7:31

installed in VS Code for you. You may

7:33

get prompted to log into your Claude

7:36

account as well through the installation

7:38

process. So just make sure you do have a

7:40

Claude account already, of course. I'll

7:41

have my Claude link in the description

7:43

down below. Now that Claude code is

7:45

installed, what we can do is just go

7:46

ahead and click on the top left and

7:48

click new file. I'm just going to call

7:50

this test just for the purpose of

7:52

creating a quick file. We're then going

7:54

to get this text pop up right here. And

7:56

then we're going to see in the top right

7:57

corner this Claude logo right here. If I

8:00

click into this, we are now going to see

8:02

Claude code is popping up inside of

8:05

Visual Studio Code for us. And so, we

8:07

are pretty much good to go in building

8:09

out our CRM or getting Claude to build

8:11

out our CRM, of course, for us. Now that

8:13

we've got this up, we can just delete

8:14

this file. We don't really need it

8:16

anymore. Now, for just building out the

8:17

CRM, we probably only need one instance

8:19

of Claude to do all of this. But once

8:21

you do start to use this more

8:22

intensively, what we can do is actually

8:24

click again on the Claude logo. It's

8:26

going to open up another session in the

8:28

tabs at the top right here. And what we

8:29

can do is take the separate session and

8:31

we can drag it across the sort of canvas

8:34

right here. I can move it all the way

8:35

over to the right-hand side. And then we

8:37

can have two different Claude's running

8:39

at the exact same time. We can literally

8:41

do this unlimited amount of times. So,

8:42

we can run like four or five different

8:44

Claude sessions all at once visually.

8:46

And this is just something that I do

8:47

like about using Visual Studio Code

8:49

specifically. Okay, so I've just jumped

8:50

back to my main folder that I build all

8:52

of my apps and really do everything

8:54

related to Claude in. Essentially, this

8:56

is one folder on my computer with all of

8:58

my business context, context about me,

9:00

and everything that I do, as well as all

9:02

of my applications, of course. So, for

9:03

me, I'm just going to build out the CRM

9:05

through this existing folder that I'm

9:06

already using. But in your case, if you

9:08

haven't got this already up and running,

9:10

I would obviously recommend just using

9:11

that folder we just created and building

9:13

the CRM out there. But for any future

9:15

builds, what I would recommend doing is

9:16

also creating this sort of central

9:18

folder on your computer where you build

9:20

all of your apps, put all of your

9:21

knowledge and files, and you can really

9:23

build what's really called an AI

9:25

operating system. But to get started,

9:26

all I'm going to do right now is go

9:27

ahead and just speak to Claude and tell

9:29

it that I'd like it to build out a CRM

9:31

for me. Now, initially, what I would

9:33

recommend is not building the entire CRM

9:35

all at once. I think that the best way

9:37

to approach this is just to build out a

9:40

couple of features first. Maybe we just

9:41

get a leads tab, a pipelines tab, and

9:44

maybe like an analytics tab or

9:45

something. Super basic just to get

9:47

started, just to get something built and

9:49

hosted so that you fully understand

9:51

exactly how it all works and what it

9:53

looks like right away. And then when you

9:55

want to add more features and change

9:56

things, we can just do that over time.

9:58

We can obviously always add features

10:00

later. So for now, I'm just going to

10:01

tell it to build out a very basic CRM

10:03

with a couple different tabs and we'll

10:05

add stuff later. Now, the way that I

10:06

like to talk to Claude is just through

10:07

my voice. I do find it is a little bit

10:09

easier. You will see there is a

10:10

microphone button here on VS Code. We

10:12

can just click into this. It's going to

10:14

enable our microphone and I can just

10:16

speak to Claude and tell it to build

10:17

exactly what I've just mentioned. Hey

10:18

Claude, can you go ahead and build a CRM

10:20

system with a couple different tabs? I

10:22

want one for a leads tab. I want a tab

10:25

for the pipeline to track the stage of

10:28

the leads as well as an analytics tab to

10:31

look at all the data across the entire

10:33

app and to see what's going on overall.

10:35

If you could please populate this with

10:37

some mock data as well just to obviously

10:39

see that the system is currently

10:41

working. I then need I then need you to

10:43

push this to GitHub as well. Eventually,

10:46

we are going to host this app, but for

10:48

now, let's just push it to GitHub

10:50

and obviously we need the CRM system to

10:52

be built properly like an actual web

10:55

application that we're going to be using

10:57

in our business later. Okay, so you can

10:59

see that just talked very naturally to

11:01

it, listed what I was looking for with

11:03

the multitude of different tabs. I

11:05

mentioned that I want to push it off to

11:06

GitHub first. I haven't mentioned

11:08

hosting it yet. And I also told it that

11:10

I wanted it to be built out as an actual

11:12

web application. I do think that's

11:13

important to add into this prompt. We do

11:15

want to make sure that it's building it

11:16

all with the right structure of an

11:18

actual web application. So now that this

11:20

is done, there is one last thing that I

11:22

would recommend doing right away. Now,

11:24

you may remember at the start of the

11:25

video that I said I was going to share

11:27

with you a secret skill that was going

11:28

to improve the design of your CRM by

11:31

about 10 times. And to do this, all we

11:33

need to do is go to Google and search

11:35

the front-end design skill Claude. If

11:38

you Google that, you will see this first

11:39

option pop up, which is on GitHub. If we

11:41

click into this, this is the front-end

11:44

design skill that I always use when it

11:46

comes to websites as well as application

11:48

building. Essentially, it's just an

11:50

overall improvement when it comes to the

11:51

design styling of your system. It's got

11:53

a bunch of prompts in here, which make

11:55

it look quite a bit better than your

11:57

traditional AI-generated applications.

11:59

So, to install and use all we need to do

12:02

is just copy the URL of GitHub that we

12:04

are on right here. And pretty much, we

12:05

can just come to Claude and paste this

12:07

front-end design skill right beneath

12:09

this prompt that we have here. Now, I

12:11

have already installed this, so it

12:12

should be able to use it. I might just

12:14

mention it to use the front-end design

12:16

skill. Please make sure to also use the

12:18

front-end design skill when building out

12:20

or designing this web application. So,

12:22

because I have it installed, it's going

12:23

to be able to find it and use it in the

12:25

design of the app. But in your case,

12:27

just provide it with the link, tell it

12:28

to install it, and then use it when

12:30

building out the app. That's literally

12:32

all you need to do. There's no technical

12:33

setup required. You just paste in the

12:35

link and it will work. But at this

12:36

stage, we are good to go. We've got our

12:38

application should get built out, should

12:39

get designed quite nicely. I'm going to

12:41

hit the enter button, send it off to

12:43

Claude, and we'll see what we get back.

12:45

Okay, it's been about 15 minutes, and

12:46

you can see here Claude has gone through

12:48

a pretty big thought process on building

12:50

out exactly what we mentioned at the

12:51

start of the conversation here. You can

12:53

see it obviously went through and did a

12:54

bunch of coding in the background for

12:57

us. Once again, don't get too

12:58

overwhelmed by all of this code. You

12:59

don't need to understand anything that's

13:01

realistically going on here. It's just

13:03

doing it all for us, and it will speak

13:04

to us in plain English at the end when

13:06

it is completed. And we can see here,

13:08

that's what we have. Now, for a quick

13:09

summary as to what has happened,

13:11

essentially, it's built out the CRM,

13:12

it's hosted it locally on my computer.

13:14

We've been given this localhost link, so

13:16

hopefully you have as well. And it's

13:18

also managed to push it off to my GitHub

13:20

account already. Now, do note because I

13:22

already connected my GitHub account to

13:24

my Claude code right here, it was able

13:26

to connect into my account, create the

13:28

project, and send it into my account all

13:30

automatically without me needing to do

13:32

anything. Now, in your case, if you have

13:33

yet to connect GitHub to Claude Code,

13:36

essentially, what will happen is during

13:38

its process of building is it's very

13:40

likely going to ask you to authenticate

13:42

your account with Claude Code. All of

13:44

that means is that it's going to give

13:45

you a login link that you'll need to

13:46

click. It'll just redirect to your

13:48

browser, log into your GitHub account,

13:50

and then it'll connect itself to Claude

13:51

Code. That's literally all you need to

13:53

do. You might need to send a message to

13:54

Claude telling it that you've connected

13:56

your account. It'll then continue, and

13:57

you all should get to this stage. And

13:59

once you are at this stage, what we can

14:00

do is click on this localhost link right

14:02

here. And once we do that, it's going to

14:04

load us into the CRM system that it just

14:06

built out. So, this right here is our

14:08

CRM system. We can see at the top left

14:10

we've got our leads tab, which is this

14:12

right here. We've got our pipeline right

14:14

here, and the analytics tab as well. And

14:17

the design is looking pretty good. We've

14:19

got some cool graphs coming through. The

14:21

coloring is quite well themed. You can

14:23

see we've got gradients and different

14:24

shades of this green coming through.

14:26

Obviously, you can be as specific as you

14:28

want as to the colors that it can use.

14:30

You can prompt it a bit better to be

14:31

shaped around the branding that you

14:33

would like to use. But, in literally 15

14:35

minutes, this is a fully functional CRM.

14:38

If I go to the pipeline, we should be

14:39

able to drag these across different

14:41

stages. You can see that that person has

14:43

now been updated into the next stage. We

14:45

can go back to the leads. We should be

14:46

able to click into these leads, view

14:49

different details about this individual.

14:50

We can delete leads, update leads, do

14:52

whatever you would traditionally in a

14:54

CRM. At the top right, we've got this

14:55

new lead button we can click. We can

14:57

create a new lead here. We should be

14:59

able to go to the analytics. We can have

15:00

a look at all of the analytics. They

15:01

should all be updated and connected to

15:03

the pipeline as well. Now, obviously,

15:05

this is all mock data, and I will show

15:07

you in a minute how we can take existing

15:09

data from one of our existing CRMs and

15:11

upload this into this CRM so that we

15:13

don't have to do really any manual work

15:14

to convert, you know, your previous

15:16

CRM's data to a brand new one. But, the

15:18

possibilities are literally endless with

15:20

a CRM. Obviously, we've got these three

15:21

tabs right here. but in plain English, I

15:23

can literally tell it to add anything

15:25

else in this tab for whatever we might

15:27

want. We can change these graphs, we can

15:29

change the data, we can change

15:30

absolutely everything about what we're

15:32

looking at here to be exact to what we

15:34

want. Now, before I start adding more

15:35

features and changing and modifying

15:37

anything, I want to get this hosted on

15:39

the internet before we do that. So,

15:40

because we've already told it to push

15:42

the project off to GitHub and it's given

15:44

us this GitHub link right here. If we

15:45

click into this link, it is going to now

15:47

load us into the GitHub repository, as

15:50

they call it, which is just the storage

15:52

of all of our code on our account on

15:54

GitHub. And the main benefit of doing

15:55

this is just to ensure that we are

15:57

saving this code and we're tracking all

15:59

of the changes that we're making. Now,

16:00

the next step, of course, is going to be

16:01

pushing this from GitHub to Hostinger.

16:04

Now, once again, Hostinger is what we're

16:05

going to be using to take that code,

16:07

which is just sitting on the internet,

16:09

and turn that into a fully functioning

16:11

website with our own domain URL that

16:13

myself and anybody on my team can fully

16:15

access from anywhere. Anyways, the next

16:17

step is going to be installing the

16:19

Hostinger MCP server. Okay, so to

16:22

install Hostinger, you will have to go

16:23

to hostinger.com/connector.

16:26

I'll have my link for this down below in

16:27

the description. Once you click that

16:29

link, you're going to land on this page

16:31

right here, which says, "Bring Hostinger

16:33

into your AI coding workflow." That's

16:34

exactly what we're looking to do. Once

16:36

we're on this page, we can scroll down

16:38

all the way to the pricing options and

16:40

we'll see all the way at the bottom here

16:42

that we have the business plan on the

16:43

left-hand side here. And we can get

16:45

started for just $3.99 a month to get

16:48

started, so pretty cheap to try it out,

16:50

see if you like it. So, we'll just get

16:52

started with this plan, that's all that

16:53

we need for now. Once we are on this

16:55

page, at the moment, it is by default

16:57

set to 48 months. Obviously, you can

16:58

choose however long you'd like to keep

17:00

it for. You can just purchase a month,

17:02

of course. And as I mentioned earlier, I

17:03

do have my own coupon code. If you click

17:05

on coupon codes, you can put my name,

17:07

Brendan Jouault, click apply, and you

17:09

will see that you will get a discount by

17:11

using that code. So, obviously, I would

17:13

recommend doing that. And once your

17:14

account is created, you should land on

17:16

the main dashboard right here. But, we

17:18

don't have to really dive into this too

17:20

deep right now. What we're going to be

17:21

doing is downloading the official

17:23

Hostinger plugin, which is going to be

17:25

directly plugged into Cloud Code. This

17:27

right here is

17:28

cloudcode.com/plugins/hostinger.

17:31

You can come here to read a little bit

17:32

about exactly what this does, but it's

17:34

pretty straightforward. All that we need

17:36

to do is just come back to Cloud Code,

17:37

and then paste this in right here, which

17:40

is /plugin install hostinger. And

17:42

ultimately, this is going to be

17:44

installing the official plugin for Cloud

17:46

Code uh that Hostinger has created,

17:48

which is going to do pretty much all of

17:49

the setup for us when it comes to

17:51

connecting into our Hostinger account

17:53

and authenticating all of the

17:54

connections and MCP. Essentially,

17:56

everything required for our Cloud Code

17:58

to be able to create these servers that

18:00

we're going to be hosting our code on

18:02

later in the video. What you can also

18:04

do, especially if you are in Visual

18:05

Studio Code, which I like to do, is just

18:07

type /plugins. You can then click on

18:09

manage plugins. This will pop up right

18:11

here. And then, you've got this manage

18:13

plugins. You can search for Hostinger in

18:15

this tab right here.

18:17

And then, you'll see this skill is

18:18

popping up once again, because this is

18:19

an official plugin. We can then hit the

18:21

install button right here. Once you

18:23

click that, it's going to give you a

18:24

couple different options here to install

18:25

it for you for this project or install

18:27

it locally. I like to just install it

18:29

for myself and all the projects. That

18:31

way, I can use this plugin and Hostinger

18:33

across all of my apps, and I don't have

18:35

to install it every single time. So,

18:36

I'll just click on that. And once I've

18:37

done that, you'll see it is now in the

18:39

installed section. It's now just telling

18:41

me to restart Cloud to apply the plugin

18:43

changes. So, just click restart, and it

18:45

should be officially done. And then, the

18:46

last thing we do need to do, of course,

18:48

is authenticate our account with this

18:50

now connection with Cloud Code. All I

18:52

did to prompt the authentication is I

18:54

just asked my Cloud Code if the

18:56

Hostinger plugin was good to go. Uh of

18:58

course, because I'm not logged in yet,

18:59

it essentially went and looked through

19:01

the connections, and then it opened up

19:02

this browser tab right here, which it

19:04

says, "Connect your account. Hostinger

19:05

is requesting access to your account."

19:07

It's already logged in, because I've

19:08

done it in that browser. Should be able

19:10

to just click allow, and it should

19:12

authenticate successfully and give me

19:13

all the permissions to log into my

19:15

account. Now, if you are having any

19:16

troubles with the authentication, one

19:18

thing that you can do to double-check

19:20

that it is all properly authenticated is

19:22

just type {slash} MCP into your command

19:24

box at the bottom here. Then in the

19:26

customize section, just click on MCP

19:28

servers. This is going to be your list

19:30

of MCP servers. If we scroll all the way

19:31

to the bottom, we will see plugins at

19:34

the bottom here and I can see plugin

19:35

Hostinger at the bottom. At the moment,

19:37

mine says needs authentication. So, my

19:39

account is not connected at the moment.

19:41

I just need to click on authenticate.

19:43

It's going to ask me if I want to open

19:44

up a new tab. I'm going to say yes. And

19:46

then we can see it's asking me to once

19:47

again log into my account. So, I will of

19:49

course click allow and then connect my

19:51

account and we can see here

19:52

authentication successful. And coming

19:54

back to Claude, this should swap over to

19:56

green and be a connected account. And

19:58

there we go, it's now connected and we

19:59

should be good to go. The plugin is

20:00

connected, MCPs are connected as well.

20:03

Uh so, we should be good to go. But if

20:04

it isn't, Claude will just tell us if we

20:06

need to authenticate and it should be

20:07

pretty seamless. If you ever get stuck,

20:09

once again, you can just ask Claude what

20:11

it's stuck on or what you're confused

20:13

with and it will pretty much answer

20:14

everything as you'd like. Okay, so

20:16

really all we need to do is just tell

20:17

Claude code right now because Hostinger

20:19

is connected to set this GitHub project

20:21

up on Hostinger. Claude, I'd now like to

20:23

push this GitHub project off to

20:25

Hostinger. Now, to make this build as

20:27

seamless as possible because I have done

20:28

this a few times before with Hostinger,

20:31

I've actually created a Hostinger skill

20:32

file, which is a set of instructions on

20:35

how to exactly turn a GitHub project

20:37

into a fully ready to go Hostinger

20:39

website. And so, I've pretty much just

20:41

attached this skill right away to my

20:43

message. And this is essentially the

20:45

skill file right here. So, it's pretty

20:47

extensive. Claude usually will just

20:49

figure out everything that it needs to

20:50

do anyways, but I've just created this

20:52

skill file because it will just speed up

20:54

the process of doing everything. It

20:55

doesn't have to figure out what to do

20:57

because we're just giving it the

20:58

instruction set on what exactly to do.

21:00

So, I've just given it this skill file

21:02

and if you do want access to this skill

21:03

file, I'll just have it for a completely

21:05

free download in my school community

21:07

link down below in the description as

21:08

well. And what I'll do is I'll just tell

21:10

it that I've given it this skill file on

21:12

exactly how to do this process. I've

21:14

also attached a skill file on exactly

21:16

how to take this GitHub project and push

21:19

it off to a Hostinger project. Okay,

21:21

we're good to go. I'm going to now send

21:22

this message. We've got the skill

21:23

attached. I'm telling it to use that

21:25

skill

21:26

and we should get our project hosted on

21:28

Hostinger in just a second. Okay, so

21:30

here we go. It's been about another 15

21:32

minutes and after that ran, it literally

21:34

ran all the way through till the code

21:36

once again. Don't have to worry too much

21:38

about this,

21:39

but all the way from our message all the

21:41

way up here. Got our message and then

21:43

just ran and ran and ran.

21:45

Did everything it needed to and we now

21:46

have this deployed on this link right

21:49

here. So this is a temporary domain

21:51

which is generated by Hostinger. We

21:53

obviously don't have to use this all the

21:55

time. We can do a custom domain and I

21:56

can show you that in just a second. But

21:58

if we click into this link, we can now

22:00

see we have the exact same application

22:02

as we had before. But this is now live

22:04

on the internet. It's not a localhost

22:06

link. I can turn my computer off, this

22:08

will still work and I can share this

22:09

link with other people now as well and

22:11

it will work for them. Now the one key

22:13

thing to note right now is that this is

22:14

actually still not connected into GitHub

22:16

yet. We've essentially just hosted that

22:18

project on Hostinger. We haven't

22:19

directly connected into GitHub yet. So

22:21

all that we need to do is just head over

22:23

to Hostinger, log into your account of

22:24

course, go to the left hand side, click

22:26

on websites, go down to web apps and

22:28

then click on add website. Once you do

22:30

this, we go down to deploy web app.

22:32

We'll click into here. It's going to ask

22:34

us which domain we want to use. I'm just

22:35

going to click on use temporary domain.

22:37

So it's going to do something very

22:38

similar to what we had earlier. Then

22:40

we're just going to click on continue

22:41

with GitHub. We'll click into this.

22:43

Obviously got to log into your GitHub

22:44

account. Mine is already connected at

22:46

this stage. Scroll all the way to the

22:47

bottom, I'll see this inflate CRM

22:50

ledger. This is the one that Cloud Code

22:52

just created earlier. So you should see

22:54

some kind of a CRM project in here

22:56

already. And at this stage, all we need

22:57

to do is just click the deploy button

22:59

and this is going to start to deploy our

23:01

app uh from GitHub to Hostinger already.

23:04

Okay, so we can see here it says

23:05

deployment completed. We've got our link

23:08

right here. If I click into this, we

23:10

will now see our app and this should now

23:12

be connected from GitHub to Hostinger

23:14

and ready to go. Now, do just note

23:15

because we have connected it through

23:17

GitHub, we do have a new domain that

23:18

we're using. So, this one we're no

23:19

longer going to be using. We can delete

23:21

this project. Uh the new domain is going

23:23

to be the one that this is on which, in

23:25

my case, is the forest green domain and

23:27

the one that I made earlier was this

23:29

one. So, just note that it's going to be

23:31

a new project now that it's connected to

23:32

GitHub. What I would do is just come

23:34

back to Cloudflare here and just tell it

23:35

that we are now running on a different

23:37

domain. Hey Cloudflare, I've just

23:38

connected my GitHub to Hostinger. So, we

23:41

have a new domain for the project to

23:43

look at.

23:44

I'll just go ahead and paste that in

23:45

now. Can you make sure to just set

23:47

everything up properly now with this

23:49

project? Make sure it's all working and

23:51

functional. Make sure the database is

23:53

all working properly and it's all good

23:54

to go.

23:55

So, I'll send that off, but ultimately

23:57

because they've got SMTP access, it

23:59

should be able to do everything mostly

24:00

for us, uh but we'll see what happens.

24:02

Okay, so finally, we have now got

24:04

everything ready to go and set up. It

24:06

says GitHub is properly wired into our

24:08

account here and there is just one last

24:10

thing that we need to do to make sure

24:11

that everything is all set up and ready

24:12

to go and connected. And that is just

24:14

adding this database URL that it's

24:16

giving me here. Adding that into our

24:18

Hostinger account just so that it's all

24:20

ready to go. All that we need to do is

24:22

just come back to Hostinger, go to the

24:23

project that it created for us. In my

24:25

case, it was this forest green project.

24:27

On the left-hand side, we'll see

24:28

environment variables. We just need to

24:30

click into this and on this page we'll

24:32

click add environment variable and we

24:34

just need to create a database key. And

24:36

we can see here it's also giving us the

24:37

instructions on how to do it. And if you

24:39

ever get stuck, you can just ask Claude

24:41

on what you're stuck on and it would

24:42

probably just tell you exactly what you

24:44

need to do. But we can see here it's

24:45

telling us that we need to go into the

24:46

environment variables and then take this

24:48

database URL. So, I'll copy this name.

24:51

I'll paste database URL as the key. And

24:53

then I'll just make sure to copy

24:54

everything else from the MySQL point of

24:57

this bit of text here and I'll paste

24:59

that into the value field and just click

25:01

add. Once you've done that, we'll click

25:02

apply changes and when we apply a change

25:05

for the environment variable, it will

25:06

just deploy the entire app over again

25:09

and then we should be good to go. So, we

25:11

can see here building, so it is

25:13

currently deploying the site once again.

25:15

Once that's done, we should be good to

25:16

go. We should be able to visit the site

25:17

and we should have a fully functional

25:19

database in which we can now start to

25:20

build more features on. Okay, it's now

25:22

completed. We'll click into this and it

25:24

should load us now into the CRM with our

25:27

database all loaded in here as well and

25:29

we can click through all these tabs and

25:30

it is all working ready to go. Now, when

25:32

it comes to authentication and data

25:34

security, so we are going to be using

25:36

Hostinger's database and that's what we

25:37

set up at the moment. If we have a look

25:40

at the bottom left, you'll see

25:41

databases. We can click into this and it

25:43

will open up and show us the databases

25:45

that we have currently running. I can

25:46

click on enter this admin panel and

25:48

we'll actually be able to see the

25:49

database, the back end. You don't have

25:51

to obviously look at this at all, but

25:53

we'll see what a leads table right here.

25:54

Should be able to click into this and we

25:55

actually see all the data from our

25:57

application is all here and stored. When

25:59

it comes to user access permissions,

26:01

what we can do is just come to Claude

26:02

and tell it to set up an authentication

26:04

with a login system to restrict

26:06

obviously different users. If you do

26:07

want this to be a bit more secure, what

26:09

I would recommend is telling it to set

26:11

up a Google OAuth login where

26:13

essentially they have to use their

26:14

Google account to log into your

26:16

application and it's just going to use

26:17

some pre-built code that's Google's

26:19

already created for sort of

26:20

authenticating apps. So, that will just

26:22

make it a little bit more secure than

26:23

just getting Claude itself to create

26:25

that login system. Okay, now let's say

26:27

you wanted to import some existing data

26:29

from a CRM system that you're currently

26:30

using and you want to fully export and

26:32

import that into this new system. What

26:34

I've gone ahead and done is created this

26:36

big mock database right here with about

26:39

almost 200 contacts in it with all of

26:41

this data which is all scattered around

26:43

the place. All the data is probably

26:45

positioned differently than it is

26:46

currently being used in our current CRM

26:48

system, but because of the power of AI

26:51

and the power of Claude, of course, what

26:52

I can essentially do is take this export

26:55

of data, upload it to Claude, and just

26:57

say this is the new set of data that I

26:59

want to use in our CRM system. Can you

27:00

just populate this throughout our

27:02

system? And because the AI is smart

27:03

enough to read this entire document and

27:05

understand everything about the app and

27:06

this document itself, we don't have to

27:08

do anything in terms of like modifying

27:10

this data. It's going to do everything

27:11

for us. So, realistically, all you need

27:13

to do is just export the data from your

27:15

current CRM system, get some sort of a

27:17

CSV file, and then give it to Claude and

27:20

tell it to use that data instead. I've

27:21

just exported a list of data from my

27:24

previous CRM that I now want to use in

27:26

our current CRM here. So, I don't want

27:29

to use the data that we've got at the

27:30

moment. I want to completely transform

27:32

it into my previous CRM data, so it's up

27:34

and ready to go for our team to start

27:35

using. Okay, I'll send a message like

27:37

that off, and I'm also going to paste in

27:39

the exact location of that CSV file on

27:41

my computer, so it's able to find that

27:43

file and then use it to obviously get

27:46

all of the data out of it. Okay, so that

27:48

is now done, and you can see it says

27:49

your CRM is loaded with the real data

27:51

and all running. It's given us the link

27:53

again. And if we go back to our CRM, we

27:55

can see that this is the updated data.

27:57

These are no longer what we had before.

27:59

It's very different data.

28:00

Um and the pipeline is all updated with

28:02

this as well. And just to double-check,

28:04

obviously this guy's name is Michael. We

28:06

can jump into the Excel sheet, and we

28:08

can have a look in here. We search for

28:10

his name, we can do find all, and we can

28:13

have a look and see that his

28:15

details are on this row right here. So,

28:17

this data has been imported properly.

28:20

Um and it's probably tried to import as

28:22

much of it as it can. If we jump back

28:23

into the CRM, we can see that it's got

28:25

all this data. That is populated as well

28:27

into here. So, we have now transitioned

28:30

from our existing data into our brand

28:32

new CRM, and you can pick up your

28:34

operations from this point on. Okay,

28:36

next up, I want to talk about

28:37

automations in our CRM system as well.

28:40

So, obviously this is not just a static

28:41

webpage. This is a server that's running

28:43

24/7. So, what that allows us to do is

28:46

that we can build out uh multi-step

28:48

workflows that are timed and run at

28:50

certain times because the server is

28:51

always running. We can build those kinds

28:53

of workflows. We can really automate any

28:55

part of this CRM, not just building the

28:57

front-end interface. And to do this,

28:59

once again, it's as easy as coming to

29:01

Claude and just telling it what we want

29:02

to do. So, one thing that we might want

29:04

to do, quite common in a CRM, is maybe

29:06

like an email automation or something. I

29:08

could tell it that I want to have a

29:09

multi-step uh email automation, some

29:12

sort of a workflow tab, maybe, that

29:14

sends emails out to maybe cold leads or

29:17

uh very old leads to maybe re-engage or

29:19

reactivate them. Hey Claude, I want to

29:21

now build out a workflows tab which we

29:24

can track a multi-email

29:26

uh reminder step to our old leads to

29:29

reactivate them. So, if a lead is a

29:32

certain amount of days old, we want to

29:34

send them an email and then another

29:35

series of emails to reactivate them uh

29:37

to be aware of our services and, you

29:39

know, make more purchases for our

29:41

products. Uh if you could build this and

29:43

integrate resend for the email sending,

29:45

that would be perfect. Okay, so once

29:47

again, just sort of naturally speak to

29:49

it, tell it exactly what you're looking

29:50

for. I told it to create a new workflows

29:52

tab so we can visually see this, and I

29:54

also told it to use resend. It's pretty

29:56

much just an email tool for developers.

29:58

I recommend using it. I use it all the

30:00

time when it comes to email sending,

30:01

especially for like a CRM. There are

30:03

other providers like resend out there so

30:05

you can just use them as well, but this

30:07

is just one that I've been using. The

30:09

main thing is that you just want to

30:09

avoid using your own Gmail account or a

30:12

Google Workspace account. They're not

30:13

necessarily built for transactional

30:15

emails, which is what these are going to

30:16

be. And you could end up getting those

30:18

emails sent to spam or just getting your

30:20

email completely blocked if you do try

30:22

and automate sort of like a Google

30:23

Workspace account. So, as easy as it was

30:25

to tell it what I wanted to build, I can

30:26

now send that off, and it's going to

30:28

start, look up everything it needs to in

30:30

order to integrate it. Don't have to do

30:32

anything on our end. And I can now see

30:33

we've got this workflows tab in our CRM

30:36

now, and it looks like we're able to

30:37

create a new sequence. We can see we've

30:39

got a whole setup here for creating our

30:41

automations. It's even got multi-step

30:43

workflows for our emails all created

30:46

custom just because I simply asked for

30:48

this to be added into this system. Of

30:51

course, if you didn't even want to

30:52

manually set this up here, you could

30:53

literally just tell Claude exactly what

30:55

kind of workflow setup that you'd want.

30:57

Looks like it's already done a bit of

30:58

the work here, but it's got the manual

31:00

settings if you want to modify or change

31:01

small things, but you could pretty much

31:03

just tell Claude to do all the setup for

31:04

you, so you don't even have to do any of

31:06

this manually yourself. It does look

31:08

like it requires a Resend API key in

31:10

order for this to actually be active and

31:12

up and running. So, you will of course

31:14

need to sign up for a Resend account,

31:15

get that API key, provide it to Claude

31:17

here. It'll then use that API key,

31:19

should set it all up, and obviously

31:21

takes a bit of time to get these

31:22

features up and running. You will need

31:24

to do a bit of testing to actually see

31:25

if the email gets sent, but that is why

31:27

I recommend sort of doing one feature at

31:29

a time. Just build it out for one

31:30

particular use case, then you can spend

31:32

a few days making sure that it is

31:34

working as you'd expect it to, adding

31:36

any finalized things that you want, and

31:38

then moving on to the next feature after

31:39

that. But, that is literally all you

31:41

need to do, and now we have a 24/7

31:43

workflow automation system built into

31:45

our CRM, and so you don't have to

31:46

subscribe to something like make.com or

31:48

Integromat. You don't need these

31:49

platforms anymore because we've got our

31:51

own server on Hostinger that runs 24/7.

31:54

We've got this code built ourselves. We

31:56

can just tell Claude to build these

31:57

automation workflows, and we're good to

31:59

go. Now, lastly, I want to showcase how

32:00

we can also build a mobile application

32:02

for our CRM as well. And this is super

32:05

simple to do. Essentially, we can just

32:06

access this website through our phone,

32:08

but we can get Claude to optimize it for

32:10

mobile. So, you can see on my phone

32:12

screen right here. This is the CRM on my

32:15

phone. It's on the Chrome browser, and

32:16

you can see that it is actually running

32:18

not too terribly. It looks like we can

32:19

actually manage quite a bit of it

32:21

through this, and it seems to be working

32:22

not too bad. I would say that even in

32:24

this pipeline tab, there's probably a

32:25

little bit of work that could be done to

32:27

optimize this for mobile, but this

32:29

website is literally running pretty

32:31

well, and we'd be able to use this

32:32

already. But, once again, all I need to

32:33

do is tell Claude to optimize it for

32:35

mobile. It'll do some changes to the

32:37

mobile configuration of the current

32:38

setup that we have and make it a bit

32:40

more mobile optimized for us. Hey

32:42

Claude, can you go ahead and just update

32:43

this website to be a bit more mobile

32:45

optimized so when I'm viewing it on my

32:47

phone, everything just feels a bit

32:49

smoother and it's a bit easier to

32:50

access. Now, if you didn't want to use

32:52

the CRM on a web browser on your phone,

32:54

you can actually get Claude to build

32:56

this into like a legitimate mobile app

32:58

which is a separate app on your phone.

33:00

I've previously used this tool called

33:01

Expo Go. Essentially, it just allows us

33:03

to use their already set up systems for

33:06

building out actual mobile applications.

33:08

iOS and Android works through this as

33:10

well. I'm not going to do this right

33:12

now. I don't think it's super necessary

33:13

for everybody's use case, but you can

33:15

literally tell Claude Code to set up a

33:17

mobile app through Expo Go and relate

33:19

some of the data as well. We can pull

33:20

from your website CRM database and use

33:23

that in this kind of an application.

33:24

Okay, and here we go. It's telling us

33:26

that it is now made those changes. It's

33:28

told us what was wrong before, what it's

33:29

changed, and that it should now be

33:31

updated. And I can see on my phone now

33:32

that the leads are no longer cut off

33:34

like they were before on these sides. I

33:36

can see that the pipeline is just sort

33:38

of one tab now. It's not sort of cut off

33:40

on the sides as well. And everything

33:42

else just looks a lot neater and more

33:43

optimized for an actual mobile

33:45

experience. So, I'd be able to use this

33:47

as an actual mobile app. I can just save

33:48

this webpage onto my home screen of the

33:51

phone as well and just boot this up

33:52

whenever I need. You now have a fully

33:54

functioning CRM system that you've

33:56

imported your existing data into. You've

33:58

got the mobile app working. You've got

33:59

automations working on this as well. And

34:02

now hopefully you're in a good position

34:03

to start to add more and more features

34:05

as you continue to use it. From my

34:07

personal experience, I'm still adding

34:09

features to my CRM today as I'm always

34:11

finding little things to optimize. So,

34:13

I'm sure the same will happen with you

34:14

as well. Once again, if you wanted to

34:16

get 10% off your Hostinger plan, I'll

34:18

have my link to Hostinger at the top of

34:19

the description and pinned at the top of

34:21

the comments down below as well. It does

34:23

just help to support the channel if you

34:25

use my link. So, I'd really appreciate

34:26

it if you did.

Interactive Summary

This video provides a comprehensive guide on building a custom CRM web application using Claude Code, Visual Studio Code, and Hostinger, without requiring traditional programming knowledge. The process includes initializing a project, using AI to generate features like leads, pipelines, and analytics, hosting the application, importing existing data, setting up email automations, and optimizing for mobile use.

Suggested questions

5 ready-made prompts