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

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