Bolt.dev vs Lovable.dev: Build & Deploy a Full CRM App with AI & Auth Integration
Description
🤝 JOIN THE NEXT LIVE BUILD:
Join me and lets build projects together!: https://discord.com/invite/vZxn6wZrDD
💡 NEED PERSONALIZED HELP?
Book a 1-on-1 consultation: https://cal.com/lukasmargerie/60min
In this video, I compare Bolt.dev and Lovable.dev side by side — two powerful no-code/low-code AI tools that generate full-stack apps from a single prompt.
We’ll go from prompt to deployed CRM app, complete with:
Authentication via Supabase
AI assistant via OpenAI API
Drag & drop functionality
Dashboard views
Netlify deployment
...and much more.
Watch till the end to see how both tools perform in real-time, where they shine, and where they struggle.
If you’re thinking of building your own MVP, SaaS product, or internal tools — this will give you a clear picture.
00:00 - Intro: What we're building today
00:30 - Resource: Bolt Starter Templates overview
01:44 - The Prompt: Creating a CRM for a web design agency
03:33 - Bolt’s Prompt Enhancer vs Lovable
04:29 - First Build Results: Bolt finishes early (but with errors)
05:14 - Exploring Bolt’s UI & early functionality
06:39 - Lovable’s generated UI walkthrough
07:16 - Comparing Project Management layouts
08:01 - Missing Pages in Lovable + prompts to fix them
09:05 - Requesting dashboards for both apps
09:57 - Dashboard comparison: Lovable vs Bolt
11:19 - UI customization in Lovable
12:39 - Adding drag-and-drop functionality
14:24 - Drag & drop working in both apps
16:10 - Adding new projects & leads to both apps
18:08 - Testing lead/project creation in Lovable
19:21 - Testing lead/project creation in Bolt
20:49 - Bugs, improvements, and next steps
22:00 - Adding AI Chat Assistant via OpenAI API
23:15 - Integrating OpenAI: Bolt vs Lovable UX differences
25:43 - Testing AI Assistant functionality
27:49 - Next step: Adding authentication via Supabase
29:08 - Setting up signup & login in both apps
30:19 - Superbase settings (with/without email verification)
31:41 - Deploying both apps: Netlify + Lovable hosting
33:33 - Final walkthrough of deployed apps
34:57 - Outro: Thoughts, next steps & what’s possible
🛠️ TOOLS USED:
Lovable: https://lovable.dev/?via=lukas
Bolt.new
Screenstudio: https://screenstudio.lemonsqueezy.com/?aff=8vBGv
Want to join our next live build session? Join our Discord community and be part of the process! https://discord.com/invite/vZxn6wZrDD
#ux #webdesign #design #figma #aitools #LovableDev
#Framer #NoCode #WebDesign #Stripe #AI #Supabase #boltai #boltnew #bolt
Join me and lets build projects together!: https://discord.com/invite/vZxn6wZrDD
💡 NEED PERSONALIZED HELP?
Book a 1-on-1 consultation: https://cal.com/lukasmargerie/60min
In this video, I compare Bolt.dev and Lovable.dev side by side — two powerful no-code/low-code AI tools that generate full-stack apps from a single prompt.
We’ll go from prompt to deployed CRM app, complete with:
Authentication via Supabase
AI assistant via OpenAI API
Drag & drop functionality
Dashboard views
Netlify deployment
...and much more.
Watch till the end to see how both tools perform in real-time, where they shine, and where they struggle.
If you’re thinking of building your own MVP, SaaS product, or internal tools — this will give you a clear picture.
00:00 - Intro: What we're building today
00:30 - Resource: Bolt Starter Templates overview
01:44 - The Prompt: Creating a CRM for a web design agency
03:33 - Bolt’s Prompt Enhancer vs Lovable
04:29 - First Build Results: Bolt finishes early (but with errors)
05:14 - Exploring Bolt’s UI & early functionality
06:39 - Lovable’s generated UI walkthrough
07:16 - Comparing Project Management layouts
08:01 - Missing Pages in Lovable + prompts to fix them
09:05 - Requesting dashboards for both apps
09:57 - Dashboard comparison: Lovable vs Bolt
11:19 - UI customization in Lovable
12:39 - Adding drag-and-drop functionality
14:24 - Drag & drop working in both apps
16:10 - Adding new projects & leads to both apps
18:08 - Testing lead/project creation in Lovable
19:21 - Testing lead/project creation in Bolt
20:49 - Bugs, improvements, and next steps
22:00 - Adding AI Chat Assistant via OpenAI API
23:15 - Integrating OpenAI: Bolt vs Lovable UX differences
25:43 - Testing AI Assistant functionality
27:49 - Next step: Adding authentication via Supabase
29:08 - Setting up signup & login in both apps
30:19 - Superbase settings (with/without email verification)
31:41 - Deploying both apps: Netlify + Lovable hosting
33:33 - Final walkthrough of deployed apps
34:57 - Outro: Thoughts, next steps & what’s possible
🛠️ TOOLS USED:
Lovable: https://lovable.dev/?via=lukas
Bolt.new
Screenstudio: https://screenstudio.lemonsqueezy.com/?aff=8vBGv
Want to join our next live build session? Join our Discord community and be part of the process! https://discord.com/invite/vZxn6wZrDD
#ux #webdesign #design #figma #aitools #LovableDev
#Framer #NoCode #WebDesign #Stripe #AI #Supabase #boltai #boltnew #bolt
Summary
Bolt.dev vs Lovable.dev: Building a CRM App with AI & Auth Integration
In this comprehensive comparison video, the host pits Bolt.dev against Lovable.dev to see which no-code/low-code AI platform performs better when building a full-stack CRM application from scratch. Using identical prompts for both tools, viewers get to witness the entire development process from initial generation to deployment.
The demonstration begins with creating a CRM platform specifically designed for a web design agency with 12 employees. Both platforms generate functional applications with lead management and project tracking capabilities, though Bolt completes its build faster initially. The host then incrementally enhances both applications by adding essential features like kanban-style drag-and-drop functionality for leads and projects, form inputs for creating new entries, and AI assistant integration via the OpenAI API.
Throughout the video, notable differences between the platforms emerge. Lovable produces more visually appealing interfaces with better typography and design elements, while Bolt offers more straightforward access to code files and simpler integration with third-party services. The host demonstrates how to customize UI elements in Lovable and highlights the varying approaches each platform takes to feature implementation.
The tutorial also covers advanced integration steps, including adding authentication via Supabase and deploying both applications through Netlify. The final applications include dashboards with analytics, lead management systems, project tracking boards, and AI assistants that can answer questions about the CRM data.
This side-by-side comparison provides valuable insights for anyone considering these AI development platforms for MVP creation, SaaS product development, or internal tools. While both platforms successfully create functional applications, they each have distinct advantages depending on specific project needs and developer preferences.
The video is in English and serves as an excellent resource for developers, entrepreneurs, and teams looking to leverage AI-powered development tools to rapidly build and deploy web applications without extensive coding knowledge.
Transcript
0:00
hello everyone welcome to today's video
0:02
where we're going to compare bolt. and
0:03
level bolt. Dev we're going to be using
0:06
the same exact prompt for both and we're
0:08
going to basically be comparing the
0:10
process of of from scratch to actually
0:12
deploying the app in a domain using
0:15
netlify we're going to be also
0:16
integrating authentication to both of
0:18
these uh systems we're going to be
0:20
adding some some Integrations and yeah
0:24
um let's see how how it goes if this is
0:26
something interesting for you guys stick
0:28
around and if you have any questions
0:30
please feel free to comment them below I
0:32
read all of my comments and yeah let's
0:35
get started so before we start um I
0:38
actually wanted to show you guys this
0:40
resource that I found called bolt
0:42
starter.com and it's basically a website
0:47
full of different starter templates to
0:50
use for your bold project right so you
0:53
have everything from you know uh chat
0:56
interfaces to dashboards to to job
0:59
websites to portfolios to crms right
1:02
e-commerce stores everything and
1:05
basically we can click live preview on
1:07
the CRM system go go through the
1:09
different tabs and see how it looks like
1:11
right it's pretty it's pretty darn good
1:13
for a you know a starter template and
1:16
then you can launch it in bolt. new and
1:19
it doesn't use any of your tokens that
1:21
means if if you're like using a free
1:22
account um it's not using any of your
1:25
your tokens so you don't don't be
1:27
worried about that um so yeah just
1:29
wanted to show you you that um uh to
1:32
begin with right so now let's go to the
1:35
following let's bring bolt. new on the
1:38
left and lovable dodev on the right so
1:42
let's go through the prompt that we're
1:43
going to give both of these and let's
1:45
just read it so create a CRM platform
1:47
for a web design agency with 12
1:49
employees so five designers five sales
1:52
reps and two project managers the
1:54
platform should focus on managing leads
1:57
tracking projects and streamlining
1:59
communication lead management is number
2:01
one for sales reps track new leads in
2:04
progress deals uh and close Deals store
2:07
client deals company contact info needs
2:10
budget yeah assign needs to specific
2:12
sales reps integration with email
2:14
Outreach tools so we don't really need
2:17
this right now we could do this
2:19
eventually in the future and status p
2:21
pipeline cold warm negotiation one or
2:24
loss great project tracking for PMS and
2:28
designers right so so manage ongoing
2:31
projects so client name timeline assign
2:33
team track project status briefing
2:36
wireframe design development review
2:37
delivered assign designers in pm to each
2:40
projects automate task for miners so we
2:43
can delete this one team collaboration
2:46
each team member has a dashboard for
2:48
task and uh task and progress comments
2:50
and internal notes on deals projects
2:52
notification system for updates
2:54
reporting and analytics track monthly
2:56
Revenue close deals monitor team
2:57
performance yeah view client and
3:00
lifetime value okay so this is all good
3:02
let's just copy this and let's um make
3:05
sure to paste that here
3:08
right and let's go ahead and let's see
3:13
what else we can add here so enhance
3:15
prompt this is actually a very
3:17
interesting thing to that bolt has and
3:20
that lovable does not have so let's just
3:22
compare
3:24
it um let's wait for it to be done
3:27
actually so it's enhancing the prompt
3:33
so design a compr CRM platform Pro
3:35
Design with 12 M incorporate the
3:36
following so client requirements modern
3:39
intuitive interface optimiz data used by
3:43
designers
3:49
okay
3:53
okay so I guess we can use this for both
4:00
and let's go ahead and submit these
4:03
prompts and see which one is quicker so
4:07
we are about almost 2 minutes in lovable
4:11
still building something and bolt
4:14
already finished it but there seems to
4:17
be a few you
4:19
know failures going on potential
4:22
problems detected show problems terminal
4:26
error number one which is something with
4:28
Vite and terminal errors number two some
4:31
also with fites and something uh that
4:34
import it failed to import the settings
4:36
page from the app source so let's just
4:41
click on attempt to fix and let's see if
4:45
Bolt fixes their
4:47
problems and bolt seems to have fixed
4:50
the problem so we can go ahead and hide
4:54
this chat I believe and we can just go
4:57
ahead and make this wider and
5:00
refresh this right and we can already
5:02
start seeing that there's
5:04
this uh interface where we have leads we
5:09
have a
5:10
specific uh card with John Smith from
5:14
Tech Corp he has a score he has a stage
5:17
called warm right you can't really click
5:20
on any of these we have a project which
5:23
is basically Tech corpse web web design
5:27
project it's almost done 12
5:30
things have been completed but three are
5:31
still pending
5:34
analytics this is the revenue from the
5:36
past couple months not not bad at
5:39
all right and these are the different
5:42
lead sources so social website so it's
5:46
kind of it looks kind of standard
5:48
there's a lot of space here to improve
5:51
we have a
5:52
notifications thing here we have the
5:56
specific profile we have the leads there
5:57
is no dashboard would be nice to have a
6:00
dashboard and now there has been an
6:04
error with
6:10
lovable okay it's still it's still um
6:13
basically finishing up with lovable it's
6:16
taking a little bit more
6:17
time let's just see how that how that
6:20
finishes and now we can start seeing The
6:23
Lovable one so if I were to go like this
6:25
it's also quite you know
6:28
small but if I were to go like this and
6:30
we can see the whole thing and we can
6:33
see kind of Morty from Rick and Morty
6:36
over here pretty funny we can click on
6:38
this we can see something we can't see
6:40
any notifications can't see any messages
6:43
it does do the dark mode to light mode
6:46
effect we see the
6:47
leads um I can't really move them which
6:50
is something that I want to eventually
6:52
do we have many more leads than the bolt
6:54
one we have the project management so
6:57
briefing wireframing design devel and
6:59
review so it kind of matches you know
7:02
the industry a little bit more uh so we
7:06
can compare the project management so if
7:08
we go here to
7:10
projects
7:12
and let me just maybe open it up here in
7:16
the
7:17
tab if we go to projects we only have
7:22
one and we can we can't really see the
7:24
rest we have design but maybe bolt
7:28
created other ones
7:30
let's see so that looks pretty cool
7:33
from from uh lovable let's open this
7:37
also in a new
7:39
tab and okay so that's the thing that's
7:41
not working the index page right so the
7:44
team page is also not working right now
7:46
we have leads projects analytics page is
7:51
working no it's also not working so the
7:54
only things that we can see now are the
7:55
leads and the projects page and it's
8:00
called inin I guess weird name
8:05
anyways we can go ahead and do the next
8:09
steps which would be trying to make
8:12
these other Pages show up and in this
8:15
one
8:18
basically all the other Pages show up
8:20
but I would like to have a dashboard so
8:22
let's just prompt that for bolt can we
8:27
create a dashboard board that
8:32
is
8:33
um that
8:36
plays role or can we create a dashboard
8:41
that shows all of the main
8:46
features and then for this one we can go
8:48
ahead and write something like
8:52
um I cannot see the
8:57
dashboard page
8:59
team page calendar page
9:04
messages page
9:08
documents or
9:10
analytics
9:14
page so let's try to kind of create
9:17
these different pages for lovable and
9:20
let's
9:21
also fix this or create this dashboard
9:25
page for Bol all right so now for for
9:29
the bolt. new CRM platform bolt did add
9:33
a dashboard and we can compare the
9:36
dashboard between bolt and lovable so in
9:40
terms of
9:41
design uh I like the left panel from
9:45
lovable more with the logo up here um we
9:48
do have the search function that both
9:51
doesn't
9:52
have uh all in all there's more
9:54
functionality here in lovable for the
9:56
left panel and for the top um
10:00
on the dashboard we have overview tasks
10:02
team I like that from from Bolt that you
10:06
can kind of uh add different tabs but I
10:08
mean eventually you could also do the
10:10
same thing here in lovable um but it's
10:13
just interesting to see what both of
10:15
these tools created right so we have
10:17
active leads active projects Revenue
10:21
conversion rate so we have total revenue
10:24
active projects new leads and team
10:27
utilization so team productivity
10:30
um we do not have that here and that's a
10:33
pretty interesting stat to have in a CRM
10:37
so revenue revenue overview we have it
10:39
more as a we have a bar graph here um I
10:43
prefer something like this where it's
10:45
kind of a line um we can select
10:48
different types of graphs so we can also
10:51
select a bar graph I like
10:54
the the UI of The Lovable one more
10:59
feels nicer maybe it's some type of
11:02
library that they're using project
11:03
distribution lead sources so I like the
11:08
project distribution one a little bit
11:09
more it's something that I would see in
11:12
more common in a in a web design or
11:15
e-commerce or marketing agency right we
11:18
have project progress and we can already
11:20
add a project here which is cool and
11:22
that's the things that we're going to
11:23
add uh now so we're going to add some
11:26
more functionality in these different um
11:29
sectors right active leads recent tasks
11:32
so I would say that this one is more of
11:36
a full dashboard right and the design is
11:40
like clearly better in terms of
11:42
typography also um I do like this blue
11:45
more than this blue for the left panel
11:47
but you know uh again in lovable what we
11:50
can also do is I mean you can get this
11:53
as a full screen and you can edit this
11:58
and for example click on this background
12:01
and basically change this to a a darker
12:04
blue right so we can go like this or
12:08
maybe make it like this this blue and go
12:11
ahead and choose this one turn it into
12:14
this one this one can
12:16
go maybe
12:19
be a darker one right because it's the
12:23
bottom and we can click on Save and that
12:26
can inherit that right so that looks
12:30
good nice um so that's actually
12:32
something that I really like about
12:33
lovable that you can you know do that
12:35
those those edits so quickly right so we
12:39
have The Lovable one and we have the
12:42
bolt one now what we want to do is we
12:43
want to start adding some some uh
12:45
functionality to these apps I think the
12:49
first one that we want to do in lovable
12:51
is to be able to move these cards to
12:55
other columns in the lead magic and the
12:58
pro lead management and pro project
13:00
management uh tabs right because
13:03
everything else is more of a you know
13:05
different format but these two I would
13:07
like to be able to move these cards
13:10
around right like hold and drag and drop
13:12
them around um and here I would like to
13:17
have that view here in the leads and
13:20
projects right for both so I want to try
13:21
to build that same um you know that same
13:26
type of format as it is in lovable here
13:28
in Bolt okay so let's go ahead and get
13:30
started with that so here in lovable I'm
13:33
saying in the lead man management and in
13:35
the project management pages I want to
13:37
be able to drag and drop the Cards into
13:40
the different columns so let's submit
13:42
that and here in Bolt I'm saying for the
13:45
leads page please structure so let's
13:48
just correct that structure the layout
13:50
to be in in columns based on stage and
13:54
for the projects page please structure
13:56
the layout to be in columns based on the
13:58
project category
13:59
right so let's just submit
14:01
that also in Bolt I'm writing in the
14:04
leads page and in the projects page
14:06
please give me the ability to drag and
14:08
drop Cards into different columns so
14:10
let's just submit that because it also
14:13
created this briefing wireframing design
14:17
and development here there's a little
14:19
bit more which is which is nice and
14:22
while we wait for bolt let's go back
14:24
into lovable and see how this was made
14:27
right so we have these columns and now
14:29
we can basically just move different
14:32
things into different columns you know
14:35
the UI is still not perfect right but
14:37
it's working which is pretty interesting
14:41
right um we can go ahead and even
14:43
publish this to like another tab with a
14:48
preview domain and basically just try it
14:51
out here and you can already start
14:53
seeing that it's working and let's just
14:56
make it full
14:57
screen yeah you can see that it's it's
15:00
kind of buggy in terms of like you don't
15:02
really see it you see sometimes it goes
15:05
here but it's working right and we can
15:08
move this website into review into
15:11
delivered and boom it's delivered right
15:14
and eventually it'll be cool that once
15:15
it's delivered you know we can get like
15:17
a slack message or something like that
15:19
right that's kind of like the next step
15:20
of of all of this but um we're seeing
15:23
now that slowly but surely these
15:25
different functions that we're adding to
15:27
our app are working
15:29
and now I believe bolt is also finished
15:31
so I add I asked bolt to do the very
15:34
same thing so we can go ahead and move
15:36
these things and yes it actually looks
15:38
better in Bolt um with dragging and
15:42
dropping and it's working so that's
15:44
great and we can go back to projects and
15:47
do the same thing and yes it's it's all
15:49
working right um obviously data on
15:52
sync so if I were to move this over here
15:56
and then come back here it goes back to
15:58
its original position
15:59
because I mean we don't have any user
16:02
data it's just like like a facade right
16:05
so now the next thing that I want to do
16:07
with these two apps from Bolt and from
16:10
lovable is to be able to add new
16:12
projects so right now if I'm in this
16:15
projects page here in Bolt I click on
16:17
new project nothing happens if I'm in
16:19
lovable and I am in the project
16:22
management tab click on new project
16:24
nothing happens so we're going to have
16:26
to create a prompt that tells lovable
16:29
and Bol that whenever the user clicks on
16:32
new project they they get this field of
16:35
different inputs and then once they
16:38
submit these inputs it gets portrayed in
16:40
this
16:41
page so what I'm going to write here is
16:44
when the user clicks on ADD lead or new
16:47
project to popup with input should
16:49
appear and when the user finishes adding
16:52
the information they should be able to
16:54
click on publish and then the new lead
16:56
or project will be shown in their
16:57
respective pages so let's just
16:59
copy this submit this here in lovable
17:02
and submit this here in
17:04
bold okay now we can go ahead and see
17:07
the different results for each one so we
17:09
have for lovable uh we can go ahead and
17:13
open this tab go to lead
17:16
management and so let's just move one of
17:19
these over here let's add a new lead
17:21
let's call it uh Apple let's give it
17:24
like a name like Lucas
17:27
margerie um let's give it like some
17:30
random um Florina
17:35
apple.de and then some random phone
17:39
number uh what is this a cold lead a
17:43
warm lead potential value a lot of money
17:47
website Source uh it was a cold call
17:50
let's add this lead okay we need a real
17:54
email address we can just put this one
17:56
and we have under warm lead
17:59
where was it warm lead yeah we
18:01
have um down here Apple Lucas Margery
18:04
right so we have it we can click on it
18:06
it would be nice if we could click on it
18:08
and it would basically pop up and we can
18:11
read more but that's another type of
18:13
function that we can add now let's go to
18:15
the project management and try to do the
18:16
same just you know showing you that if
18:19
we go back to leads it's gone because it
18:21
doesn't save this information it's just
18:22
a facade um that's something that we
18:25
have to add eventually here that's we
18:28
have specific user
18:30
information and all right now for the
18:33
project management what we can go ahead
18:34
and do is Project name is for the Apple
18:37
landing
18:39
page and this is going to be from from
18:42
Lucas right he's a client The Briefing
18:45
was a design we can put like development
18:49
the budget is 500 bucks um and
18:53
description is make make it clean man so
18:57
let's go create projects and here we
18:59
have it right we see the 500 bucks but
19:01
we can't really open it it was due a
19:04
couple days ago so um April 18th so
19:07
let's do like in a month so that's great
19:10
and yeah that's pretty much it for The
19:12
Lovable version right now we can go to
19:15
bolt and let's just go ahead and go to
19:19
the leads first so again we can move
19:21
these around which is great just moving
19:24
them around we can add a new lead so we
19:27
can give this like um Apple company size
19:31
you know a lot of people industry Tech
19:35
so bolt is actually providing us with
19:38
more with more information here contact
19:41
emails like uh Lucas at
19:45
apple.com contact phone is my phone
19:47
number position
19:50
CFO CEO and CTO project
19:56
timeline many years budget Reign is
19:58
ranges a lot lead Source direct project
20:03
scope make make it nice create lead and
20:07
then we have it over here so score 50 I
20:10
wonder why what the score is based off
20:12
of let's try to well I mean it's it's
20:16
interesting that it does that score I
20:18
don't think that's in lovable it does
20:20
that with the score
20:22
but no it only does it with the progress
20:24
right I actually prefer the progress
20:27
line more then with the
20:29
score because you know this is a CRM
20:33
tool for an agency right and with the
20:36
agency we want to get work done and we
20:39
don't want really want to have this this
20:40
score right so in an app like this
20:44
there's a bunch of different things that
20:46
you can improve still I mean we still
20:49
have this little you know bug when
20:51
trying to move things over that needs to
20:53
be improved um we want when we click on
20:56
this we would like to you know have have
20:58
a popup at least we'd like to have some
21:00
quick actions maybe this filter well if
21:04
it doesn't work as you can see so you
21:06
know fixing that would be amazing so
21:09
there's a bunch of different things you
21:11
know adding a team member deleting one
21:14
quick actions being able to upload a
21:16
picture um you know but there's also
21:20
like Integrations right so for example
21:23
what if we were to in this team members
21:25
we can integrate it to snack or
21:27
something like that or or to some other
21:29
type of communications tool right um or
21:33
what if in lead ma uh in the lead
21:35
management there was like some type of
21:38
uh AI chat here in the bottom of the
21:41
screen that you can chat to about these
21:45
specific leads right so these are
21:47
different Integrations that we can add
21:49
with third-party tools so for example
21:51
this this uh chat app can be something
21:54
with with the open AI API key that you
21:57
can integrate toat GPT right and it kind
22:00
of understands what your uh your your
22:04
lead man your your leads as a as a kind
22:06
of knowledge base right or with your
22:09
teams you can you know integrate this
22:11
with uh with with uh what's it called
22:15
slack through different web hooks for
22:17
example you can also integrate this to
22:19
your Google calendar right you can
22:22
integrate your messages also with slack
22:24
somehow so there's a bunch of different
22:26
things that you can do right we can also
22:28
generate
22:29
documents but now the next thing that we
22:31
want to do is we want to add some type
22:34
of integration and I'm thinking
22:36
something uh with this open AI API so
22:41
let's get started with that so the next
22:43
prompt is in the
22:45
dashboard um let's integrate an AI chat
22:49
that uses CRM D data as a knowledge Hub
22:52
where where the user can speak to the
22:54
chat as a type of shortcut to
22:57
understanding certain data points please
22:58
use the open AI AP key for this so let's
23:02
just submit this and let's also paste
23:06
this into bolt and let's kind of compare
23:08
to see how these um two tools work with
23:12
these Integrations right in in this case
23:14
it's open
23:15
Ai and in this case if you want to
23:18
access your API Keys you can just go to
23:20
this platform.
23:23
open.com usage and I mean just go over
23:28
here to API keys and you can basically
23:30
create a new one right so what's great
23:32
is that in bold you can actually go into
23:34
your files and add your API key manually
23:38
you can't do that in uh lovable it's
23:41
only read only you'd have to kind of
23:43
sync that to GitHub which can be quite
23:45
tedious at times so that was actually
23:48
nice that bolt allows you to do that but
23:51
um now what what I basically prompted
23:53
lovable to do is just to have this type
23:55
of you know section over here where you
23:58
you can click here and add your API key
24:02
click on Save changes and there should
24:04
be
24:05
something um there should be some type
24:08
of chat somewhere if we really look I
24:11
don't really see
24:13
it
24:15
but it should be
24:19
here um let's say no
24:23
thanks and no I don't see it so I do not
24:27
see uh so let's
24:29
write after adding the API
24:34
key I do not see the AI chat in the
24:42
dashboard so let's just fix that really
24:45
quick and then let's go here and then we
24:47
we do see an AI assistant and it seems
24:51
to work we can see
24:54
uh
24:56
um give me me the revenue info
25:01
for
25:05
Feb and let's see what it I'm sorry
25:08
about I'm an AI assistant and the data
25:09
provid doesn't contain specific Revenue
25:11
information for February or any other
25:13
months however it can help summarize the
25:14
project budget
25:16
information okay let's ask it to
25:19
summarize the project budget
25:23
info so we do have something beta
25:26
happening we can eventually
25:30
so the total budget for the two projects
25:32
mentioned okay so it
25:35
does see these projects and it knows has
25:40
some information about that but it
25:43
doesn't have any information about the
25:44
revenue because this is all
25:46
like um not real I
25:50
guess um so let's ask about the leads
25:53
give me some
25:56
information about the leads
25:59
so I think it's actually it was a very
26:03
easy way to you know add the API key
26:07
here into bolt in comparison to lovable
26:10
and lovable it had to create like a
26:13
certain input just for that so it says
26:15
certainly according to the data there
26:17
are two leads right so there's this one
26:20
and the other one so okay so that's
26:22
great it's actually working pretty well
26:25
for okay so it doesn't really say it's a
26:28
supposed to be three leads but whatever
26:30
something is
26:31
working so let's go
26:34
here
26:37
and I still don't see
26:40
any okay we see AI assistant here it is
26:43
okay CRM assistant hello I'm your CRM
26:46
assistant ask me on anything about your
26:48
need so probably it was there before but
26:50
I didn't really see it so
26:53
um talk to me about the Eon Commerce
26:59
platform
27:01
project what is there still what um what
27:06
are the next
27:10
steps so let's just see how that goes so
27:13
the e-commerce platform project is
27:15
currently 45% complete with 12 days left
27:17
to finish it wow that's really cool so
27:21
it's a it's a cool little feature
27:23
obviously it was easier to add in Bolt
27:25
because in Bolt you have access to that
27:27
here you have to kind of add the open AI
27:29
key in the
27:31
interface which also works but I think
27:33
it's easier if you just add it to the
27:35
actual app um to the back to like the
27:39
the the files of the app um so that it's
27:41
stored there with your API key um but
27:45
yeah it's pretty pretty interesting all
27:47
right so that's kind of a good example
27:48
of adding an integration to our
27:52
different apps in Bolt and
27:54
lovable okay so now the next thing that
27:56
I want to do is add some authentication
27:59
to both of these so I'm going to be
28:02
using superbase I know that we can use
28:03
Firebase also for Google authentication
28:06
but I prefer super base um as I've been
28:09
using that a lot and it's pretty damn
28:12
good so we're going to connect these
28:14
both to super base so I'm going to go
28:15
ahead and click on super base here on in
28:19
lovable and I'm going to go connect to
28:22
this one and
28:26
connect and basically go back to the
28:29
project and now this is connecting and
28:32
I'm going to do the same here so we have
28:33
this new button up here in Bolt so let's
28:36
connect this and let's click on bolt
28:40
CRM and click
28:43
this connect let's just go connect
28:47
project and now it's also connecting to
28:50
super
28:51
base and the next thing that we're going
28:53
to do here is add a signin and sign up
28:55
page to the projects so let's just
28:57
submit that
28:58
and now it's going to basically draft up
29:00
a new page where the user can sign in
29:02
and sign up and um basically add that to
29:07
super base right now it's in lovable
29:10
they're creating a a new table for
29:11
superbase so we just have to apply these
29:15
changes and then once we've reviewed
29:17
this the
29:18
SQL uh of this table uh it's going to
29:21
run it and basically it's going to store
29:23
the user data there inside of super base
29:28
and so now for each one we do have a
29:30
sign up page so right here this is the
29:33
sign in I can click here and sign up in
29:35
lovable and um something to look into is
29:38
that for each one I created a a separate
29:42
project in superbase so this is for Bol
29:44
and the other one is for lovable and um
29:48
we do have several off providers in this
29:50
case we're just going to be using email
29:52
but we can use phone for example we can
29:54
use Google we can use gitlab figma um
29:58
we're just going to use phone and we can
30:01
you know get on confirm email we don't
30:04
need to really do that but if we keep
30:07
this on basically the users will need to
30:10
confirm their email address inside of
30:12
their email so we can just you know
30:14
leave this off for this tutorial for
30:17
bolt and then I'm going to leave it on
30:19
for The Lovable one so you can kind of
30:20
see the difference so right now we're in
30:24
the sign up page let me just refresh
30:25
this really quick I'm going to go and
30:28
click on my email address right I'm just
30:31
going to put some some type of
30:34
password create
30:37
account
30:39
and we are in
30:42
so sign in and we're in right so that's
30:46
basically user authentication and we can
30:49
get go ahead and check and see we got
30:51
some advisor over here we got one
30:54
warning leaked password protection
30:56
disabled okay so we did get
30:58
something um we can go to table
31:02
editor um sorry let's go
31:05
to
31:08
authentication we can probably see some
31:10
of our users here yeah here we are this
31:13
is me this is my email and this is my
31:16
user ID right so now the next thing to
31:19
set up is deploying the website so
31:22
publishing it on lovable deploying it on
31:25
both so we can just click on deplo
31:27
deploy here on bolt so I'll help you
31:29
diso deploy this application to net the
31:31
so it does it automatically here we can
31:33
click on publish and we have different
31:36
options we can publish this like this
31:38
and it's going to create a publish
31:40
project with this uh custom lovable. app
31:44
domain similar to what framer does or
31:47
web flow I Believe or we can connect to
31:50
a custom do domain if we already have it
31:52
and if we click on this we can add a
31:56
domain that you own
31:58
and a popup will eventually show up
32:01
they're partnering together with um this
32:04
tool I don't know what it's called um oh
32:07
yeah
32:08
entry exactly so here you can just
32:10
continue and basically update your own
32:14
domain but we can also go ahead and what
32:17
we can do is we can connect this to
32:20
GitHub create an this account which is
32:25
mine and we can view this on GitHub and
32:28
let's just go back to bolt and see what
32:32
this the thing is here so your site has
32:34
been successfully deployed and you can
32:37
basically see it here that's the
32:38
deployed site with this netlify app and
32:41
basically you can transf to transfer
32:43
this netlify Pro to your own account you
32:44
can use this claim URL so basically what
32:46
you do is just get this claim URL and
32:49
open it um claim apps in your account
32:53
and basically here it is yours right and
32:57
then down here you would just add your
32:58
own domain so it's as simple as that
33:01
right and to get your own domain I would
33:03
suggest using something like GoDaddy or
33:04
name chep and just connecting it there
33:07
and here what we can do is just you'd
33:08
have to go into netlify so we're here in
33:10
net netlify this is our same you know
33:13
account for bolt and for lovable and
33:17
what we're going to do is we're going to
33:19
go
33:20
into
33:22
sites and we're going to add a new site
33:25
and we're going to import an existing
33:26
project from GitHub
33:29
so I'm just going to connect it to my
33:30
GitHub and we're going to see the name
33:32
is creative collab nectar you can just
33:35
click this leave this
33:37
empty and
33:40
deploy and basically bolt has this
33:43
deploy button inside of Bolt and now the
33:45
the deploy is in progress it takes a
33:47
couple of seconds but it'll eventually
33:50
show up once it's ready so at the end of
33:53
the day we do have these two apps that
33:56
we deployed so we can go ahead and click
33:59
on this where we have our you know
34:01
dashboard right here right and we can
34:06
even I mean here we'd have to add the
34:08
open a key and once you have that you
34:10
can go down here and talk to the
34:13
assistant right um so that's working and
34:16
then the other one which is this other
34:19
page if we go down here which is the
34:21
first
34:22
one um
34:25
is is the uh
34:28
bolt website right where we have the AI
34:31
assistant over here already
34:33
working and we can ask how are the leads
34:39
right so yeah that's basically it in a
34:42
nutshell if you have any questions about
34:45
this please feel free to reach out to me
34:47
um I'm just trying to do these
34:49
experiments just to show you guys how
34:51
this works obviously this would require
34:53
much more you know functionality right
34:56
we just did the very Basics but if you
34:58
really put you know the hours and work
35:00
into it you can build something really
35:02
amazing um one day I'm going to build a
35:05
a full app here in front of you guys so
35:07
you guys can see it but if you have any
35:09
questions please feel free to reach out
35:12
and thank you so much for watching
35:13
bye-bye