Let's make a user management App with supabase with react.

1. Create a Project in Supabase, and collect projectUrl, and API-key

const supabaseUrl = "https://somethinggdylxxxgznqjjjjxmzkkjhkhsdkjfhksjfheujocza.supabase.co"
const supabaseKey = "somekeyeyJhbGcWWWiOiJIUHHHHzI1NiIsInR5cCI6IkpXVCPPPJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImdkeWxnem5xanhtemtldWpvY3phIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTQyOTg5MDUsImV4cCI6MjAyOTg3NDkwNX0.u5HYGlIvJy3ZOUODflwFM0ZqP_bVWVm1WkJxqcAnt3c"

2. Create a React app with your choice, let's take Vite at the moment

    npm creae vite@latest TodoApp
    give-projectName    --optional
    choose-Freamwork    --React
    choose-language     --Javascript or yourchoice
   

3. setting up Supabase client in the React app

    // under src Folder
    create createClient.js File
    import {createClient} from "@supabase/supabase-js"
    const supabaseUrl = "useyourProjectUrl"
    const supabaseKey = "api-key"
    export const supabase = createClient(supabaseUrl, supabaseKey)
   

4. Now, use the Supabase Client and start working on it

    import { useState,useEffect } from 'react'
    import { supabase } from './createClient'
   
    function App() {
          const [users, setUsers] = useState([])
   
          // calling useEffect, whenever users changes
          useEffect(()=>{
            fetchUsers()
            const value= setTimeout(()=>{
                   // calling fetchUsers , in every 2 seccond
                  fetchUsers()
            },2000)
            return () => {
              clearInterval(value)
            }
          },[users])
   
        //  Fetching all Data
        async function fetchUsers(){
            const {data} =await supabase.from("usres").select("*")
            setUsers(data)
        }  
    return (
         <table className="border-collapse border border-slate-500  m-6 " >
            <thead>
              <tr >
                <th className="border border-slate-600">ID</th>
                <th className="border border-slate-600">Name</th>
                <th className="border border-slate-600">Age</th>
              </tr>
            </thead>
   
          <tbody>
              {users.map((eachUser)=> 
                <tr key={eachUser.id}>
                  <td className="border border-slate-700">{eachUser.id}</td>
                  <td className="border border-slate-700">{eachUser.name}</td>
                  <td className="border border-slate-700">{eachUser.age}</td>
                </tr>
              )
   
              }
   
          </tbody>
        </table>
        </div>
      )
    }
   
     export default App
   

5. This is how you can fetch the data from the Supabase

     async function fetchUsers(){
            const {data} =await supabase.from("usres").select("*")
            setUsers(data)
      }
   

6. Create a User in Supabase

   ```javascript

   Create User
   // handleinput changes function handleChange(event){ setUser(prevformData=>{ return { ...prevformData,

} }) }

// on submit, call the addUser async function addUser(){ const { data } = await supabase.from('usres').insert({ name:user.fullname,age:user.age })

if(data){ alert("Failed"); }else{ alert("User Added successfully"); }

} ```

Note: I Didn't applied the try catch method, this article just to demonstrate the connection between Supabase and React .

Thank you! Visit Us