ReactJS + Supabase = Powerful Fullstack WebApp

react-supabase todolist

Subscribe to my newsletter and never miss my upcoming articles

Recently I had come across supabase which claims to be an alternative to Firebase. Being opensource and costing only on the hosting of the Postgres server is really great. You can check out the entire pricing plan here.

Now that we know that they are claiming to be an alternative to such a big product let us check it out. We will build a small todo application with the functionality of CRUD and will explore how this goes and how simple it is.

First start a fresh new react app using: npx create-react-app todo-app

Now move directly to App.js and start building the HTML. You can design your own HTML and styling, as I am just testing supabase I will be going with minimal styling.

Also, don't forget to install supabase using npm install @supabase/supabase-js

Now initialize it using these two lines of code:-

import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database 
const supabase = createClient("https://xyzcompany.supabase.co", "public-anon-key")
  • Now for insertion of any row just use the below lines of code.
const { data, error } = await supabase
  .from('todolist')
  .insert([
    { some_column: 'someValue', other_column: 'otherValue' },
  ])
  • For reading all the data from the DB using this:
let { data: todolist, error } = await supabase
  .from('todolist')
  .select('*')
  • For deleting the data from the DB use this:
const { data, error } = await supabase

  .from('todolist')
  .delete()
  .eq('some_column', 'someValue')
  • And finally for updating use this:-
const { data, error } = await supabase
  .from('todolist')
  .update({ other_column: 'otherValue' })
  .eq('some_column', 'someValue')

And do remember each and every call is asynchronous and has to be in async functions and fetched using useEffect

I am attaching the final code repo which you can refer to!

No Comments Yet