Tạo Ứng Dụng Quản Lý Dự Án Với Supabase Và Tailwind CSS

Tại sao nên chọn Supabase và Tailwind CSS cho ứng dụng quản lý dự án?

Trong bối cảnh các nhóm làm việc ngày càng phân tán, một ứng dụng quản lý dự án nội bộ trở thành công cụ không thể thiếu. Việc tự xây dựng một hệ thống như vậy trước đây thường đòi hỏi nhiều công đoạn phức tạp: thiết lập backend, cấu hình database, viết API, rồi mới đến frontend. Tuy nhiên, với sự xuất hiện của Supabase và Tailwind CSS, quy trình này đã trở nên đơn giản hơn rất nhiều.

Supabase cung cấp backend sẵn sàng với database PostgreSQL, authentication, real-time, và storage chỉ trong vài cú click. Tailwind CSS giúp thiết kế giao diện nhanh chóng nhờ hệ thống class utilities. Kết hợp cả hai, bạn có thể tập trung vào logic nghiệp vụ thay vì mất thời gian setup cơ sở hạ tầng.

Thiết lập dự án và cấu hình Supabase

Để bắt đầu, bạn cần tạo một project mới trên Supabase Dashboard. Sau khi đăng nhập, chọn "New Project", đặt tên, chọn region, rồi tạo. Khi project được khởi tạo, lưu lại URL và public anon key — chúng sẽ được dùng để kết nối từ frontend.

Tiếp theo, tạo các table cần thiết cho ứng dụng quản lý dự án. Ví dụ:

- projects: id, name, description, status, created_at - tasks: id, project_id, title, description, status, due_date - users: id, email, name

Bạn có thể dùng SQL Editor trong Supabase để chạy các lệnh tạo table. Đừng quên thiết lập foreign key giữa tasks.project_id và projects.id để đảm bảo tính toàn vẹn dữ liệu.

Xây dựng frontend với React và Tailwind CSS

Khởi tạo một dự án React mới:

npx create-react-app project-management-app
cd project-management-app
npm install @supabase/supabase-js tailwindcss

Chạy lệnh npx tailwindcss init để tạo file config, sau đó thêm @tailwind base;, @tailwind components;, @tailwind utilities; vào src/index.css.

Tạo một file src/supabase.js để khởi tạo client:

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

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY


export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Authentication và bảo mật

Supabase cung cấp sẵn authentication UI components, nhưng bạn cũng có thể tự xây dựng form đăng ký và đăng nhập. Ví dụ:

import { supabase } from './supabase'

const handleSignUp = async (email, password) => {
  const { data, error } = await supabase.auth.signUp({ email, password })
  if (error) console.log(error)
}

Để bảo mật dữ liệu, chỉ cho phép user truy cập vào project của chính họ bằng Row Level Security (RLS). Trong Supabase, kích hoạt RLS cho table projects, rồi thêm policy:

CREATE POLICY "Users can view own projects" ON projects
  FOR SELECT USING (auth.uid() = user_id);

Hiển thị và quản lý projects

Tạo component ProjectsList.jsx để fetch và hiển thị danh sách project:

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

export default function ProjectsList() {
  const [projects, setProjects] = useState([])


useEffect(() => {
    fetchProjects()
    const subscription = supabase
      .from('projects')
      .on('INSERT', fetchProjects)
      .subscribe()
    return () => subscription.unsubscribe()
  }, [])


const fetchProjects = async () => {
    const { data, error } = await supabase
      .from('projects')
      .select('*')
    if (data) setProjects(data)
  }


return (
    <div className="space-y-4">
      {projects.map(project => (
        <div key={project.id} className="border p-4">
          <h3 className="font-semibold">{project.name}</h3>
          <p>{project.description}</p>
        </div>
      ))}
    </div>
  )
}

Quản lý tasks trong project

Tương tự, tạo component TasksList.jsx với filter theo project:

const fetchTasks = async (projectId) => {
  const { data } = await supabase
    .from('tasks')
    .select('*')
    .eq('project_id', projectId)
  return data || []
}

Sử dụng real-time subscription để tự động cập nhật khi có task mới.

Styling với Tailwind CSS

Tailwind CSS giúp bạn thiết kế nhanh nhờ các utility classes. Ví dụ, tạo button và form:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
  Thêm task
</button>

<input class="border w-full p-2 rounded focus:border-blue-500" placeholder="Tiêu đề task" />

Bạn cũng có thể tạo component với @apply trong file CSS riêng để tránh lặp code.

Kết luận

Việc kết hợp Supabase và Tailwind CSS giúp rút ngắn đáng kể thời gian phát triển ứng dụng quản lý dự án. Supabase lo backend, authentication, real-time, còn Tailwind CSS lo phần nhìn. Kết quả là một hệ thống hoàn chỉnh, bảo mật, và dễ mở rộng.

Dù có nhiều công cụ low-code khác, việc tự xây dựng vẫn mang lại sự linh hoạt và kiểm soát tốt hơn. Hãy bắt đầu từ những feature nhỏ, sau đó mở rộng dần theo nhu cầu thực tế của nhóm.