Tạo Ứng Dụng Todo List Với Supabase Và React Trong 10 Phút

Giới thiệu

Trong thế giới phát triển ứng dụng web hiện đại, việc quản lý công việc cá nhân hay nhóm trở nên ngày càng quan trọng. Một ứng dụng todo list đơn giản nhưng hiệu quả có thể giúp chúng ta tổ chức công việc tốt hơn. Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một ứng dụng todo list hoàn chỉnh sử dụng Supabase làm backend và React làm frontend. Supabase cung cấp cơ sở dữ liệu PostgreSQL, xác thực người dùng và nhiều tính năng khác một cách dễ dàng, giúp chúng ta tập trung vào logic ứng dụng thay vì lo lắng về cơ sở hạ tầng.

Tại sao chọn Supabase và React?

React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng, nổi tiếng với khả năng tạo ra các ứng dụng single-page application (SPA) nhanh chóng và linh hoạt. Kết hợp với Supabase, chúng ta có một stack hoàn chỉnh từ frontend đến backend mà không cần phải quản lý server riêng biệt.

Supabase cung cấp: - Cơ sở dữ liệu PostgreSQL với Realtime subscriptions - Xác thực người dùng tích hợp sẵn - Storage cho file upload - Row Level Security (RLS) để bảo mật dữ liệu

Điều này giúp chúng ta xây dựng ứng dụng todo list với khả năng xác thực, lưu trữ dữ liệu và đồng bộ thời gian thực chỉ trong vài bước đơn giản.

Thiết lập dự án

Cài đặt Supabase

Để bắt đầu, chúng ta cần tạo một project mới trên Supabase: 1. Đăng nhập vào dashboard của Supabase 2. Tạo một project mới với tên bất kỳ 3. Lưu lại URL và public anon key để sử dụng trong ứng dụng React

Sau khi project được tạo, chúng ta cần thiết lập bảng dữ liệu cho todo list. Supabase cung cấp SQL editor để chạy các câu lệnh SQL trực tiếp:

CREATE TABLE todos (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  is_completed BOOLEAN DEFAULT false,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  user_id UUID REFERENCES auth.users ON DELETE CASCADE
);

-- Tạo row level security policy
ALTER TABLE todos ENABLE ROW LEVEL SECURITY;


-- Chỉ cho phép user truy cập vào dữ liệu của chính họ
CREATE POLICY "Users can only access their own todos." ON todos
  FOR ALL WITH CHECK (auth.uid() = user_id);


-- Cho phép user đọc dữ liệu của chính họ
CREATE POLICY "Users can view their own todos." ON todos
  FOR SELECT USING (auth.uid() = user_id);


-- Cho phép user tạo todo mới
CREATE POLICY "Users can insert their own todos." ON todos
  FOR INSERT WITH CHECK (auth.uid() = user_id);

Khởi tạo dự án React

Tiếp theo, chúng ta khởi tạo một dự án React mới:

npx create-react-app todo-app
cd todo-app

Cài đặt các dependencies cần thiết:

npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared

Xây dựng ứng dụng

Thiết lập kết nối Supabase

Tạo một file supabaseClient.js để quản lý kết nối:

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

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';


export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Xác thực người dùng

Thêm xác thực vào App.js:

import { useState } from 'react';
import { Auth, createAuthProvider } from '@supabase/auth-ui-react';
import { Theme } from '@supabase/auth-ui-shared';
import { supabase } from './supabaseClient';

function App() {
  const [session, setSession] = useState(null);


const authProvider = createAuthProvider({
    authOptions: {
      supabase: {
        supabaseUrl: supabase.url,
        supabaseKey: supabase.anonKey,
      },
    },
  });


return (
    <Auth
      provider={authProvider}
      theme={Theme}
      supabaseClient={supabase}
      onAuthStateChange={(event, session) => {
        setSession(session);
      }}
    />
  );
}


export default App;

Hiển thị danh sách todo

Tạo component TodoList.js:

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

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');


useEffect(() => {
    fetchTodos();


// Subscribe to realtime changes
    const subscription = supabase
      .from('todos')
      .on('*', (payload) => fetchTodos())
      .subscribe();


return () => supabase.removeSubscription(subscription);
  }, []);


async function fetchTodos() {
    const user = supabase.auth.user();
    const { data, error } = await supabase
      .from('todos')
      .select('*')
      .eq('user_id', user.id);


if (error) console.error(error);
    else setTodos(data);
  }


async function addTodo() {
    const user = supabase.auth.user();
    const { error } = await supabase
      .from('todos')
      .insert([
        {
          title: newTodo,
          user_id: user.id,
        },
      ]);


if (error) console.error(error);
    else setNewTodo('');
  }


return (
    <div>
      <h2>Danh sách công việc</h2>
      <input
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
        placeholder="Thêm công việc mới..."
      />
      <button onClick={addTodo}>Thêm</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input
              type="checkbox"
              checked={todo.is_completed}
              onChange={async () => {
                await supabase
                  .from('todos')
                  .update({ is_completed: !todo.is_completed })
                  .eq('id', todo.id);
              }}
            />
            <span style={{ textDecoration: todo.is_completed ? 'line-through' : 'none' }}>
              {todo.title}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}


export default TodoList;

Nâng cao tính năng

Cập nhật và xóa todo

Bạn có thể mở rộng component bằng các chức năng cập nhật và xóa:

async function updateTodo(id, updates) {
  await supabase
    .from('todos')
    .update(updates)
    .eq('id', id);
}

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

Filter và search

Thêm khả năng lọc công việc hoàn thành hoặc chưa hoàn thành:

const [filter, setFilter] = useState('all');

const filteredTodos = todos.filter(todo => {
  if (filter === 'completed') return todo.is_completed;
  if (filter === 'active') return !todo.is_completed;
  return true;
});

Kết luận

Qua bài viết này, chúng ta đã cùng nhau xây dựng một ứng dụng todo list hoàn chỉnh sử dụng Supabase và React. Với Supabase, chúng ta có được một backend mạnh mẽ với cơ sở dữ liệu, xác thực và realtime subscriptions chỉ trong vài bước đơn giản. React giúp chúng ta tạo ra giao diện người dùng linh hoạt và tương tác.

Điểm mạnh của stack này là khả năng mở rộng - bạn có thể dễ dàng thêm nhiều tính năng hơn như chia sẻ todo với người khác, tạo dự án, hoặc tích hợp với các dịch vụ bên thứ ba. Supabase cũng cung cấp các công cụ quản trị và monitoring giúp bạn theo dõi hiệu năng ứng dụng.

Hy vọng bài viết này đã cung cấp cho bạn cái nhìn tổng quan về cách xây dựng ứng dụng todo list với Supabase và React. Chúc bạn thành công với dự án của mình!