DEV Community: Mahbub Khandakar

Beginner's Guide: Connect React with Supabase (Build a Simple To-Do App) published: true tags: react, supabase, beginners, webdev

Mahbub Khandakar — Wed, 29 Jul 2026 15:36:20 +0000

Beginner's Guide: Connect React with Supabase 🚀

If you already know basic React (components, useState, useEffect), this guide will show you how to connect your React app to Supabase — an open-source Firebase alternative — and build a simple To-Do app with full CRUD (Create, Read, Update, Delete).

Let's go step by step. No prior Supabase knowledge needed.

What is Supabase?

Supabase gives you a Postgres database, authentication, and instant APIs — without writing any backend code. Think of it as a backend-as-a-service.

For this guide, we'll just use the database + auto-generated API part.

Step 1: Create a Supabase Project

Go to supabase.com and sign up (GitHub login is fastest).
Click New Project.
Fill in:
- Name: todo-app (anything you like)
- Database Password: save this somewhere safe
- Region: pick the closest one to you
Click Create new project and wait ~1-2 minutes while Supabase sets everything up.

Step 2: Create the `todos` Table

In your Supabase project dashboard, go to the Table Editor (left sidebar).
Click New Table.
Name it todos.
Add these columns (in addition to the default id and created_at):

Column Name	Type	Default
`task`	`text`	—
`is_complete`	`bool`	`false`

Click Save.

💡 Tip: You can also do this via the SQL Editor by running:

create table todos (
  id bigint generated by default as identity primary key,
  task text not null,
  is_complete boolean default false,
  created_at timestamp with time zone default now()
);

Turn off Row Level Security (for learning purposes only)

Go to Authentication > Policies (or Table Editor > todos > RLS), and disable RLS for now so your students can read/write freely without setting up auth.

⚠️ Important for your session: Tell your juniors this is only for a demo/learning project. In a real production app, RLS should always be enabled with proper policies.

Step 3: Get Your API Keys

