WEBVTT 00:02.000 --> 00:05.240 Currently our application is just a front end. 00:05.800 --> 00:11.560 The information we see right now on the screen is hardcoded, and even if this functionality is currently 00:11.560 --> 00:15.120 broken, we cannot add a card or we cannot move a card from anywhere. 00:15.640 --> 00:20.840 Even if we would do this through the UI, the information still needs to be stored somewhere. 00:20.840 --> 00:23.280 And for that we need to have a backend. 00:23.680 --> 00:27.120 But building a backend is actually quite complex. 00:28.120 --> 00:34.360 Supabase is a tool that helps us build apps faster by providing practically everything we need for a 00:34.360 --> 00:34.920 backend. 00:35.160 --> 00:40.720 So if you take a look here under product, we're going to see here that Supabase has many, many modules, 00:40.720 --> 00:42.920 including a database for storing data. 00:43.520 --> 00:49.080 It can also help us with authentication by providing user login features so that people can sign up 00:49.080 --> 00:55.520 and sign in into our application APIs, so that our applications frontend can communicate with the backend 00:55.520 --> 01:03.500 and dynamically get and send data storage for images or files, but also computation if needed. 01:03.500 --> 01:06.740 So there are a lot of things that Supabase can do for us. 01:06.740 --> 01:12.700 But right now we only need a database to store the cards that you see right here on the screen. 01:13.460 --> 01:18.740 And lovable luckily provides a direct integration with Supabase. 01:18.900 --> 01:22.780 So if we go here from the menu, you're going to see here this icon. 01:22.780 --> 01:24.340 But this is also available here. 01:24.340 --> 01:28.620 If we go to the project settings we're going to see here Supabase. 01:28.620 --> 01:29.940 So two options here. 01:30.220 --> 01:34.380 And probably the most important one is this one where it says here connect. 01:34.380 --> 01:38.060 So whatever option you decide to use it's pretty much the same thing. 01:38.500 --> 01:41.380 So we need to connect lovable with our Supabase account. 01:41.380 --> 01:43.700 So I'm going to go ahead and click on this. 01:43.980 --> 01:46.580 Sometimes these integrations are a bit tricky. 01:47.140 --> 01:51.500 So I wouldn't be surprised if you're getting any errors throughout this process. 01:51.500 --> 01:57.140 But if anything happens, I'm available in the Q&A or send me directly a message and I'll do my best 01:57.140 --> 01:58.340 to help you out. 01:58.380 --> 02:01.300 Now, first of all, you already need to be logged in into Supabase. 02:01.500 --> 02:08.040 So then if you click on this link, you're going to get here this window telling you, hey, lovable 02:08.080 --> 02:11.680 needs access to super bass in a nutshell. 02:11.960 --> 02:14.560 And currently I also have here an organization. 02:14.560 --> 02:16.320 It's the only organization that I have. 02:16.720 --> 02:19.160 So I'm going to authorize lovable. 02:20.440 --> 02:26.520 We're getting a message telling us that this has been set up correctly, but this is actually not everything. 02:27.200 --> 02:30.000 We also now need to create a new project. 02:30.000 --> 02:32.560 So I'm going to go ahead here, create a new project. 02:33.120 --> 02:35.400 And I'm going to call it board. 02:36.480 --> 02:38.600 And we also need a database password. 02:38.600 --> 02:41.320 And I'm going to select here generate a password. 02:42.400 --> 02:45.920 And I'm going to click here on create a New project. 02:47.520 --> 02:50.760 Now this project has been created here inside Supabase. 02:50.760 --> 02:53.040 We also need to check here inside Lovable. 02:53.640 --> 02:58.520 Going to see here the project board appearing because that's the name of the project. 02:58.840 --> 03:03.360 Now we need to click here on connect and again on connect. 03:04.000 --> 03:07.060 And now what we should get here is connected. 03:07.060 --> 03:09.860 So these are all very important steps. 03:09.900 --> 03:13.340 If you skip any of them you're gonna have issues later on. 03:13.340 --> 03:17.900 So be sure that you're following exactly what I did on the screen. 03:18.300 --> 03:21.380 So now we are connected to Supabase. 03:21.380 --> 03:23.180 We can go ahead and close this. 03:23.700 --> 03:28.260 There is a possibility that we're going to get here directly a prompt. 03:28.500 --> 03:33.660 So we're going to see here on the left hand side there is some additional information which I highly 03:33.660 --> 03:39.180 recommend that you carefully review to understand exactly what has happened. 03:40.140 --> 03:45.700 So it's going to tell you that you can now work with a fully featured backend and add powerful features. 03:46.220 --> 03:50.820 Sometimes it's even going to try to directly connect to Supabase. 03:50.820 --> 03:56.220 So enable through one of the predefined prompts and integration to Supabase. 03:56.260 --> 04:02.940 It hasn't happened yet, but just wanted to be aware that what you're getting back is not always the 04:02.940 --> 04:03.740 same thing. 04:03.740 --> 04:06.980 So be mindful of the steps that have been described here.