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

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

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)

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.