Using Lovable To Vibe Code An Email Client

0:00 hi guys welcome to the first video of 0:02 hack starters in this video we 0:03 challenged ourselves to make a Gmail 0:06 email client using only AI coders and we 0:10 chose lovable for this video neither 0:13 myself nor Dan have any coding 0:15 experience whatsoever um so this should 0:18 be quite a challenge ordinarily um so 0:21 let's see if we can do 0:24 itar starters get on 0:27 board innovation 0:30 are 0:32 reward M and de are never 0:37 slow watch them make our tears 0:43 [Music] 0:51 [Applause] 0:53 grow hey guys welcome to the first video 0:56 for hack starters I'm Matt and this is 1:00 Dan and yeah basically we've been in 1:03 Tech now for just over 10 years and uh 1:06 we you probably would know us from q a 1:09 social media SAS company content 1:11 Marketing in SAS and we've been running 1:13 that for 10 years essentially and more 1:15 recently we've been like really into Ai 1:18 and uh Vibe coding and just like hacking 1:21 together startups we've also launched 1:23 several other startups along the way 1:25 with this channel what we decided we 1:27 want to do is basically just see how far 1:29 we can get with AI coding tools like 1:32 lovable um as you can see on our screen 1:34 and we're going to try and build as many 1:36 startups as we possibly can and just a 1:38 mass a really big portfolio um of cool 1:41 cool little startup companies like MVPs 1:43 essentially we're not going to go wild 1:45 with them unless they start to get 1:46 traction uh but just try and sort of 1:49 document the Journey of like what you 1:51 can get done with these tools and where 1:53 the limitations are and see if we can 1:56 start making some money and having some 1:58 fun using these tools so we're going to 2:01 try creating a fullon Gmail email client 2:04 I think that's one of those things I've 2:05 always wanted to build obviously having 2:07 no coding knowledge at all we always 2:09 have to rely on you know developers like 2:10 Pete our developer right now and other 2:12 developers in the past but it's not 2:14 really something you can really put a 2:15 lot of money into because I'm not sure 2:17 there's much of a way to monetize it in 2:19 the future but I think it's just one of 2:20 those things I really want to build and 2:22 having tools like lble makes it possible 2:24 for us to do that now so we'll see how 2:26 far we can go with loveable I mean I I 2:27 see on Twitter a lot people seem to 2:29 think these types of tools can only last 2:30 about 10 to 15 prompts in and then you 2:32 have to move to things like Curel or 2:34 wind surf but we've really found that 2:36 that's not the case and you can really 2:37 go really far with this and I haven't 2:39 really found the limit yet we've already 2:41 made some really cool Tools in our in 2:42 our spare time haven't we this is why we 2:44 thought you know this is a great idea 2:46 for hack starters so yeah we're going to 2:47 start with the email client um inspired 2:49 by inbox by Gmail you you can see down 2:52 here we've had a little play initially 2:53 with um inbox by Gmail we had a little 2:56 bit of a an issue with it so we're going 2:57 to start with a screenshot from from 3:00 superhuman instead and sort of explain 3:02 the type of interface we want and then 3:04 we'll see if it can give us that initial 3:06 design straight away and then work on 3:08 the functionality from there so what I'm 3:09 going to do is attach a screenshot of 3:13 superhuman try a Gmail email client my 3:18 image super clean interface with emails 3:22 in a list format coll side menu with 3:28 options like inbox scent drafts trash 3:33 Etc a top nav section which shows 3:37 different Gmail labels let's see what it 3:40 can come up 3:41 [Music] 3:51 with I 3:53 mean sort of there that's pretty good 3:56 click the little Burger menu see if that 3:57 goes in out yeah it does it goes 4:00 all right that's a start and there's 4:02 different labels there from Gmail 4:04 obviously obviously we're not connected 4:05 to Gmail at the moment I love how Ed the 4:08 screenshot as the 4:10 logo so I've already C created the 4:12 project in super base and then you come 4:15 here and you click connect and it just 4:17 does everything for you so now what that 4:19 does it gives you the power basically of 4:21 loads of different ways to authenticate 4:23 like Google login and email login email 4:25 verification uh obviously all your 4:27 database storage creates all the table B 4:29 to manage users and all their different 4:31 settings and it does all that without 4:33 you having to do anything that's the 4:35 beauty of it cuz we have no idea how to 4:37 do any of that yeah I'd be completely St 4:39 I I get like to be honest I find it 4:41 really intimidating trying to understand 4:43 like anything to do with GitHub and all 4:45 of the different directories and posting 4:47 stuff and server things and this just 4:49 makes it really simple and like if 4:50 there's anything you don't understand 4:52 you just literally ask it and it just 4:53 tells you in plain English and links you 4:55 to exactly where you need to go just 4:57 makes me not feel like an idiot which is 4:59 great okay so I want to try and make it 5:01 look more like superhuman the sidebar 5:04 shouldn't be visible at all when it's 5:07 collapsed T incredible it 5:10 worked yeah there we go look at this 5:12 we're coded that already looks quite 5:15 nice to be honest and I don't think it 5:16 looks too cluttered although I'd 5:17 probably add a little bit of padding 5:19 yeah emo needs a bit of room don't it 5:21 okay so super clean now uh the hover Riv 5:23 color is pretty close to what it should 5:26 be already okay that looks really nice 5:30 super fast super clean so what I'm 5:31 thinking now is we add a way to reply 5:34 reply to all and forward from this 5:37 page okay so it's added it it's added up 5:41 there where's it going oh it's not bad 5:44 that's quite nice actually so do we want 5:47 to now a way to actually connect to 5:49 Gmail so that would be a typically 5:52 somewhat complicated thing I guess hi 5:55 there this is Matt from the future and 5:57 yeah this was a little bit more 5:58 complicated than we anticipated because 6:00 we ended up spending the next I think 6:02 like 3 and 1 half hours on this which at 6:05 the time seemed like a complete age um 6:07 and it was really frustrating and it had 6:09 reached the stage where because we'd 6:10 only got you know a little way with the 6:13 UI and how it was looking I was just of 6:15 the opinion that we should just start 6:17 again in loveable just re-enter a 6:20 similar prompt and hope that we get a 6:21 little bit more Lucky in that it sort of 6:23 plays ball because I've certainly done 6:24 that before with other projects when 6:26 you've not got too far there's not that 6:28 much to lose we can easily replicate 6:30 what we had but Dan was like no I'm not 6:33 giving up so 3 and a half hours later 6:35 we're still going on it but um you know 6:38 that's the way it is and actually three 6:40 and a half hours later not that long in 6:42 development terms is it let's be honest 6:44 you know three and a half hours like 6:46 less than half a day but yeah looking 6:48 back on this edit I'm like yep it is 6:51 somewhat more complicated than it seems 6:53 don't know why he was doing that yeah 6:55 sometimes you're like really lucky with 6:57 how it does it and it just gets it right 6:59 first time you're thinking linkoln is 7:01 like 7:02 magic sometimes you're like talking to a 7:04 brick wall Okay so we've been uh going 7:07 back and forth of Lal for quite a while 7:10 now 7:12 um basically just been going in and out 7:14 of super base looking at the logs um 7:16 copying and pasting it back into loveb I 7:19 believe loveable have full access to all 7:21 the logs in super base but for some 7:22 reason it does Miss some sometimes so if 7:25 you're having these problems then 7:26 definitely go to super base copy and 7:28 paste the full ER and then put it into 7:30 loable because it does it does 7:32 eventually work uh this one's definitely 7:34 taking longer than we usually have um to 7:38 do these types of things 7:41 um you know maybe some developers can 7:43 actually comment in the in the comments 7:45 about 7:46 how how hard it is actually to get Gmail 7:49 linked and pulling some emails and 7:51 labels and everything is it usually easy 7:53 iing it from scratch you know be 7:55 interesting to know like the difference 7:57 and how long it actually takes 8:00 uh but yeah we're about to try the 8:03 latest change um so I've just added a 8:06 logout button below just in case I 8:07 needed to sign out and then back in 8:09 again for testing purposes so what was 8:12 theat what was the latest change you put 8:14 in so Bas it was just going through the 8:16 super bow logs yeah it was putting in 8:18 the error yeah put in the error and it's 8:21 just made another another change and 8:22 obviously this is like the 300th changes 8:25 made yeah it's been almost four hours 8:27 now on this stuck on 8:30 did you see on our last call I went to 8:32 drink this and Spilled it all down 8:33 myself tried to tried to like like cover 8:36 it up 8:41 like hey we have 8:45 emails oh my God 8:48 finally oh there we go our tests there's 8:52 all our little test emails we put Do Me 8:54 A faor Try clicking on one yeah click 8:55 yeah yeah click on one yeah so with that 8:58 out of the way we decided to move move 8:59 on with some of the basic UI stuff such 9:02 as email controls being able to delete 9:05 emails archive them we decided to add a 9:07 tick um which effectively archived an 9:10 email and we had to make sure that when 9:12 we did that it matched up with what 9:14 GMail classifies as an archived tags 9:17 email okay 9:21 done oh I did it fantastic great it 9:25 should be in there 9:27 now show me everything shouldn't be in 9:29 there but oh there wait well unless 9:32 they're all over they might be done they 9:33 might be archived yeah just just try 9:36 another one um just try doing like 9:39 Casino screws it's easy to see 9:44 yeah so that's gone done yeah yeah and 9:48 it's an old one so it's gone there not 9:50 in order of when it was sent so that's 9:53 fine that's great good hey good 9:57 stuff i' say that was some good progress 9:59 look at that look at that a relatively 10:03 functional nice clean 10:06 inbox yes so you can see the email's 10:08 coming through the browser looks pretty 10:10 good that looks really nice yeah that's 10:14 looking good Y how long do you think the 10:16 term Vibe coding is going to be 10:19 around I 10:21 just I know it's a popular term for it I 10:23 just it just sounds so douchy well I 10:26 think it's just the meaning more than 10:27 the 10:29 yeah name of it it's that I think Vibe 10:32 coding the definition will be a long 10:35 around for a long time now and it won't 10:37 just be coding it would be all sorts of 10:39 stuff it's annoying I have to get on 10:41 board with it then yeah no I like the 10:43 sentiment of it I like the sentiment of 10:45 it and I don't think I've got a better 10:46 alternative frankly but it just feels 10:50 like can't quite put my finger on what's 10:53 was a better word than live coding then 10:55 so like if you're just like going with I 10:57 think it's just it's sounds like it's 10:58 trying too hard to be cool and like and 11:01 I feel like you know although it's 11:03 really amazing for us all non coders 11:06 non-technical Founders to be able to do 11:07 all this let's face it it's it's pretty 11:11 darn easy compared to actually knowing 11:13 it and trying to make ourselves sound 11:15 cool it just feels like we're frauds I 11:18 don't know well what that flow code is I 11:21 mean I like the sound of it more it just 11:22 sounds AIT you could be floaters be like 11:25 oh look at me I'm Vibe coding I don't 11:27 know float floaters 11:30 Flo this that sounds like something you 11:32 do toilet sounds like I'm just floating 11:35 you know in the L is he as us English 11:38 people say when you're in a cafe someone 11:39 would come over there they'd see your 11:40 screen they'd be like oh my God you're a 11:42 floater that's crazy I'd love to almost 11:45 as bad as a as a frun 11:48 or whatever Tesla people frunk front 11:52 trunk what was the other thing 11:55 a frunk and a uh fruit 12:00 a front boot that's the worst fruit yeah 12:03 typical British people ruining 12:06 everything um actually really surprised 12:08 when I when I watched one of these 12:10 recordings back how English I sounded 12:12 and I didn't sound Cornish which is 12:14 usually the 12:15 case oh no I mean like proper Cornish is 12:19 like very different to you but I usually 12:21 sound really 12:23 plovan toan because I'm from Plymouth 12:26 aren't I yeah but you don't I don't 12:28 think you I I you've definitely got West 12:30 country twang but I you you don't sound 12:32 broad like West country 12:35 Merchant yeah I mean he sounds he sounds 12:38 perfectly bristolian which is where I 12:40 am anyway has um we're just updating and 12:44 then we'll see if the plan need loads of 12:46 changes so it says it's added some like 12:48 support for Bas 64 encoded images so 12:51 that's cool that sounds good as a floer 12:54 I know all about that are we going to 12:55 try and make something catch on with our 12:56 zero following I do like fler to be fair 13:00 might have to come by the domain 13:02 fler how many domains do you own a 13:07 lot floer that's floer so it can't be 13:10 that floer oh someone's already got 13:12 floer that's mental thank God that's 13:15 mental it's funny though cuz some some 13:17 things you do on here and it's like yep 13:19 done that's good move on to the next 13:20 thing and then you think this would be 13:22 quite an easy thing yeah yeah it seems 13:25 like it would be it is not 13:29 so it looks exactly the same still so we 13:31 got to check with it again it's got to 13:32 keep going at this point all we were 13:34 trying to do was to get the plain text 13:36 emails in the inbox to actually display 13:38 properly because they weren't showing 13:39 images uh they weren't showing gifts um 13:42 and I don't think they were showing 13:44 attachments correctly uh whereas all 13:47 HTML emails that we were receiving from 13:50 other companies were displaying 13:51 perfectly um however whatever we tried 13:54 we just kept running into the same 13:56 problem where lovable said that it was 13:58 working all should be fine but it 14:01 clearly wasn't so we were sort of 14:03 hitting a bit of a dead end um trying to 14:05 tackle this to look at that let's go 14:08 back to here 14:10 maybe at this like amazing Flo of logic 14:13 maybe we'll if we remove those instead 14:16 of do this and then we come back to 14:17 doing that task it'll just work yep okay 14:20 so you want to get rid of later and 14:21 saved entirely or we're going to just 14:23 remove the clock emojis just remove the 14:25 little colored emojis for now so in 14:29 I don't know if it's possible at this 14:31 point it's probably a complicated 14:32 feature but like in inbox by Gmail they 14:35 used to have the tick for archive which 14:38 we've done and that now works and they 14:40 used to have a like a clock 14:43 thing which would snooze it but that 14:47 meant that it also cleared your inbox 14:49 somewhat so do that yeah are we gonna 14:54 get options though like snooze for an 14:57 hour snooze for 24 hours 14:59 yeah I like that 15:01 yeah it's actually something that I use 15:03 quite a lot like if the dentists say oh 15:06 you're appointments next week and I'm 15:08 like I don't need to know that now like 15:09 remind me in six days like the day 15:11 before yeah try the screenshot yeah so 15:15 so taking a screenshot of code or of 15:17 anything on a website tends to work 15:20 quite well when you just upload it into 15:22 the chat although I noticed something 15:24 when I was working on something the 15:26 other day where I wanted to incorporate 15:29 a pattern into the background it was 15:31 like a hexagonal repeating pattern and I 15:33 sort of took a screenshot of one that as 15:35 an example and it just could not do it 15:38 like it doesn't matter how I asked it to 15:40 do it how I uploaded the picture it was 15:44 just all it was doing was just like 15:45 diagonal lines I was like I don't 15:48 understand how you can do such clever 15:49 stuff but you can't do this one thing 15:51 that you could put into an email client 15:52 I don't know if there'd be any appetite 15:53 for this but like there might be from 15:55 some people is like you could put like 15:57 almost like metrics of like how well you 15:59 deal with your 16:00 emails yeah like a gamification type 16:03 thing yeah like like a an analytics page 16:06 of like how fast do you read a new email 16:09 how fast do you mark it is 16:12 done gramly thing when they send you an 16:14 email saying you're in the 95th 16:16 percentile of gry yeah you spend like 16:19 33% of your time with inbox zero 16:23 congratulations have a pat on the back 16:25 here's a picture of a sunset I do really 16:27 want to build a mobile app 16:29 um with Bol well actually there's 16:32 there's quite a few now I've I was 16:34 playing last night with a couple of them 16:36 I've never had to play with it but I 16:38 hear good things well see I I never get 16:41 on with both very well I I other at the 16:44 moment but bolt actually can create 16:46 react native 16:47 apps is built on Voice or I yeah so 16:51 yesterday I was trying out bolt then I 16:54 was trying Ro R RK 16:59 and then another one which is ao. Dev 17:02 okay so it's added this news feature so 17:03 we can try it now just publish it again 17:06 yep let's see if it works yeah know I 17:08 got a great idea for a mobile app that 17:09 we can try and it's not the bullet cow 17:12 it's another 17:13 one I really wanted to do bullet Cal 17:16 though so in the end um after much 17:18 chitchat about floating and floater and 17:22 various other things um we did manage in 17:25 the last hour to actually remove those 17:27 little emojis that seem to p through 17:29 from Gmail um and just kept it 17:31 consistent with the other icons that we 17:33 had by those folders and we also managed 17:35 to get the snooze option working um when 17:39 you hover over an email and you click 17:41 the snooze button to add it to deal with 17:43 later um it will then move that into a 17:46 snoozed or later folder um with a few 17:49 options of like next hour tomorrow in a 17:52 week's time so that was good progress 17:55 but yeah so we've now got it to a stage 17:57 where it can essentially put things in 18:00 archived state so we you can click the 18:03 tick icon and it makes it done and you 18:06 can snooze things by clicking the 18:08 calendar and I prefer the calendar to 18:10 the little alarm clock icon actually 18:11 yeah I mean it does it obviously does 18:13 move it into a snoozed pholder but none 18:15 of the logic is there to 18:17 actually the reminder doesn't actually 18:19 work back yet so do that yeah okay so 18:24 the next thing to do is actually get 18:26 that logic in place to make it come back 18:29 so maybe we need to create like a a one 18:32 minute snooze or something just so just 18:35 so we can test 18:36 it um what would be the next thing then 18:39 we just want General use things like 18:41 being able to send an email being able 18:43 to reply to an email and forward an 18:44 email and I think yeah you know then 18:46 we've got a full email client at that 18:47 point yeah it's working uh we can just 18:50 tweak some of the design and set it live 18:52 and yeah then I think it's hopefully if 18:54 we can do that then yes you can build an 18:56 email client in lovable so let's see if 18:57 we can finish it off oh and one one last 19:00 thing is to get those plain text emails 19:03 displaying images ah yes those pesky 19:05 plain text things they were not working 19:08 okay so we need to keep going with that 19:09 that was a tricky one yeah yeah so we 19:12 yeah we'll look into those five things 19:14 today and then uh see how we get on so 19:16 we're on like hour seven now of the 19:19 build so in seven hours we've managed to 19:22 basically get all that structure in 19:23 place some basic design and yeah it's 19:28 looking good 19:29 it's looking nice a few a few functions 19:31 are working the nav's 19:34 working Y and that's about one day's 19:37 work that we've done that in with no 19:39 coding knowledge or experience it's 19:42 pretty cool it's really cool is it I 19:44 mean yeah if you've told us last last 19:46 year that we could we could be able to 19:47 make our own email client this time next 19:49 year we wouldn't have believed you no 19:51 not a chance you know because you'd have 19:53 to start from some sort of template or 19:54 theme like on Bubble for example you 19:57 know that the best it can get but 19:59 this just makes it so much easier takes 20:01 it to the next level it's insane yeah 20:04 that's amazing right so let's start off 20:05 with just generally send it an email 20:07 yeah yeah so we'll get this pencil icon 20:10 working by the way in the future if we 20:12 ever need to like connect to a third 20:14 party thing like Google to use their API 20:16 what we need to do is use username and 20:18 password to initially log in and then 20:20 when you're in then do the build like 20:23 connect a Gmail account from that point 20:25 isn't that what we tried the first time 20:26 though yeah we were mixing both Google 20:28 off and username passwords yeah sure 20:32 that that means that we could actually 20:34 log into this preview thing and see our 20:35 active account yeah that would be 20:37 preferable yeah so we can do that next 20:39 time there we go nice I mean we can try 20:41 sending it yeah try sending something 20:44 send it to hack starters set it to 20:46 ourselves send it it's gone it's there 20:48 it's done wow that was insanely 20:52 fast okay so that worked straight away 20:55 and it should be in sent I assume 21:00 wow that wow I don't think I've ever 21:02 seen an email send that fast yeah I 21:04 suppose it's sending it to himself but 21:06 still can you send one to 21:08 me S come through wow pretty good okay 21:12 so sending emails works yeah just that 21:15 wow that was insane gosh I thought that 21:17 would be something that we might even 21:18 get stuck on but no that was easy as 21:20 hell I don't even know what's going on 21:22 behind the scenes to make that work but 21:23 it works yeah I notic here we are being 21:25 cut off here and we can't see like 21:27 emails prior to it I assume this isn't 21:29 the last email we had all em from you so 21:32 maybe we should add yeah true like 21:33 unlimited scrolling on the inbox yeah 21:36 unlimited scrolling is much better than 21:38 just having like pagination something 21:40 that I'd want to do yeah yes so that's 21:42 all the emails on it lovely yes that 21:45 that works perfectly yeah that's that's 21:46 right the end yeah I mean touchwood so 21:48 far this is proving very good and it 21:51 might be 3.7 or it might just be that 21:53 we're asking it really easy stuff that 21:54 either worked really well because it was 21:56 easy or worked really well because of 21:57 Sonic 3. 21:59 we'll find out I guess that was really 22:01 easy and looks quite nice I mean what 22:03 else you need really yeah I know now we 22:06 just need to get the all the different 22:07 folders working in the nav and the 22:09 snooze actually snoozing and the plane 22:11 text showing up and then I think we're 22:13 done aren't we yeah pretty much it's an 22:15 email client that you can log in with 22:16 your Gmail account grab your emails and 22:19 you can send and receive them oh I guess 22:20 I guess you could we could also put in 22:22 the functionality to add multiple Gmail 22:24 accounts yeah and then you'd be able to 22:26 switch between or have it okay just 22:27 think about how us let it's certainly 22:29 not an MVP feature so like I don't feel 22:32 you know for the benefit of this video I 22:33 don't think we need to do that we could 22:35 easily add that afterwards for our own 22:36 enjoyment of using the app yeah let's 22:39 get plain text emails working sh yeah 22:42 let's try that that was difficult I'm 22:43 going to go in chat mode for this 22:44 quickly I'm going to ask it plain text 22:47 emails AR showing media like images 22:50 gifts Etc yeah what's the best route 22:54 forward to ensure media is displayed 22:57 yeah I'm happy with that let's try it 22:59 I'm going to close it every time and 23:01 refresh it because that seems to work do 23:03 you think you get superstitious with 23:04 stuff like this cuz I do but it's that 23:07 idea like if you go in there and hasn't 23:08 refreshed properly but you just so it's 23:10 not actually showing you any changes so 23:12 then you think it's not worked and then 23:13 you go back and change it then you could 23:14 have broken it and this yeah seriously 23:16 con yeah I have that exact same anxiety 23:18 or paranoia I don't not sure what it is 23:22 yeah so just a quick update after after 23:24 that little session um basically banging 23:27 her red against the the wall right at 23:29 the end uh CU essentially at the 23:31 beginning when we were basically asking 23:34 Lal to implement pulling in or fetching 23:37 emails from Gmail um we specifically 23:40 mentioned to distinguish between plain 23:42 text emails so just like people just 23:45 sending you a general conversation email 23:47 like a message versus a fullon HTML 23:50 email from like a a shop Etc um and 23:54 because we did that that's now caused 23:56 this issue where we're trying to 23:58 basically remove all those plain textt 24:00 processing that we're doing because 24:03 images and gifts and things aren't 24:05 displaying in line and what I found from 24:08 working in lovable is that if you've got 24:10 something already implemented it's 24:12 really hard for it to delete it for some 24:13 reason I don't know if it's that's a 24:15 limitation of lovable or the models or I 24:18 don't know but it's making it really 24:20 really complicated for us so think in 24:22 the next session we're basically just 24:23 going to ask you to delete everything 24:25 regarding fetching Gmail emails and 24:28 start from scratch in that on that on 24:30 that part of it um but yeah top tip if 24:34 you really don't want 24:35 something uh included in your app be 24:38 really specific with your prompting tell 24:41 it to remove both of those and then say 24:42 that you're going to check again 24:43 afterwards at what processing there is 24:44 in place and if there's anything there 24:46 then you're going to go ballistic 24:49 okay after this 24:52 implementation there is any processing 24:55 remaining I'm going to curser I will you 24:58 with curser the lovable 25:01 founder don't say 25:04 that just say that you're going to cheat 25:06 on it with curer I would cheat on you 25:08 with b a it's a more 25:11 a what a a dagger to the heart it's not 25:14 in capitals though so it might not be 25:17 yeah quite it's just it's just a very 25:19 like lowkey threat a lowkey British 25:22 threat will it be true zero that's the 25:24 next question well mate if there's 25:25 anying processing left in this after 25:27 you've done that I'm gonna actually go 25:29 and cheat on you with bolt and I don't 25:30 want to use bolt because it's not as 25:32 good as theable make sorry bolt fans but 25:35 I've not managed to build anything 25:36 useful in that yeah we need to be really 25:39 careful with stuff we add 25:41 in keeping keep well the nice thing 25:43 about doing this is that we're making 25:45 MVP so keeping things simple is a 25:48 benefit a huge benefit and we can always 25:50 try and make it more complicated 25:53 afterwards but want to build clean 25:55 functional apps that work really well 25:58 and oh cool can you scroll down to the 26:01 bottom of that again so I can't scroll 26:02 within emails so we need to be able to 26:04 scroll within an email let's move on to 26:05 that then we'll come back to the plane 26:07 test thing okay when I open an email I 26:10 can't scroll within the ey frame browser 26:13 these are scrolling capability it should 26:17 be an easy one he said jinxing the 26:19 entire 26:21 platform the I frame scrolling 26:23 capability is indeed missing I mean like 26:25 why wouldn't you have added that come on 26:26 manam about it full on [ __ ] hat 26:30 yeah oh is it totally broken 26:34 now so publish that again can scroll 26:39 within in there not smoothest thing in 26:41 the world I wonder how much of like the 26:42 previous conversation it uses every time 26:44 you message H yeah I wonder what the 26:47 context window for it 26:50 is it's 3.7 I think 26:53 is 200,000 contacts 26:56 window but I would have thought we' 26:58 already we pass that so moving on with 27:00 the build at this point we've done s 27:02 hours in total on the email client 27:03 really not very much entering into hour8 27:06 now we decided to get the search 27:07 function working and toward ours a light 27:09 this started working immediately and was 27:11 clearly scanning the body of the email 27:13 as well as just the sender email address 27:16 and subject line so that was great onto 27:19 red and unread email States now we opted 27:21 for a really vague prompt here just 27:23 telling lovable let's distinguish 27:25 between R and unread emails with an 27:26 indicator of sorts we noticed that 27:28 several times during the build we've not 27:30 given the AI too much Direction and it's 27:32 actually surprised us with the 27:33 functionality and design that it added 27:35 of its own accord whereas there have 27:37 been other times when we've been very 27:40 prescriptive with our prompts and it's 27:41 fallen short of the very specific Vision 27:44 that we actually had in mind so it's 27:45 almost as though you need to give the AI 27:47 space to be creative and do its own 27:49 thing sometimes this worked pretty well 27:51 as you can see it used a blue dot for 27:54 the unread emails and made them bold but 27:57 there was an annoying indent created due 27:59 to the blue dot so we removed that and 28:01 made each email only take up one line 28:04 rather than two much cleaner it's 28:06 looking great now it's sending it's 28:08 receiving folders work we're almost 28:10 finished you click 28:12 the uh the done button now we've got 28:14 these little nice hover overs it just 28:17 goes instantly so you don't have to wait 28:19 around for it to to happen it's just 28:20 boom boom boom boom nice and quick so 28:23 nice so fast as well yeah so fast just 28:25 done look how clean that looks so next 28:29 thing we're going to 28:31 add is cuz when I chested a minute ago 28:34 we weren't able to forward so when you 28:37 click forward it comes down here you 28:38 can't scroll for a start and you add an 28:40 email address and I can't actually type 28:42 in here can't typ it's just it's a dummy 28:45 a dummy field okay yeah although when 28:47 you click reply it fills pre-fills and 28:49 then you can send it that's fine that 28:51 works can you SC can you add a new 28:54 recipient in the reply field no okay so 28:57 that's that's do that in one go should 28:59 maybe not actually have a look all right 29:00 let's see if this works yeah I can I can 29:03 do it now so I do my iq. I can't 29:06 actually send it there because I can't 29:08 scroll before I do that I'm going to 29:09 show you this edit tool quickly so if 29:11 you click this little button here you 29:13 can literally select anything on the 29:14 preview window to make changes so we can 29:16 change this to what it's supposed to be 29:18 called which is super 29:20 mail and then you just literally click 29:22 save and it's done I do I do love the 29:24 fact that like features are literally a 29:26 prompt away it's cool from like a non-te 29:30 Founder perspective to be able to now 29:32 just have the power to do that it's 29:35 amazing got an attach fast button 29:37 brilant there you go done cool I'll send 29:40 it to you to see if you actually get it 29:42 yeah that's come through and yeah I can 29:44 see the attachment do we do the inbox 29:46 zero nice image thing yeah I'd love that 29:49 that's a nice touch it's a nice like 29:51 reward isn't it like sort of yeah 29:54 clearing your your your emails and then 29:56 when you you sort of open it up you can 29:57 see that and you think ah yes helps you 30:00 feel like the app is helping you sort of 30:02 stay organized all right let's see if it 30:03 does it in one shot that'd be amazing if 30:05 it does okay all right let's try it go 30:08 go go see how quickly you can get 30:09 through emails now because it's like 30:10 just done b b b b b b slow motion let's 30:15 see it let's it is it gonna 30:20 work oh look at that pretty enjoy the 30:22 Cal your inbox is completely empty did 30:25 you add that I asked it to do you've 30:26 reached inbox Z that was it it just 30:28 added the enjoy the calm I love that I 30:30 was going to ask you to add and Breeze 30:32 or something like that so it's it's just 30:34 nailed it well congratulations mate we 30:35 just built a fully functioning MVP of an 30:39 email client without any coding it works 30:41 it works that looked incredible who knew 30:43 who knew you could build an emo client 30:45 without code we 30:47 did so good congrats mate that's awesome 30:50 dude I Lov the look of that as well 30:52 that's so 30:54 nice really proud of that actually 30:56 attaches on there now 30:58 yeah perfect it's added it to all of 30:59 them that's amazing it is a I'm so 31:02 pretty Next Level fact that you can just 31:04 do this now I wonder if you search for 31:06 em here it's like um what it says so 31:09 Riverside yeah so just get Riverside it 31:12 will still find them from the archive 31:14 brilliant that's great that's I mean I 31:17 want to use that 31:19 now that's a sacrifying well you know we 31:23 we could actually launch it uh that 31:25 would be obviously a whole new learning 31:26 code maybe actually getting it 31:30 yeah already yeah so I assume we can 31:33 from here from lover attach it to some 31:35 sort of custom domain or do we need to 31:36 put it on GitHub first and then do it 31:38 from there so these are things we need 31:40 to 31:40 learn how to do yeah that's true that's 31:43 cool that's I me even it's an AI 31:47 generated landscape as well so oh wait 31:49 was it it's really nice it looks like it 31:52 would be in Canada somewhere yeah not 31:53 not 31:55 real so there you have it we managed to 31:58 actually build a Gmail email client and 32:01 it took us nine hours pretty much in 32:03 total we did that across about five or 32:05 six um shifts maybe um just jumping on 32:09 around our usual work um it was pretty 32:11 good fun and to be honest something that 32:14 should be quite a complicated thing to 32:15 build actually felt pretty darn easy 32:18 looking back on it um so yeah we're 32:20 pretty proud of the result and you know 32:22 maybe we'll continue to refine that app 32:24 a little bit here or there adding a few 32:26 more features maybe even use it for 32:28 ourselves and see if it's something that 32:30 one day we can ship live but if you've 32:33 enjoyed the video and would like to see 32:35 us do any more builds um or any videos 32:38 covering some of the new AI code Builder 32:40 software then please hit that like 32:42 button subscribe for more videos and 32:45 updates and I'll look forward to seeing 32:46 you in the next video thanks very much 32:48 for 32:51 [Music] 32:54 watchings to take themer 32:58 shipping startups Lightning Fast living 33:03 in the future can't look at the 33:06 past hack starters hack starters get on 33:11 board 33:13 Innovation are 33:16 reward that and death are never 33:21 slow watch them make ideas grow 33:27 oh 33:35 [Music]