Xây dựng ứng dụng quản lý dự án với Supabase và Tailwind CSS

Giới thiệu

Trong bối cảnh làm việc từ xa và quản lý công việc ngày càng phổ biến, việc có một công cụ quản lý dự án hiệu quả là điều cần thiết. Supabase - một nền tảng backend mã nguồn mở - kết hợp với Tailwind CSS - một framework CSS hiện đại - tạo thành bộ đôi mạnh mẽ để xây dựng ứng dụng quản lý dự án nhanh chóng và linh hoạt. Bài viết này sẽ hướng dẫn từng bước để tạo ra một ứng dụng quản lý dự án hoàn chỉnh, từ thiết lập cơ sở dữ liệu đến giao diện trực quan.

Chuẩn bị môi trường

Trước khi bắt đầu, cần đảm bảo đã cài đặt Node.js và npm trên máy. Tiếp theo, tạo một dự án mới với lệnh npx create-next-app@latest project-manager và chọn các tùy chọn phù hợp. Sau khi dự án được khởi tạo, thêm Supabase và Tailwind CSS vào dự án bằng cách chạy npm install @supabase/supabase-js tailwindcss và cấu hình Tailwind CSS theo tài liệu chính thức.

Thiết lập Supabase

Truy cập vào dashboard của Supabase, tạo một project mới và lưu lại URL cùng key API. Trong dự án Next.js, tạo một file lib/supabase.js để khởi tạo client:

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

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;


export const supabase = createClient(supabaseUrl, supabaseKey);

Thiết lập bảng trong Supabase: một bảng projects với các cột id, name, description, status, created_at, và một bảng tasks với id, project_id, title, status, due_date. Sử dụng SQL hoặc GUI của Supabase để tạo các bảng này.

Xây dựng giao diện với Tailwind CSS

Tạo layout chính với header, sidebar, và content area. Sử dụng các utility class của Tailwind để styling nhanh chóng:

<header className="bg-blue-600 text-white p-4 shadow-lg">
  <h1 className="text-2xl font-bold">Project Manager</h1>
</header>

<aside className="w-64 bg-gray-100 p-4">
  <h2 className="text-lg font-semibold mb-4">Projects</h2>
  <!-- Danh sách dự án -->
</aside>


<main className="flex-1 p-6">
  <!-- Nội dung chính -->
</main>

Tích hợp dữ liệu từ Supabase

Sử dụng React hooks để fetch dữ liệu từ Supabase. Ví dụ, để lấy danh sách dự án:

import { useState, useEffect } from 'react';
import { supabase } from '@/lib/supabase';

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


useEffect(() => {
    fetchProjects();
  }, []);


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


return (
    <div>
      {projects.map(project => (
        <div key={project.id} className="border p-4 mb-3">
          <h3 className="text-xl font-semibold">{project.name}</h3>
          <p>{project.description}</p>
        </div>
      ))}
    </div>
  );
}

Quản lý trạng thái và tương tác

Thêm khả năng tạo, cập nhật, xóa dự án và task. Ví dụ, hàm tạo dự án mới:

const createProject = async (name, description) => {
  const { data, error } = await supabase
    .from('projects')
    .insert([{ name, description, status: 'active' }])
    .select()
    .single();
  if (error) console.error(error);
  else setProjects([...projects, data]);
};

Nâng cao trải nghiệm người dùng

Sử dụng Tailwind CSS để thêm hiệu ứng hover, transition, và responsive. Ví dụ, tạo button với hiệu ứng:

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
  Thêm dự án
</button>

Kết luận

Với Supabase và Tailwind CSS, việc xây dựng một ứng dụng quản lý dự án trở nên đơn giản và nhanh chóng hơn bao giờ hết. Supabase cung cấp backend mạnh mẽ với real-time và authentication, trong khi Tailwind CSS giúp styling nhanh chóng và linh hoạt. Bằng cách kết hợp hai công cụ này, bạn có thể tập trung vào logic nghiệp vụ và trải nghiệm người dùng, thay vì lo lắng về cơ sở hạ tầng và styling phức tạp. Hãy bắt đầu xây dựng ứng dụng của riêng bạn ngay hôm nay!