Currently our application is just a front end.
The information we see right now on the screen is hardcoded, and even if this functionality is currently
broken, we cannot add a card or we cannot move a card from anywhere.
Even if we would do this through the UI, the information still needs to be stored somewhere.
And for that we need to have a backend.
But building a backend is actually quite complex.
Supabase is a tool that helps us build apps faster by providing practically everything we need for a
backend.
So if you take a look here under product, we're going to see here that Supabase has many, many modules,
including a database for storing data.
It can also help us with authentication by providing user login features so that people can sign up
and sign in into our application APIs, so that our applications frontend can communicate with the backend
and dynamically get and send data storage for images or files, but also computation if needed.
So there are a lot of things that Supabase can do for us.
But right now we only need a database to store the cards that you see right here on the screen.
And lovable luckily provides a direct integration with Supabase.
So if we go here from the menu, you're going to see here this icon.
But this is also available here.
If we go to the project settings we're going to see here Supabase.
So two options here.
And probably the most important one is this one where it says here connect.
So whatever option you decide to use it's pretty much the same thing.
So we need to connect lovable with our Supabase account.
So I'm going to go ahead and click on this.
Sometimes these integrations are a bit tricky.
So I wouldn't be surprised if you're getting any errors throughout this process.
But if anything happens, I'm available in the Q&A or send me directly a message and I'll do my best
to help you out.
Now, first of all, you already need to be logged in into Supabase.
So then if you click on this link, you're going to get here this window telling you, hey, lovable
needs access to super bass in a nutshell.
And currently I also have here an organization.
It's the only organization that I have.
So I'm going to authorize lovable.
We're getting a message telling us that this has been set up correctly, but this is actually not everything.
We also now need to create a new project.
So I'm going to go ahead here, create a new project.
And I'm going to call it board.
And we also need a database password.
And I'm going to select here generate a password.
And I'm going to click here on create a New project.
Now this project has been created here inside Supabase.
We also need to check here inside Lovable.
Going to see here the project board appearing because that's the name of the project.
Now we need to click here on connect and again on connect.
And now what we should get here is connected.
So these are all very important steps.
If you skip any of them you're gonna have issues later on.
So be sure that you're following exactly what I did on the screen.
So now we are connected to Supabase.
We can go ahead and close this.
There is a possibility that we're going to get here directly a prompt.
So we're going to see here on the left hand side there is some additional information which I highly
recommend that you carefully review to understand exactly what has happened.
So it's going to tell you that you can now work with a fully featured backend and add powerful features.
Sometimes it's even going to try to directly connect to Supabase.
So enable through one of the predefined prompts and integration to Supabase.
It hasn't happened yet, but just wanted to be aware that what you're getting back is not always the
same thing.
So be mindful of the steps that have been described here.