Go to Project Settings > API.
Copy two things:
- Project URL (looks like https://xxxxx.supabase.co)
- anon public key (a long string)

You'll need both in your React app.

Step 4: Set Up the React Project

If they already have a React project (Vite recommended), just install the Supabase client:

npm install @supabase/supabase-js

If starting fresh:

npm create vite@latest todo-app -- --template react
cd todo-app
npm install
npm install @supabase/supabase-js

Step 5: Create a Supabase Client File

Create a file src/supabaseClient.js:

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

const supabaseUrl = 'YOUR_PROJECT_URL'
const supabaseAnonKey = 'YOUR_ANON_KEY'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

💡 Best practice: use environment variables instead of hardcoding keys.
Create a .env file:
VITE_SUPABASE_URL=your_project_url
VITE_SUPABASE_ANON_KEY=your_anon_key
Then use:
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
(For a beginner live demo, hardcoding is fine to keep things simple — just mention the .env best practice.)

Step 6: Build the To-Do Component

Replace src/App.jsx with this:

import { useState, useEffect } from 'react'
import { supabase } from './supabaseClient'
import './App.css'

function App() {
  const [todos, setTodos] = useState([])
  const [newTask, setNewTask] = useState('')
  const [loading, setLoading] = useState(true)

  // Fetch todos when component loads
  useEffect(() => {
    fetchTodos()
  }, [])

  async function fetchTodos() {
    setLoading(true)
    const { data, error } = await supabase
      .from('todos')
      .select('*')
      .order('created_at', { ascending: false })

    if (error) console.error('Error fetching todos:', error)
    else setTodos(data)
    setLoading(false)
  }

  async function addTodo(e) {
    e.preventDefault()
    if (!newTask.trim()) return

    const { data, error } = await supabase
      .from('todos')
      .insert([{ task: newTask, is_complete: false }])
      .select()

    if (error) console.error('Error adding todo:', error)
    else {
      setTodos([data[0], ...todos])
      setNewTask('')
    }
  }

  async function toggleComplete(id, currentStatus) {
    const { error } = await supabase
      .from('todos')
      .update({ is_complete: !currentStatus })
      .eq('id', id)

    if (error) console.error('Error updating todo:', error)
    else {
      setTodos(todos.map(t => t.id === id ? { ...t, is_complete: !currentStatus } : t))
    }
  }

  async function deleteTodo(id) {
    const { error } = await supabase
      .from('todos')
      .delete()
      .eq('id', id)

    if (error) console.error('Error deleting todo:', error)
    else setTodos(todos.filter(t => t.id !== id))
  }

  return (
    <div style={{ maxWidth: 500, margin: '40px auto', fontFamily: 'sans-serif' }}>
      <h1>📝 Supabase To-Do App</h1>

      <form onSubmit={addTodo} style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
        <input
          type="text"
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
          placeholder="Add a new task..."
          style={{ flex: 1, padding: 8 }}
        />
        <button type="submit" style={{ padding: '8px 16px' }}>Add</button>
      </form>

      {loading ? (
        <p>Loading...</p>
      ) : (
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {todos.map((todo) => (
            <li
              key={todo.id}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 10,
                padding: 10,
                borderBottom: '1px solid #eee',
              }}
            >
              <input
                type="checkbox"
                checked={todo.is_complete}
                onChange={() => toggleComplete(todo.id, todo.is_complete)}
              />
              <span
                style={{
                  flex: 1,
                  textDecoration: todo.is_complete ? 'line-through' : 'none',
                  color: todo.is_complete ? '#999' : '#000',
                }}
              >
                {todo.task}
              </span>
              <button onClick={() => deleteTodo(todo.id)} style={{ color: 'red' }}>
                Delete
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default App

Step 7: Run It

npm run dev

Open the local URL shown in the terminal — you should be able to add, complete, and delete tasks, and see them saved in your Supabase Table Editor in real time.

Fetching Data in React: A Beginner-Friendly Guide (with `fetch` and `async/await`)

Mahbub Khandakar — Wed, 08 Jul 2026 16:49:44 +0000

If you're learning React, one of the very first "real world" things you'll need to do is fetch data from an API and show it on the screen. In this post, we'll build that up step by step using a free, no-auth-required API: FakeStoreAPI.

By the end, you'll understand:

How fetch() works with .then()
How to rewrite the same logic using async/await
How to fetch data properly inside a React component using useEffect + useState
How to handle loading and error states like a pro

1. The Raw JavaScript Way — `fetch()` with `.then()`

Before React even enters the picture, let's understand plain JavaScript fetch.

fetch('https://fakestoreapi.com/products')
  .then(response => response.json())
  .then(data => console.log(data));

What's happening here?

fetch(url) sends a network request and returns a Promise.
response.json() parses the raw response body into a JavaScript object/array — this also returns a Promise, which is why we chain another .then().
The final .then(data => ...) gives us the actual data (an array of products, in this case).

This works, but once you start adding error handling and multiple steps, .then() chains get messy fast. That's where async/await comes in.

2. The Cleaner Way — `async/await`

async/await is just syntactic sugar over Promises — it makes asynchronous code look synchronous, which is much easier to read.

async function getProducts() {
  try {
    const response = await fetch('https://fakestoreapi.com/products');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Something went wrong:', error);
  }
}

getProducts();

Key points to explain to your juniors:

await can only be used inside a function marked async.
await "pauses" the function until the Promise resolves — no more nested .then() chains.
Always wrap it in try/catch so a failed request (bad internet, server down, 404, etc.) doesn't crash your app silently.

3. Now Let's Do It Inside React

In React, you can't just call fetch directly in the component body — that would run on every render, causing an infinite loop of requests. Instead, we use the useEffect hook to run the fetch once, when the component mounts, and useState to store the result.

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        const response = await fetch('https://fakestoreapi.com/products');

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        setProducts(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchProducts();
  }, []); // empty dependency array = run only once, on mount

  if (loading) return <p>Loading products...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Products</h2>
      <ul>
        {products.map(product => (
          <li key={product.id}>
            <strong>{product.title}</strong> — ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

Why we can't make `useEffect`'s callback itself `async`

A common junior mistake:

// ❌ Don't do this
useEffect(async () => {
  const res = await fetch(...);
}, []);

useEffect expects its callback to either return nothing or a cleanup function. If the callback is async, it implicitly returns a Promise, which React doesn't know how to handle — this triggers a warning and breaks the cleanup mechanism.

That's why we define fetchProducts as a separate async function inside useEffect, and just call it.

4. Breaking Down the Three States: Loading, Error, Success

This is the pattern your juniors will use in almost every real project:

State	Purpose
`loading`	Show a spinner or "Loading..." text while waiting
`error`	Show a friendly error message if the request fails
`data` (here, `products`)	Show the actual UI once data arrives

Encourage them to always think in terms of these three states — it prevents a lot of bugs like showing a blank screen or crashing on undefined.map().

5. Bonus: Fetching a Single Product

Once they're comfortable with the list, show them how to fetch a single item using a dynamic ID:

const fetchSingleProduct = async (id) => {
  const response = await fetch(`https://fakestoreapi.com/products/${id}`);
  const data = await response.json();
  return data;
};

This sets them up nicely for the next lesson: routing + dynamic params (e.g., /products/:id with React Router).

6. Quick Recap for Your Session

fetch() returns a Promise → chain .then() or use await.
async/await + try/catch is cleaner and easier to reason about.
In React, always fetch inside useEffect, never directly in the component body.
Keep the async function separate — don't make the useEffect callback itself async.
Always handle loading and error states, not just the success case.

Written while prepping to teach this exact flow to junior developers — feel free to steal this structure for your own session!