Rebuilding Webflow with Lovable...

0:00 right unless you've been living under a 0:01 rock you'll have probably heard about 0:03 the dev Bill challenge between Brett 0:06 from design Joy using webflow and Henrik 0:09 Wes from lovable using lovable and who 0:12 can build the best marketing website in 0:14 45 minutes I subsequently got into a 0:17 conversation with Matt Evans Who 0:19 challenged me to build in lovable a edit 0:24 content editable system basically 0:26 replicating web flow's basic functional 0:30 ity which is creating editing deleting 0:32 posts publishing them things like that 0:34 although I wasn't up for having a race 0:37 necessarily because my biggest criticism 0:39 in all this is that this stuff just does 0:41 take time I did know that I could 0:42 probably create a basic CMS system using 0:46 lovable I did an episode here on repl on 0:49 my other channel but I hadn't used 0:51 lovable before and I thought this was a 0:52 great opportunity just to test lovable 0:54 and see what it's all about so here's my 0:56 attempt at rebuilding web flows basic 0:59 functional 1:00 with lovable let's just show you really 1:02 quickly what we're building we're 1:04 basically we've got this marketing front 1:06 page here um with a Blog section and 1:10 this is going to obviously show all of 1:12 the blogs then you've got this admin 1:14 area which if I log in I'm forwarded to 1:17 the dashboard here where I can add new 1:20 blogs um I can edit them change all the 1:23 content I can unpublish them if I want 1:27 um and add new blogs so this this is 1:30 what I'm going to be building in lovable 1:31 personally I think this is a much nicer 1:34 UI than uh repet but saying that let's 1:38 figure out what our prompt is going to 1:41 be so build uh 1:44 marketing uh website 1:47 homepage with uh blogs 1:51 page blog item page a Content editor 1:58 should be able to log in to the back end 2:03 with let's say a Google let's just do a 2:06 simple Google login they should be able 2:10 to add edit 2:14 delete uh re order blog posts a blog 2:20 post should have a title date what else 2:24 you have in a blog post um rich Let's 2:26 just stick a rich text area uh tags as 2:31 well that'll do publishing them should 2:35 be reflected on the marketing website 2:41 like I'm not I'm not fussed on the 2:43 design obviously we're just trying to 2:46 get something up and running here so 2:48 let's just let's just go with that I 2:49 love that you can do import there I 2:52 think you can use the figma plugin that 2:55 trans that creates HTML from your design 2:58 and then it uses that from um as 3:00 inspiration I guess for making the 3:02 design let's see what goes on here I'm 3:05 excited so it's a nextjs project which 3:07 is great it's using fire blace keep it 3:10 this looks like Tailwind stuff here so 3:12 just going to use Tailwind it looks like 3:14 you can sync this to GitHub as well like 3:17 my belief is that AI is literally just a 3:21 starting point for you to really get 3:22 yourself up and running I still use uh 3:26 repet to edit current websites that I'm 3:29 on 3:30 because it is good but it's good to have 3:32 be able to have the option to sync this 3:34 with GitHub and then code if you need to 3:37 I love that option I've been recording 3:39 for four and a half minutes and already 3:42 I'm looking it's 3:44 looking pretty good the six minute Mark 3:48 now projects being used and wasn't able 3:50 to acquire a lot before 3:54 input install 3:57 Firebase just jump here and one of my 4:00 biggest criticisms at lovable at this 4:02 stage is that it was stuck on this um 4:06 poor bad installation of Firebase for 4:08 quite a while with no feedback in the in 4:11 the in the chat window about what's 4:13 actually happening um I tried typing 4:16 some things to try and kick it into gear 4:17 but it just sort of did its own thing 4:19 with very little feedback which I was 4:21 scratching my head at for a little 4:25 bit okay I think we're good and once 4:30 again it needed a lot of Firebase 4:31 configuration and environment variables 4:34 and things like that the chat winner 4:36 didn't give me any sort of feedback as 4:37 to what that is and I had to look into 4:40 the live website and debug that in order 4:43 to understand that oh I needed to set up 4:45 Firebase stuff and I was also surprised 4:47 that it didn't automatically use 4:50 superbase um for its authentication and 4:52 database 4:54 stuff Firebase cool yeah so I think the 4:58 UI could be clear Clea here that it's 5:01 needed that stuff to be honest so let's 5:04 go to 5:05 Firebase create a new 5:11 project 5:17 test 5:20 cool 5:25 set set to 5:31 okay so it's done that so it doesn't 5:35 look like there's 5:36 no environment variable thing which is a 5:39 bit probably not the right way to 5:41 do 5:47 it right we are getting somewhere 5:51 actually we don't want on about page 5:52 we've got a 5:54 blogs whatever remove about and 6:01 and contact from 6:05 nav pre 6:09 populate with three recent blogs about 6:17 warbat 6:19 oh free message limit here we go 6:29 cool so what was that remove remove bout 6:33 and contact 6:36 one 6:37 cool right let's give it a 6:43 go uh configurate or configuration not 6:47 found we need to go 6:50 into 6:52 Firebase uh we need Authentication 7:12 cool 7:15 cool just loading some 7:18 posts what going on 7:21 here Firebase fire store okay so we 7:25 needs the fire store let's 7:29 get 7:31 that create a 7:34 database database 7:37 ID stay in Europe gdpr and all the rest 7:40 of it start in production 7:47 mode to 7:49 no cool no errors let's try that 7:58 prepopulate first 8:00 load of the dashboard let's just do that 8:03 so we can get this prep 8:06 popular 8:07 boom so here we 8:10 go here we can just 8:14 edit 8:16 and I don't know what whole post of 12 8:18 is but there you go post settings so we 8:22 need a settings page blog loading 8:26 posts done obviously I know what Matt is 8:30 referring to here you cannot update a 8:32 design you can't change the a Content 8:34 editor can't update the content on the 8:36 homepage unless they're in lovable they 8:38 can obviously prompt their way through 8:40 making updates to the design all the 8:42 rest of it but this is inevitably the 8:45 role of a Content editor um being able 8:47 to log in and add posts and blogs and 8:50 things like that it's pretty successful 8:51 in my eyes God knows how I would create 8:54 a designer but I I do think that is 8:56 somewhat possible to be able to create a 8:59 editable design I do think there is a 9:01 time and a place for web flow probably 9:04 wouldn't even recommend a custom build 9:06 like this unless uh they absolutely 9:07 needed it for whatever reason but this 9:09 did save me tons of time what would 9:12 typically be a basic blog posting 9:14 website I think my screen share total 9:17 about 35 minutes something like that but 9:20 there's obviously so much more to be 9:22 done here I'd love to be able to upload 9:23 a design which I just don't have and 9:26 just how I'd approached the design Al 9:28 together I still think we're a ways from 9:30 actually lovable or any other AI tool 9:33 including figma AI from being notable as 9:35 a creative thing development is quite 9:38 easy to use AI for actually Creative 9:41 Design was still not there yet so I'm 9:43 I'm not holding out for lovable to do 9:46 anything amazing but that saved me hours 9:50 of time the UI is a bit of a ways to go 9:52 again repet would warn me about certain 9:55 things it would get me to input 9:56 variables and stuff like that I had to 9:58 kind of assumed that I needed to put in 10:01 the Firebase uh functionality and set up 10:03 Firebase so it had authentication it had 10:05 database and all that kind of stuff I'd 10:08 would have like to have done it through 10:09 superbase considering that is the sort 10:12 of recommended route to do it again I'm 10:14 surprised it didn't let me do that but 10:16 ultimately if you know how to build 10:18 something if you know how to structure 10:20 something which again I said in my other 10:21 video you'll do so much better if you 10:24 know how to code if you know how to 10:26 build applications you're going to do so 10:28 much better in these tools really nice 10:29 interface from lovable but I think I do 10:31 prefer repet anyway like subscribe if 10:35 you haven't already check out my 10:36 patreon.com zx5 M5 for bonus content 10:40 early release content and to support the 10:42 channel and what I'm doing until next 10:44 time happy no coding