How to use supabase + ReactJS?

What is Supabase and how it is better than Firebase?

Supabase is an open source alternative to Firebase. Both the platforms offer all the functionalities to create our app from scratch without downloading any extra tools including - Database, Authentication, Edge functions, Storage, Real time and Vectors.

1. Unlike Firebase, Supabase is open source.
2. In terms of performance, supabase is up to 4x faster than Firebase.
3. Supabase is really great for your project if it's in early stage of heavy development since, it charges on basis of the amount of data stored.

Create React project

You can create a react app using Vite using the command - npm create vite@latest or npm create vite@latest ./ to create your project in your existing directory.

How to install Supabase?

Now that we've initialized up our React app, we need to install supabase - npm install @supabase/supabase-js

How to connect Supabase with your React app?

Now, that we've installed supabase and initialized our app, we need to connect supabase with react.

If you don't have an account, sign up for free here.
Now, in the src/lib/supabase/api.ts directory, copy the following code snippet to connect your react app with supabase:

import { createClient } form "@supabase/supabase-js"

export const supabase = createClient("(https://<project>.supabase.co) Your project URL", "(<your-anon-key>) Your API key")

What next?

Now that you've finished setting up your react app and successfully connected it with supabase, you can go ahead and read the supabase docs and easily create your project.

Thank you for reading! I hope that you found this article useful. If you've any questions or suggestions please feel free to share those in comments, would love to hear from you 😀
Happy Coding!!