I Built A Duolingo Clone In Just 33 Minutes with LOVABLE AI

0:00 I'm going to build Dolingo in just 33 0:02 minutes using Lovable AI. It's going to 0:04 include a signup page, a logging page. 0:06 It's going to have six different 0:08 languages. It's going to have many 0:09 different lessons. It's going to have an 0:11 XP system, and much much more. So stay 0:15 tuned. I'm going to start immediately 0:17 with a timer now. So we start the timer. 0:19 Go to chat GBT. Ask 0:21 describe Dolingo as an 0:25 MVP. Then we're going to wait for 0:27 response from Chat GBT. We're going to 0:28 feed that MVP description right into 0:31 Lovable AI to get a really good start on 0:33 our Dualingo app. So, there we go. Key 0:37 features, why it worked. Um, we don't 0:40 need all of those. So, we'll just copy 0:43 copy the first part here. And then we'll 0:46 go to the 0:48 dashboard. And then we'll paste it right 0:50 in here. So, make 0:55 this. And 0:57 now it's spinning up the preview. How 1:00 we're doing for 1:03 time. There we go. Four minutes. 1:05 Spinning up the preview. Let's go. Yeah, 1:07 only four minutes. That's all it took. 1:08 It's going to start now. Let's see what 1:10 we get. Boom. All right. We got an error 1:13 immediately, but let's fix 1:16 it. Lingolarn. Okay. So, that works. 1:20 Index pitch doesn't work. Or does 1:23 it? There we go. All right, we're up and 1:26 running. Let's go. So, it only took 5 1:29 minutes and 21 seconds roughly to get 1:32 started. Now, let's select a language. 1:35 Let's say Italian. Ready to learn. Get 1:38 started. Um, all right. 3day streak, 1:41 zero XP. Let's uh get started with the 1:43 basics here. Um, wow. I already selected 1:47 a language, didn't I? All right. Every 1:51 time I click on it's not really taking 1:53 me into a lesson it looks like which 1:55 we're going to fix. So as soon as I 1:58 click basics to get started with the 2:03 lesson I get rerouted to the index page. 2:07 Please create a lesson view that follow 2:11 uh that actually teaches me all six 2:16 languages you've provided me with. 2:20 All right. So, we're going to have to do 2:24 that. So, as you can see, I ran into an 2:27 error immediately and it was a little 2:29 buggy to begin, but now hopefully it has 2:33 uh edited and made sure that our lesson 2:35 view actually works. Let's see if we get 2:36 an error or if the build is complete. 2:38 Kind of looks like the build is 2:39 complete. Let's try to learn Italian 2:41 again. Takes us to the dashboard. And 2:44 there we go. Now we're started. So, 2:46 hello is ciao. Great job. That's 2:48 correct. 2:49 Continue. Uh Arie, I think that's Yeah, 2:53 there we go. Goodbye. Perfect. Match the 2:55 pairs. Thank you, Peravore. Please, 2:58 Grati. Yes. See, no. No. Thank you, 3:01 Grati. There we go. So, there we matched 3:03 it. 3:04 Perfect. Complete the sentence. Come 3:08 see. No, me t. All right. Well, I wasn't 3:11 so good at that one. 3:13 And I think that's I think that's how 3:15 are you? There we go. Perfect. Lesson 3:18 complete with confetti and everything. 3:20 That's awesome. All right, continue. And 3:22 what happens next? All right, so 3:25 basically we got a basic version of uh 3:28 Dualingo pretty fast. We're on the 9m 3:31 minute timer now. However, it didn't 3:34 unlock the next step. So let's make sure 3:37 it unlocks the next step every time. Uh 3:40 and then we'll consider the MVP kind of 3:43 finished. Let's see. Every time time I 3:46 finish a lesson/section, I want to 3:49 unlock the next 3:51 section. When I finish basics one, now I 3:55 never unlock basics 2. Fix 4:01 it. All right. So, we got an error here. 4:04 Um, we got an error somehow and uh it's 4:08 error in the code, but as well as saying 4:10 that it's failing to save 4:12 progress. So, we're probably going to 4:14 have to add some kind of user 4:16 functionality in order to save progress, 4:19 maybe. Hey, fixed it. Let's try again. 4:22 Ciao. 4:23 Perfect. Perfect. Uh, thank you, please. 4:27 Yasi. No. No. I feel like the the 4:29 matches aren't working at all. Like this 4:31 this number is a little buggy. So, we 4:32 probably have to fix that. Otherwise, it 4:33 looks good. Correct. Well done. The 4:35 stepper looks good. Come die. It's good. 4:38 Less than complete. 50 XP. So, we got 4:40 more XP because we got more, right? That 4:42 makes sense. It actually has integrated 4:44 a XP uh system in the game. Quite 4:48 impressive. Now, there we go. Basics. 4:50 So, now that I fixed the error, it is 4:52 now 100% complete basics one. Uh let's 4:55 see. Can we complete basics 2. We also 4:58 got a one one day streak. All right. So, 5:01 it looks like lesson not found. So, we 5:03 basically got to create lessons for 5:05 every every single block. So, let's do 5:07 that. create lessons for basics, two, 5:10 food, animals, and clothing for all six 5:14 languages you have provided me with in 5:17 the Dualingo app. So, now I'm going to 5:18 let build that. Let's see what we're 5:19 doing for time. We're currently at 13 5:21 minutes. I think we're going to be able 5:22 to get like sign in and um like active 5:24 authentication and saving saving 5:26 progress done for a basic version of the 5:28 app before 20 minutes. Let's 5:31 see. So, now I'm going to start writing 5:32 a prompt that actually starts preparing 5:34 for a signing page. I'm going to write 5:35 while builds. Please build a sign in and 5:37 sign up page that logs in an existing 5:41 user or creates a new one. Once the user 5:45 is logged in, navigate to index and show 5:50 languages 5:52 available and also show which language 5:57 the user has already made progress with. 6:02 Let's maybe split that as two two 6:05 different paragraphs. Uh is there 6:08 anything else we kind of want in here? 6:09 I'm not sure. Well, if we can keep all 6:10 the lessons. Yep. Perfect. Yeah, I think 6:12 that's good enough for an MVP. So, we're 6:14 currently at 15 minutes to build a basic 6:16 MVP of this. Okay, saving right now. So, 6:20 when it's done saving, it's created all 6:21 the lessons. Then, we're going to create 6:22 the signup system and finish the 6:25 app. All right, so it added new lessons. 6:27 It should work now. So, hopefully basics 6:29 2. There we go. So right now we actually 6:30 got basics two to work. Seems like it's 6:32 kind of giving me the correct answer 6:33 like right next to each other. So it's 6:34 the matches again the matches number 6:36 here are not really working. And um 3,00 6:38 it's kind of counting the points versus 6:40 matches. So we got to fix that. And it 6:41 seems like the right answer is always at 6:42 the very very very top funnily enough. 6:44 So that's something we got to fix. But 6:45 however the XP system works which is 6:46 really cool. And we now have progress. 6:50 There we go. So you have progress going 6:53 through the application. So the last 6:55 thing seems like all the lessons seems 6:57 to work. Let's check the other languages 6:58 as well. Let's try 7:00 French. And once we've tried French, 7:04 there we go. So, French works. And let's 7:05 going to check the uh Spanish also. And 7:08 if the Spanish works, we're going to 7:10 paste and let it build. Yeah, there we 7:12 go. So, we're going to paste this prompt 7:14 now to build a sign-in page. And then 7:16 we're going to connect the database. 7:17 We're currently at 17 and 10 17 minutes 7:21 and 10 seconds to build this Dolingo 7:23 clone. And maybe I'm actually going to 7:25 write a prompt here to redesign the 7:29 what's it called the dashboard dashboard 7:31 UI so that the lessons lesson path looks 7:34 more like the real Dolingo app. Meaning 7:37 we want each lesson to be a node that is 7:42 either locked or 7:45 unlocked. And it is clear that past 7:48 lessons are 7:50 unlocked and clear that the current node 7:55 where on is the current lesson. 7:58 You can use the same lesson 8:01 emojis. Just make a vertical timeline 8:04 with round nodes with icons in them as 8:08 the UI. And then the user traverses 8:10 through this timeline by scrolling. By 8:15 default, the window 8:18 focuses on the current node, which is 8:21 the current lesson the user is on. And 8:24 then the user can scroll to the past or 8:27 to the future to 8:29 um explore lessons. There we go. So, 8:32 we're going to say this prompt. Now, 8:33 it's done. So, uh I don't think this 8:34 will work. We're going to have to 8:35 connect Superbase. I'm going to say this 8:36 prompt right here. Now, I'm going to 8:37 connect Superbase by clicking Superbase 8:38 here. If it's your first time doing 8:40 this, um it's going to take a little 8:41 more to do some setup, but since I've 8:42 done this before, it's going to be 8:42 easier. I'm going to create a new 8:43 Superbase project. I'm going to call it 8:45 Dualingo. So, I'm going to continue with 8:46 GitHub here. All right. And then maybe I 8:48 need some kind of extra authentication 8:50 here. Maybe not. Let's see. Yeah, let's 8:52 create a new project to do a lingo. Type 8:54 in database. Please don't hack me. Oh, 8:56 wait. There we go. That's fine. I'll 8:57 just uh type a small password there and 8:58 all know it's all in circles. Someone 9:00 data bridge. No bueno. There we go. All 9:01 right. Let's see. It's connected. We're 9:03 going to connect this one. There we go. 9:04 In lovable. Perfect. It's connected. 9:06 Have to set up here. I think 9:07 authentication is very important here 9:08 that you have some policies. Uh let's 9:09 see. There's some some setup that might 9:11 needs might need doing here. Database is 9:13 here. Schema roles. I think should be 9:15 here. And policies. Sign in sign up. 9:17 Allow new users manual linking email 9:18 enabled. Perfect. We don't want a 9:20 confirmation email or secure email 9:21 change. Um, so we'll just uncheck those 9:23 cuz those cause some errors in the 9:24 application. So we're just going to keep 9:25 it simple by unchecking confirm email. 9:26 And then we're going to go back to our 9:27 project back to project. Uh, and then 9:29 we're going to say connect my Superbase 9:31 database to this application so that I 9:33 can successfully sign 9:36 up to uh, create a user and then all 9:39 lesson and language uh, progress is 9:43 saved on the account I'm currently 9:45 signed 9:46 into. Create all necessary tables, 9:49 database tables. There we go. Perfect. 9:51 Let's see if it does that. And we're 9:55 going to check out the time. We're 9:56 currently at 22 10:00 minutes. It's creating all the database 10:03 tables right 10:04 now. Apply 10:07 changes. Not going to review any of the 10:09 data. I'm just going to say go ahead um 10:12 because I'm speed running this. But uh 10:15 looks good 10:18 hopefully. There we go. It's saying 10:21 changes error build on successful. Try 10:24 to fix 10:26 it. Go. Right. It's done. Let's see if 10:29 we get an error. If it's good. Looks 10:31 like it's good. So, let's check it out. 10:32 Uh, so let's let's sign up here. Let's 10:34 get my name. Matt. Just Oh, exposing my 10:37 email real quick. Um, 1 2 3 1 2 3 1 2 3 10:41 1 2 3. There we go. Sign up. There we 10:43 go. Once you need to say the password. 10:45 Perfect. And then we're going to get 10:46 started with Spanish. Yes. And we're 10:48 going to just go through the lesson and 10:49 see if it saves it when I refresh the 10:50 page. If that's true, then uh Oh, there 10:53 we go. The right Oh that's the 10:55 wrong one. Uh, please see. Yes. No. No. 10:59 There we go. The match numbers is still 11:00 a little bit messed up. We can change 11:01 that later. That's not that important 11:02 for MVP. It's good enough. Continue. Uh, 11:04 Buenos Diaz. Yes. How we doing for time? 11:06 We're at 27 minutes almost. Oh, please 11:09 sign into access page. Ah, damn it. I 11:10 messed up. Um, all right. Ah, continue 11:12 learning. There we go. We can see that 11:13 even when refreshing it saves the 11:15 progress. So, if we continue learning, 11:16 then click the basics. We still have to 11:17 start from the beginning of the lesson, 11:18 but it's the right lesson hopefully. So, 11:19 let's see if we can actually go through 11:21 one lesson 11:23 here. 40 XP. Awesome. Continue. Perfect. 11:27 And if we refresh here, see, we have 11:30 Spanish ADXP. And we can see Perfect. 11:32 Perfect. And if we sign out and then 11:34 sign in again. Sign in. That's not quite 11:38 working, is it? And there we go. Sign 11:39 in. We're going to sign in again. 11:41 And.com. 1 2 3 1 2 3 1 2 3. Sign in. 11:44 Perfect. So, sign in seems to work. And 11:45 then we have uh can we continue to 11:47 learn? Yes, we can. It looks really 11:48 great. So, the last thing we're going to 11:49 do, we're going to try to redesign the 11:50 timeline so it looks more like Duelingo. 11:51 Um keep all functionality the same is is 11:54 the last thing I'm going to add. I don't 11:56 want them to mess with any functionality 11:57 in this current prompt. Right now, we're 11:58 going to rebuild the dashboard of um the 12:00 lessons to more the timeline and see if 12:02 that works. We're going to try to do 12:03 that before we hit the timer. 30 12:04 minutes. Let's see what 12:07 happens. There we go. Seems like it's 12:09 redesigned it. Hopefully, this works. 12:10 So, we kick Spanish. I've kind of 12:12 redesigned it like a timeline, but it's 12:14 not as nice. So, what we're going to 12:15 want to do is basically remove the 12:16 cards. It still kept the cards a little. 12:18 Doesn't look that great, but hey, it's 12:19 it's getting better. It's getting 12:20 better. Last prompt we're going to say 12:21 is center center the 12:25 timeline and make the cards to the left 12:29 describing the lesson look like speech 12:35 bubbles. All right, seems like it's 12:37 done. So, let's check out Spanish again. 12:39 Let's see if it centered the timeline. 12:40 It did. Kind of. The speech bubbles, 12:44 they look a little bit better now. Looks 12:46 more like an application. I don't like 12:49 the 12:51 uh Yeah, I I don't like the current 12:55 design that it has like a scroll bar 12:57 like that. I don't like that at all. But 13:00 we could fix that. But this is probably 13:02 good enough to a Dualingo MVP. This 13:05 looks like the timeline we have looks a 13:08 little bit mobile responsive, so it 13:09 could probably work for mobile phones. 13:11 Let's check. There we go. Look at that. 13:13 Looks smooth. Really, really, really 13:15 smooth. So, that's responsive and nice. 13:17 Let's look how it looks here. Perfect. 13:20 Yeah. And if I sign up and try to sign 13:23 in, get back to the signup page. Can 13:25 login. Log in 13:27 again. And 13:31 m.com. And when one, two, three, one, 13:34 two, 13:35 three. Then we can sign in 13:38 again. Close. Never. And there we go. 13:43 Perfect. Looks good. Very good. All 13:46 right. That is our Dolingo MVP. We built 13:50 it in 33 minutes roughly. Very well 13:53 done. Um just amazing how fast you can 13:56 build things today with lovable AI. Now, 13:59 if I had more time building this, I'd 14:01 probably fix way more bugs, make the 14:03 design even prettier, probably add more 14:04 lessons, and maybe add some more 14:06 features. Now, if you want to build big 14:09 things with Lovable Boy AI, you don't 14:11 want to miss this next video. It 14:13 outlines three key mistakes most 14:15 beginners make when they build a big 14:17 project with Lovable AI. So, click on 14:20 this next video right here, and I'll see 14:22 you