Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build Your Own CRM in Lovable Step-by-Step!
You have completed Build Your Own CRM in Lovable Step-by-Step!
Preview
This workshop introduces Lovable.dev, an AI-powered tool that helps you turn ideas into working web apps using simple prompts. Watch as Christian and Dan get hands-on with features like text-to-app generation, Supabase integration, and easy deployment. Whether you’re building a prototype or just exploring what’s possible, it’s a practical session for anyone interested in faster, simpler app development.
This is part of the AI for Everyone: Build Power Apps Without Coding track. Check out the track to see the rest of our No-Code content. Stay tuned—new content is continually being added, so be sure to check back regularly for updates!
Tools used in this video:
Documentation:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hey everyone, welcome back.
0:09
This is Christian and Dan building again.
0:10
We're going to be building a lovable
to create a basics lightweight CRM
0:13
that can just store records for us that
we'll be using for our development app.
0:18
Absolutely.
0:24
We're already here in the lovable
homepage.
0:24
That's at lovable.dev.
0:27
And again,
0:29
we'll link that in the teacher notes below
so you can just jump right in.
0:29
And of course, you can kind of watch
and see what we build and follow along.
0:33
But you won't be able to build
exactly what we build step for step
0:36
just because
we're using AI generated content here.
0:39
But before we jump in,
if you noticed or if you've had the chance
0:43
to watch some of our previous videos,
you may have noticed we've built
0:46
using a lot of pre-planning documentation
that includes
0:50
PRDs, chat GPT, using different tools
to kind of plan out the document
0:55
or plan out the project
1:00
in full, as well as the documentation
to keep the app on track.
1:01
And as awesome as that is today, we're
going to kind of show off using broader
1:06
and simpler prompts, as well as just
conversating back and forth with the AI.
1:10
The AI is extremely smart
and extremely intelligent
1:14
and great
at having a conversation back and forth.
1:17
So we're just going to use that
to simply build out our idea,
1:21
because I feel sometimes, you know,
especially using these tools to quickly
1:24
spin up stuff, it's very easy
to just jump right in and just start
1:28
building some things as opposed
to sitting around and planning a lot.
1:31
And that's fine.
1:35
You know, we definitely want to plan and,
you know, understand what we're making.
1:36
But again, just with all these tools,
we have options.
1:40
So I'm just going to hop right in.
1:44
while Dan is writing the
1:51
prompt again
you don't have to jump right in
1:52
you can plan as Dan said
but what we're doing today is
1:56
we're just going to go in kind of blind
we have an idea of what the CRM should do
1:59
and that's all we're going to be doing
just typing it in and see how it goes
2:06
OK, and I just use a simple prompt
that I want
2:18
to create a simple CRM and that's customer
relationship management software.
2:20
So a simple CRM that allows us to record
users, create tasks
2:24
and update our deal flow.
2:28
And again, for anybody that's unfamiliar
with a CRM, updating the deal flow
2:29
just means keeping up with the contact
and the different stages of the deal
2:33
you're in.
2:37
Some people might be might be their first
initiation or first point of contact.
2:38
someone else's may be our third
or fourth time communicating
2:43
it may be time for a meeting
or they may be ready to buy
2:47
so we just want to put whatever stage
they are in the cycle in our crm
2:50
and if you're
wondering what are other serums out there
2:56
serums salesforce or hubspot
are the two biggest serums out there
3:00
but we're building something
a lot more lightweight
3:05
We don't need all those bells
and whistles.
3:07
It's just something that we need
that works for us
3:09
and the app
that we're building. Absolutely.
3:13
And that's a big thing is it's
very easy to get caught up in these tools
3:16
that have a lot of features
and bundle a lot together.
3:21
I feel this development of these tools
is bringing an unbundling
3:24
of these softwares
and these services to where you're allowed
3:30
to create your own simpler, more agile
versions
3:32
of these softwares
that only you use in your workflow.
3:36
So it's just an error of custom software,
if that makes sense.
3:39
And Lovable is
3:48
just producing all of our code still,
working on a few different things.
3:48
Looks it's inputting some default users.
3:52
okay yep
4:02
as to be expected
since it loaded so much code and so much
4:03
in-depth features and projects of this
we're actually
4:08
going to have to ask it to debug
because it looks we have a white screen.
4:12
Okay, we've encountered a white screen.
4:20
I guess that means we have an error.
4:23
Can you please check the logs
and help us debug this, please?
4:25
And when I say check the logs,
4:36
that just means the error logs
behind the scene on the back end.
4:37
And if you're not familiar with that,
no problem.
4:41
You can just say check for errors
or simply debug.
4:43
I just know to do that from the back
and forth I've had with these tools
4:46
that I've known to start saying that
because I've seen it said to me.
4:50
Yeah,
4:57
kind of tugging back and forth
with these agents or platforms,
4:57
you start learning the jargon,
which can be a lot sometimes.
5:00
Oh, absolutely.
5:05
All right.
5:06
It looks it's done, but I'm going to go
ahead and pop this into a new window.
5:06
So it actually gives us some room to work
here.
5:10
OK, awesome.
5:14
We have our CRM dashboard.
5:15
And we have total contacts,
we have our open
5:22
tasks,
active deals and our meetings this week.
5:25
We have the recent contacts
and then we have upcoming tasks.
5:29
So we might need to follow up with Alex,
send proposal to Globex
5:33
and schedule a meeting with the team.
5:37
Christian you do a lot of work with CRMs
how does this look to you?
5:41
This looks what I would expect
a very lightweight CRM to have.
5:45
I use HubSpot.
5:50
This looks
5:53
a lot
cleaner and more appealing to the eyes.
5:54
Awesome
5:57
What I would check next is
can we go into these different
5:59
categories
and alter them we would in a real CR.
6:04
I'm , hey, this has been shifted to a deal
now, or let's move this to a meeting.
6:08
Absolutely.
6:14
So I don't know if you noticed
as you were talking,
6:15
I clicked right here, view all contacts,
and it does the same thing
6:17
that, you know, I'm
6:21
assuming this contacts button here does,
that it takes us to our contact page.
6:22
So that's a nice start.
6:27
And we can edit the contact,
email, call, delete.
6:29
I'm sure these, you know,
don't work at the moment, but, you know.
6:34
The ideal, the functionality is very nice.
6:39
Here we
have our to do list, our task manager.
6:43
Which, you know, it's
kind of building off
6:46
what we built in our last video
when we built the to do list.
6:49
So it's kind of has that
same task management functionality.
6:52
And here we can sort
6:56
by the different types of tasks,
depending on what stage it's in.
6:58
if it's still to be done,
you know, if we start to do it,
7:01
if it's in progress or if it's completed.
7:05
So very cool.
7:08
And the deal,
7:13
you even keep track of the deals
and how much you're making or losing.
7:14
If you lose a deal,
that's pretty impressive being unprompted.
7:18
Yeah, I really
I really this, what we have so far.
7:23
Let's see.
7:25
OK, let's edit. Can we edit?
7:27
OK, no, we can't.
7:28
can we add a deal?
7:33
Okay, we can.
7:36
Let's just say
we're doing a deal with Treehouse.
7:37
Oh, Treehouse web proposal.
7:40
Company's Treehouse.
7:46
Okay.
8:09
Oh, that's interesting.
8:09
It has a probability
how likely you feel that you know
8:10
you are to close this deal.
8:13
We're going to say 50% chance.
8:16
That's pretty cool.
8:19
HubSpot has that option too.
8:20
So that's really cool that they're pulling
some of the best practices.
8:22
I'm just going to put
description goes here.
8:28
and let's see
8:30
oh there it is
on the very bottom right here
8:34
awesome that's very cool
8:38
okay so one thing i'd to see
8:41
okay the edit function
8:48
isn't there for the customers to
8:49
okay so we're basically going
to have to hook up the database
8:52
which might reset our data and our users
and our tasks, but that's okay.
8:56
And then from there,
we should be able to start adding
9:00
more functionality,
such as the ability to edit and more so.
9:04
Yeah,
9:11
and that makes sense because these are all
just made-up contacts,
9:11
and it's not really talking to a database
to kind of change the information.
9:15
Absolutely.
9:21
So we're going to go ahead
before we go any further
9:22
and just hook up our SuperBase database.
9:25
So we'll go here to SuperBase.
9:28
And I've already connected.
9:32
You'll want to connect
with your SuperBase account.
9:34
Then create a new project.
9:38
We're going to call this
9:45
SimpleCRM.
9:46
Okay,
9:55
then we just have to wait for our project
to finish setting up.
10:04
And this can take a while.
10:07
It can take anywhere
from one to five minutes.
10:09
So just give it a little while.
10:11
One thing I'm going to do is I'm going
to go over here to this sidebar,
10:13
and I'm going to go to authentication,
10:17
because that's something
we're going to set up immediately.
10:19
and let's see here
10:23
and under sign in sign up
we can have the way
10:27
you're able to authenticate we're going to
just keep it simple and do email
10:30
but for our testing purposes
we're going to turn off
10:35
confirm email where they have to get
a confirmation email and click on
10:38
that to set up an account because again
we're just testing here
10:43
but of course that's a great thing
10:49
to have normally set up
10:51
and it's still setting up again
this is normal
11:05
it says it can sync up to five minutes
11:08
okay yeah
11:17
just keep letting it do its thing
security issues.
11:17
These are small.
11:21
These are normally
11:21
things ,
11:24
okay, see leaked
password protection disabled.
11:26
So that's
11:29
a security warning.
11:31
Same as how I just turned off
the email confirmation.
11:32
These are great
things that have security wise.
11:36
So when you turn them off,
you'll get a warning
11:39
that you're not using them,
but you can simply ignore these for now.
11:41
And as you can see here,
the project status seems to be finished.
11:44
It's no longer spinning and it's glowing
green and we have everything set up.
11:47
Appears to be healthy,
checkmark and good to go.
11:52
So we're just going to head back to
11:56
lovable here.
11:58
Let it load up.
12:00
And I'm just going to say.
12:03
I've attached my super base account.
12:06
Can we go ahead and set up
a super base database and set up
12:09
user authentication?
12:13
and the reason we're doing this setup
so early is simply
12:29
because you don't want to get too far
into your app to where you're building
12:33
more complex and hardcore features
12:38
that are you know
12:43
that are showing up
12:48
in different places, in the CRM,
the contacts
12:49
that shows up on our dashboard
that shows up in the contact space.
12:53
But the contacts are also connected
to our tasks and our deals flow
12:56
So there a lot of intertwining there
If we keep building out functionality
13:00
and keep building out features of our app
and then ask to build the database
13:04
it's pretty most certain
that it's going to start to build it
13:08
the best it can, but run into some errors
trying to route everything
13:12
and keep everything configured properly.
13:16
That is correct.
13:20
So it's good to set this up
in the very beginning before
13:21
we move on to other features
that do require a database
13:24
that you may not have thought,
but because he set it up in the beginning,
13:29
you don't have to worry about that
moving forward.
13:33
And then here it is.
13:51
Okay, so we'll just go back.
13:53
Actually, I'm going to pull back
a little bit so we can see what we did.
13:55
I'm reading this and it says it set up
13:59
the SuperBase authentication for our CRM.
14:01
This includes login and sign-up
functionality, exactly what we want.
14:05
But it says please add your SuperBase URL
and your anonymous key.
14:09
Now, all that was generated
when I just created the SuperBase project,
14:14
and my account
is connected to SuperBase, but
14:18
we have not connected
this project directly.
14:21
as when I was in Superbase,
I created the SimpleCRM project.
14:24
So let's just go to the Superbase button,
14:28
go to my account,
14:32
and then we'll see that SimpleCRM project
I just created.
14:33
Let's click connect,
and we're going to connect that.
14:36
And you'll see down here it's loading.
14:46
Okay,
15:01
so it says the database is ready,
and we're ready to start building,
15:01
but we can start asking for features,
15:06
and it suggests that we start
with authentication first.
15:08
So I'm just going to say
please set up user authentication.
15:12
And right now it's writing all the code
15:30
and tables that it's going to need
on the back end in our database.
15:32
We just have to hit apply changes.
15:35
And you'll normally
15:47
get that button
to where you have to accept the changes
15:48
anytime it edits your database.
15:51
Unlovable said, great.
15:58
The SQL migration was successful.
15:59
So now it's building out
the authentication UI and logic.
16:01
So it's building out that front end
so we can start signing up and logging in.
16:05
And if you try doing this with other
16:13
platforms, this is the part
where they usually have trouble with.
16:16
And one of the good things about Lovable
is that they are
16:20
so closely connected with Superbase
that the seamless connection
16:24
with a database
makes your development of your app
16:28
so much easier
because you don't have to stress
16:33
or worry about am I doing this
database connection correctly?
16:35
Yeah, that's completely correct.
16:40
Lovable and Bolt,
they both have really great Superbase
16:42
integrations built right in,
16:45
so they do a great job of building
everything out for you.
16:47
So it says authentication
is fully implemented in your application.
16:52
You just can sign up, log in and log out.
16:55
The app will protect routes, redirect rate
and authenticated users.
16:57
Perfect.
17:01
For development purposes, you may want to
disable email confirmation, which we did.
17:02
So we should be good to go.
17:06
Let's see.
17:10
Log in.
17:11
And I'm thinking
we're having that white error. Yep.
17:13
we have the white screen again.
17:17
So I think we have an error.
17:19
Can you please
help us get the app to load?
17:20
And if you'll notice that time,
17:27
I didn't use any,
, specific terminology or jargon.
17:28
I didn't say debug or anything.
17:33
I just said,
we simply have a white screen.
17:35
I think it's an error.
17:38
Can you help us get the app to load?
17:39
Is it, ,
17:41
All right.
18:12
And after refreshing,
we have our login page.
18:13
So let's give it a shot here.
18:17
Oh, it would help if we signed up first.
18:30
I always make that mistake.
18:35
Same here.
18:37
Okay, create an account.
18:40
and this is generated by default
check your email for the confirmation
18:42
link again we turned that off
so we shouldn't have to do that
18:46
yep and I'm logged in
18:51
alright so again I'm just going to
18:53
bring this open in a new window
18:57
Excellent.
19:17
All right. Now we're loaded up here.
19:18
Now, we shouldn't
19:21
have the ability to edit or anything
just we didn't have before,
19:23
but we should be able to start asking for
that now.
19:26
Is it?
19:30
So, yep, that's what we'll do.
19:32
Let's go back to lovable.
19:37
Can you add the ability to edit,
19:43
whether that's editing contacts,
editing tasks,
19:45
or editing the deals?
19:50
And while it works on that, we're
just going to go back to our project.
20:05
Oh, I helped if I.
20:09
don't exit out the project.
20:12
I'm just take a look and kind of see
some things that we can do to improve it.
20:14
First thing I'm noticing,
it would probably help to center this main
20:19
contact area.
20:22
It's kind of aligned to the
right, which I don't really .
20:23
It would be nice to kind of have
20:32
the sidebar be more,
I mean it with a different
20:34
shade of gray scale.
20:37
absolutely we can definitely ask for that
20:40
when it comes to the deals
20:46
I that everything's listed here
20:48
and it has the stages here
20:52
but other than being able to edit
and change the status
20:56
I'm kind of wondering
if we shouldn't have
21:02
and this is something I've seen in HubSpot
but a Kanban board,
21:05
which allows us to move the deal across
21:09
from stage to stage,
and then it just kind of updates
21:13
that for us.
21:17
I wonder if that feature
21:21
might be more robust than we need.
21:23
I don't know.
21:28
I've never asked an app
to build out a Kanban board as a feature.
21:29
that's something that we can try right now
21:34
after the whole kind of fixing of the
editing yeah yeah for sure
21:36
okay so
21:41
it says it's implemented the edit
it should work
21:44
it added edit dialog
similar to the add dialog
21:48
it's created state
variables added new handlers for editing
21:52
and so it should be good to go
one thing it's noticing though
21:57
is the contacts page
after generating so much code,
22:00
it's just getting kind of long,
we may want to refactor that.
22:03
So that's just something to keep in mind.
22:07
Okay.
22:26
And let's go tasks.
22:27
we didn't
22:35
get that edit.
22:35
Okay, it's not very responsive.
22:42
That's something we'll work on as well.
22:46
But let me go back to
22:49
this version.
22:52
And what is the shortcut
22:55
to refresh?
22:59
No. Oh, that's it.
23:04
There we go.
23:09
Okay, so now we're back in our project
and our refresh.
23:10
Let's go to Contacts.
23:13
I know it said there should be edit
function for this now.
23:15
Okay, excellent. There it is.
23:18
And I'm just
23:21
going to change this to my name.
23:22
there we go
23:41
yep it could work very cool
23:42
okay so then
23:47
well
why aren't we able to click on those now
23:50
yeah that's not a good sign
23:53
okay so we'll go back
23:56
let it load
24:00
a lovable
24:05
after editing a contact we can no longer
24:06
click on any of the buttons
or links in the app
24:10
I think something may be broken
please check and debug
24:14
but yeah
24:37
while this is working
we're just going to do its thing
24:38
but i would personally say
as we were talking about if we needed the
24:41
con band board we actually don't
well we may try that if we have time
24:45
but truth be told once we get these user
experience you know these ux problems down
24:50
making sure that the buttons all work,
everything works as intended,
24:56
I think we actually
have a pretty decent start
25:00
as we have all the
25:03
functionality that we could expect.
25:05
I agree.
25:09
It has everything we need
and what we wanted from a lightweight CRM.
25:10
I wonder if it could be
25:15
we could add in the feature
25:19
of a form intake to automatically add
a contact.
25:21
That might be something that a lot of
25:26
entrepreneurs might want as a generator
25:29
of leads where they have a form.
25:33
It goes directly to the CRM.
25:37
Absolutely.
25:39
That's a great feature to have.
25:40
We'll definitely tackle that.
25:42
Let's see how it's doing on
resolving this error.
25:44
It says it's good to go.
25:48
One thing I'm going to ask,
25:51
can you work on the responsiveness
of the design
25:54
the main dashboard content isn't aligned
in the center it always set to the right
25:58
and it gets cut off when it gets too small
So in smaller windows it hard to see
26:03
Okay, so I'm back in our project.
26:12
And I'm going to
26:15
edit this again to my name.
26:18
Not going to worry
about changing everything else.
26:21
Okay, it changed.
26:25
oh I want to say that
26:28
error is still persisting okay
26:31
and see this is a great example
of why you want to test
26:41
after every request
I've already jumped in and asked it
26:44
to start working on something new
which is you know awesome that's great
26:47
but it doesn't help with the fact
that it didn't
26:52
fix the first thing
26:55
okay it's saying
27:00
it's added some features to okay
yep there it is we can now
27:01
view this whereas i couldn't before
27:06
and then i'm going to try editing it
27:10
we should have the same issue
27:12
yep so what do you think I should tell
27:22
the chat
27:28
bot hmm this is
27:28
a tough one to describe right
27:33
it is
27:40
so we already used the prompt
27:42
of saying it's unresponsive
after we edit it correct
27:44
and it didn't fix it
27:49
let's try maybe
27:52
explaining the process our flow
27:54
by explaining that I'm
27:59
maybe with the extra context
might help here's what
28:01
I'm thinking
28:03
when we click on the three circle
28:07
icon to edit an existing contact,
28:09
a pop-up comes up
and we're able to edit that contact.
28:14
When I click save after the fact,
it updates the contact and saves.
28:18
However,
it immediately breaks all functionality.
28:22
I can't click to edit
any of the other contacts.
28:25
I can't click the button to add a contact
and I can't use
28:28
any of the navigation on the sidebar.
28:32
Please help debug.
28:35
so hopefully
28:43
adding more context
about what exactly isn't working
28:44
and explaining some of the full on nuance
28:49
might help.
28:52
And it says,
28:56
looking at the issue where interactions
stop working,
28:57
this is likely related to state management
and the context component.
29:00
Let me work on that.
29:04
Okay, it says it thinks it fixed it.
29:11
We're just going to refresh.
29:15
Scroll over.
29:21
And if I scroll... Oh.
29:31
I can't.
29:36
Nope, still...
29:38
that's right okay I have one more idea
29:41
what I'm going to do is refresh this app
29:45
now a really cool feature about lovable
29:50
is it has the ability to select items
29:56
so if we go down here to edit
29:59
we can select an item
30:03
so I'm actually going
to click on these buttons
30:05
and I'm going to click on edit.
30:09
When I use this edit button,
30:14
it allows me to see a pop-up to edit
30:17
the contact and it saves when I'm done.
30:19
However, it breaks all functionality
afterwards and I can't scroll.
30:23
I can't click anything.
30:27
It just freezes immediately.
30:29
and as you'll see there
30:38
in this pop-up message
30:39
it actually has that div selected
30:42
so maybe
30:47
maybe that would fingers crossed
that is a new feature I've not
30:49
I did not realize that was a feature
oh yeah yeah I think bolt may have
30:54
that too is now,
but if lovable did it first.
31:00
And actually what will show off next is
we can make
31:04
those same selections
using that edit and do visual editing.
31:07
So we can change some of this text up
31:12
because one
31:15
thing working with these
AI tools is you'll see something
31:15
simply RM and be , Hey,
I would to change the name of that.
31:19
And you'll ask it to,
31:22
and it might work, but it might break
something in the process.
31:24
so it can be so much easier
to just select the text and manually
31:27
type it out and change it yourself.
31:32
So again, we have our project.
31:36
It's reloaded.
31:39
Oh, helps if I select the name.
31:43
Okay, I can't edit anything.
31:51
I can select it.
31:54
So, OK, I'm going to actually
31:57
use that again for the input.
31:59
This input doesn't allow me to edit
the content.
32:04
I'm allowed to highlight it and select it,
but I can't actually type anything
32:07
out or delete any characters.
32:11
The beauty of live demos.
32:21
So it says it thinks it's a
32:28
component editing dialog.
32:32
It's looking closer at it.
32:34
It appears to be with how the input field
and the contact name is being handled,
32:35
and it's going to work on that.
32:39
Okay,
they said they had to update the logic.
32:47
The React wasn't recognizing the name
32:49
and recognizing the function,
but it should now.
32:53
I know it re I'm just going to
32:56
upload it myself or refresh myself
32:59
click edit
33:03
nope I'm not allowed to fix it
33:08
so okay
33:14
one thing we'll do is say
33:16
could this be a database issue
with the fact that every time we go
33:21
to save and edit and record it,
33:25
it breaks the app because we lose
all functionality afterwards.
33:29
And if this doesn't work, I have
33:44
one more thing to try, which was something
we were going to save for later.
33:47
That's a little bit of a teaser.
33:51
but we'll try that possibly and if not,
33:52
you know, sometimes it's
33:56
you get these loops where it's
hard to fix and
33:59
you you get these loops
where it's hard to fix an error
34:03
that keeps breaking your app
and that's completely normal.
34:05
What I would suggest is
34:08
trying this advanced technique
that I'm about to tease here in a second
34:11
to show off
or simply restarting a new project.
34:14
I know some people
that's kind of admitting defeat
34:18
or throwing in the towel
or just starting over seems a burden.
34:21
But we're really not that far in.
34:26
We're two or three prompts in.
34:27
Starting over isn't the end of the world.
34:29
And it's much better than
34:35
using all your credits
and not getting anywhere.
34:37
That's very true.
34:42
Okay, it worked that time.
34:45
I can delete.
34:47
I can update
34:50
but it did not fix that functionality
34:53
to where after we add our
34:57
edit it breaks the system.
34:59
Okay, so now we're going to get into
more advanced features here.
35:02
This was something
we were going to save for a later video,
35:07
but I'm very interested to go ahead
and try this.
35:09
Sometimes if you're struggling
with getting the best out of one agent,
35:12
it can be smart to go to another agent.
35:17
So actually, we're going to
take this project and move it to Cursor.
35:20
I'm going to go up here to GitHub.
35:26
And again, I'm already hooked up
to my GitHub account.
35:28
If you're not, please
sign up at GitHub.com and set that up.
35:30
But I'm going to
say transfer the repository.
35:34
And I'm going to say create it
in the no-code
35:38
Dan space, workspace.
35:40
And it's done it.
35:45
GitHub repo has now been created
under no code Dan for this project.
35:46
And it gives us three options.
35:51
HTTPS, SSH and GitHub CLI.
35:52
That's command line interface.
35:57
You can use any of these,
but just for the sake of ease,
35:59
I always use the first one
and just hit copy and we're good to go.
36:03
Now we're going to open cursor.
36:07
If you don't know what cursor is, Cursor
36:13
is another software
that uses AI to help you code.
36:15
It's a
36:21
what people call a fork of VS code.
36:23
Think of a fork as a deviation
36:28
or a clone of something,
but with modification.
36:32
Okay, so now we're back in Cursor.
36:37
We have our copied link for our GitHub
repo that we got from lovable
36:39
all we're going to do is go to this middle
tab here clone repo
36:44
click on that
we're going to paste this in and hit enter
36:49
now we have to set
36:54
up a project folder for me
i'm going to go to documents
36:55
i'm going to go to coding i'm
going to create a new folder
36:59
and i'm going to call it simple crm and
37:02
select as the repository destination
37:07
I'm going to click open
37:12
and now
37:16
we're in cursor if I click over here
I can start opening files
37:17
and I always get this error
when we first start
37:21
it just means that there's a different
37:25
lock file than what's expected
37:29
every time I see that error
37:34
I copy it
and I give it to the cursor agent.
37:36
Now, a great thing about cursor
37:44
is there's free access
as well as the paid plan.
37:45
And even on the paid plan,
you have so many requests.
37:48
It's 500 a month, if I'm not mistaken.
37:52
But even if you run out of your 500
or if you run out of your free credits
37:55
that you're given when you first sign up,
you go into slow mode.
37:59
So it's the same thing
as sending your request.
38:03
it may just take a
bit longer to get code back.
38:06
And that's a common
38:12
practice for a lot of these softwares
where you have credits.
38:13
Slow-mo days basically means
38:17
you're not a priority anymore
in terms of the API calling.
38:19
So it's okay.
38:23
It doesn't mean
you're not going to get your answer.
38:25
You will get it.
38:27
And Dan said,
it will just take a bit longer.
38:29
Absolutely.
38:32
and cursor in slow-mo
is definitely one of those tools
38:33
where I'll set it and forget it
38:38
go do other tasks, go do your work,
38:41
go do different things you have to do but
38:43
let it do its thing
38:47
and it's identifying the issue,
38:49
the issue is the bun.lockb file
38:52
and it's
just going to get rid of it for us
38:55
which it did,
38:58
so now we're good to go if we want to
upload this back up and start using it.
39:00
The bun file ends up coming from lovable
and it not required
39:05
So OK now that we have everything we need
we going to tell cursor the same issue
39:11
that we having in lovable So much
so I'm going to go back to lovable.
39:16
And I'm just going to copy
39:20
the last issue that we had.
39:21
OK, I'm not going to use that one.
39:28
okay perfect
39:42
we'll take this back into cursor
39:44
I'm just going to paste that back in there
and I'm just going to change
39:47
when I use the edit button
since it doesn't have reference
39:50
the same way lovable did
39:55
and we're on cloud
39:58
3.5 sonnet let me hit send
40:00
if we were using the paid plan
with the fast credits
40:03
we would be able to select 3.7 sonnet
which does amazing work
40:06
it's just that's a more expensive model
40:11
so they're saving that for the paid users
at this moment
40:15
okay so it shows here
that cursor made some updates
40:23
we have to accept them of course
we can hit this check mark to accept them
40:27
or we can hit accept down here.
40:31
Just going to accept those.
40:33
And one thing we can do
40:35
to check
those changes is run the project locally.
40:39
So I'm going to say run our project
40:44
and show me where I can view it.
40:48
What this should do, again,
after giving it a few moments,
40:53
should give us the command
to start our project
40:56
and then the link or the address
to our project, which should be localhost
41:00
colon some numbers, localhost 3000,
41:06
localhost 8080, et cetera.
41:11
A localhost is basically something
that is running on your own
41:14
kind of server slash computer.
41:19
It's not connected to anywhere else,
So that's why you're able to kind of
41:21
play with the instant changes.
41:25
It's a way for people to test
41:28
their product or their software
right away.
41:33
Okay, now if you'll see,
41:38
it said it started the project
and showed us where we can run it.
41:40
To run it,
we just need to put in npm run dev.
41:43
So that's the command line.
41:47
And if you wanted to do that yourself,
you would put this in the terminal.
41:49
the great thing
41:53
about cursor is
you can just click this tab right here
41:54
and we can toggle on the terminal
and run it ourselves.
41:57
Now, it already did that for us.
42:01
And that's
it provided the local host 8080.
42:04
So we can go back over here to Chrome.
42:07
And now we see our project.
42:16
and I should be able to sign in.
42:22
I'm just going to make this
a little bigger.
42:28
Okay, we're signed in.
42:36
We'll go to our contacts.
42:37
We'll edit a contact.
42:39
All right.
42:51
We just added a contact.
42:52
Then can we click? And we can still click.
42:55
Now, it didn't save the contact,
but that could be because
42:58
Cursor doesn't have access directly.
43:02
Oh, no, it's saved. It's right here.
43:05
It's saved.
43:07
I would say cursor
without giving it more.
43:08
Giving it more
43:13
context through plugins
or using an MCP or other different things
43:15
can't directly interact
with your super base.
43:21
It can suggest edits
43:25
to the super base database,
but it may ask you to do it.
43:27
Or you may ask it to make those changes
inside of cursor through the command line.
43:31
But it doesn't always work.
43:38
That's something
they're kind of working on.
43:40
So now.
43:42
If I'm not mistaken here,
we should be able to go back to cursor.
43:44
And say.
43:49
This all works great, thank you.
43:52
Please push all of our changes
to the main branch.
43:54
And I'm going to hit enter.
44:00
Now, what I just did
there is if you're brand new,
44:02
we have courses on GitHub and I will link
them in the teacher's notes below.
44:06
As Christian mentioned earlier
with cursor, it's a fork of VS code
44:10
and a fork is an iteration deviation
from the original.
44:16
The forking system
that is all from Git and GitHub.
44:19
So what we can do
now is create that repo of our project
44:23
and we have,
you know, the simple CRM project.
44:28
But now we can create branches of it
to where
44:32
the main branch is what will be deployed
on the Internet at all times.
44:34
But we could create a new branch,
for example, and call it.
44:38
We can say it's the dark mode branch,
and this branch is specifically
44:42
for us to generate
and create the dark mode functionality.
44:49
Why would we create this
on a separate branch than our main branch?
44:55
Because while building out this feature,
we could very well break our app.
44:58
And if we break it on the main branch
and save it and push those changes,
45:04
now our published app is broke
and we can't really fix it.
45:08
So whereas if we have our own branch,
we can fix it in the branch.
45:13
And if we break it, we can roll
those changes back or we can just delete
45:18
the branch entirely and create a new one
from our main and start from there.
45:22
Yeah, it's it's good practice to.
45:29
Create different branches or a big project
45:33
just so that you are
safeguarding yourself in case
45:36
you do make mistakes
that you can't really fix.
45:39
remember we are all non-technical
in terms of actual coding
45:43
so having different versions
that you can fall back on
45:46
is very good practice
to start doing from the get-go absolutely
45:50
because the last thing you want to do
is get so far in your project
45:56
that you've built several different
features several different updates
46:00
and your last update breaks your app
but instead of being able
46:04
to just roll back
one feature or two that, you know,
46:07
the most recent, you have to go
all the way back to where you started.
46:10
And that would just suck.
46:14
But if you notice here, it
46:16
says it's everything was successfully
pushed to the main branch.
46:17
It's done.
46:20
So now let's go back to lovable
46:21
and lovable should say we have a commit.
46:25
OK, so we're back in lovable.
46:28
And if you notice right here,
it says there was an external commit
46:30
and fixed contact edit modal freezing
issue and remove bond.lockb.
46:33
So again, when you push to GitHub,
you have to make a comment
46:39
to let people know what you worked on
or it won't save and send up your changes.
46:45
Using the AI, it did everything for us.
46:50
It wrote the comment
explaining what we changed in our code
46:53
and it pushed those changes in our code
up to the main database.
46:57
So now, when I open this in a new window,
47:01
we should have everything here.
47:07
We do.
47:08
I'm actually
going to make this a little bigger.
47:09
So we have everything here.
47:15
We go to our contacts.
47:16
We go to edit.
47:18
Change my name one last time.
47:21
I'm going to hit save.
47:24
That's there.
47:26
And we can still scroll.
47:27
I can go I can edit it again
47:30
what about the sidebar
47:38
oh we can oh my gosh we're back
and the best part we're back
47:39
right is we're working again
but we're working again in lovable
47:44
so now even though we just fixed
that issue in cursor
47:51
again you've seen we were on a loop
and it took three or four tries and we got
47:55
nowhere in lovable in cursor we fixed it
now we can come back in lovable
47:59
and make some changes for instance
48:04
say we wanted that main dashboard content
48:07
to be centered
48:12
let's see if it's able to do that
48:16
okay it says it's did it let's refresh
48:35
i don't see it
48:40
on my end
let's go back to the big version of the
48:44
ad nope
48:47
it's still not centered
48:52
but instead of wasting time
to continue to work through that
48:58
I just want to show off
the edit capability which I showed earlier
49:02
but let's say instead of just dashboard
49:07
we wanted to put my dashboard
49:09
and let's say we wanted that to be
49:13
slightly bigger
49:15
we can hit save
49:18
and we just give level a moment
49:20
it's saved
and it counted as one of our edits now
49:23
it's recorded here that an edit was made
but this does not count as a credit
49:28
only the prompts do so visual changes
you can go
49:34
wild with these
because these do not count against you
49:37
and if we
49:42
refresh let's
49:43
go back open up the window again.
49:51
Oh, it's not there.
49:55
It's an interesting bug.
50:03
Oh, it refreshed again.
50:06
Let's see if that might have did it. No.
50:08
I know one thing
we should be able to do is
50:13
publish the app.
50:18
and this will give us a tester domain
50:21
but it will be published live.
50:25
We can share this domain
with people on the internet
50:27
but hopefully this should
50:31
save our most recent changes Yep.
50:35
And you see the
My Dashboard is right here.
50:45
There you go.
50:48
And there we have it.
50:50
There is your SimplyRM,
the app that we built together,
50:51
and it is now live for the world to see.
50:55
And again,
everything that we created, our dashboard,
50:59
contacts, our tasks, deals, everything's
here.
51:03
User authentication.
51:08
I'm in my profile. I can log out.
51:09
Everything we've created in
51:12
our app is here live for deployment
for your users to test.
51:13
and this is what we called a MVP
that has been completed.
51:18
It's the minimum viable product.
51:23
Now you can start testing it with
your different product, different markets,
51:26
best friends, close friends,
whoever you think might be interested.
51:31
Show it off.
51:35
You have this link.
51:36
Send it to them. Get feedback.
51:36
Now's the time to really go into, ,
what other features can I build,
51:38
or is this the right app at this moment
for me to continue building.
51:43
Absolutely.
51:48
And there's so much you can build
and so much more you can do just by simply
51:49
getting familiar with these type of tools,
whether it's Replit, Lovable, Bolt.
51:54
But we hope we showed you
everything that you need
51:59
to get started in Lovable
and to start building your apps today.
52:02
So take a chance.
52:05
Feel free to start building
and we can't wait to see what you build.
52:07
Happy building, everyone.
52:11
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up