Xây dựng CMS với Supabase và React trong 7 bước đơn giản

npx create-react-app cms-supabase
cd cms-supabase

npm install @supabase/supabase-js

alter table posts enable row level security;

Sau đó, tạo các policy để chỉ cho phép tác giả xem/sửa/xóa bài viết của mình:

create policy "Users can view own posts" on posts
  for select using (auth.uid() = user_id);

create policy "Users can insert own posts" on posts
  for insert with check (auth.uid() = user_id);

create policy "Users can update own posts" on posts
  for update using (auth.uid() = user_id);

create policy "Users can delete own posts" on posts
  for delete using (auth.uid() = user_id);

Xây dựng frontend với React

Khởi tạo kết nối Supabase trong một file riêng, ví dụ supabaseClient.js:

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);

Tạo một component đơn giản để đăng nhập:

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

function Auth() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

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

return (
    <div>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleSignIn}>Đăng nhập</button>
    </div>
  );
}

Để quản lý bài viết, bạn có thể tạo một component PostManager để hiển thị danh sách và thêm/sửa/xóa:

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

function PostManager() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

useEffect(() => {
    fetchPosts();
    const subscription = supabase
      .from('posts')
      .on('*', () => fetchPosts())
      .subscribe();
    return () => supabase.removeSubscription(subscription);
  }, []);

const fetchPosts = async () => {
    let { data: posts, error } = await supabase
      .from('posts')
      .select('*');
    if (error) console.error(error);
    else setPosts(posts);
  };

const createPost = async () => {
    const { error } = await supabase
      .from('posts')
      .insert([{ title, content, user_id: supabase.auth.user().id }]);
    if (error) console.error(error);
  };

return (
    <div>
      <h2>Quản lý bài viết</h2>
      <input value={title} onChange={e => setTitle(e.target.value)} />
      <textarea value={content} onChange={e => setContent(e.target.value)} />
      <button onClick={createPost}>Thêm bài viết</button>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

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

Để cải thiện trải nghiệm, bạn có thể thêm tính năng tìm kiếm, phân trang, và upload hình ảnh vào bài viết. Supabase Storage sẽ hỗ trợ bạn lưu trữ file một cách an toàn. Ví dụ, upload hình ảnh:

const uploadImage = async (file) => {
  const fileExt = file.name.split('.').pop();
  const fileName = ${Math.random()}.${fileExt};
  const filePath = ${supabase.auth.user().id}/${fileName};

const { data, error } = await supabase.storage
    .from('images')
    .upload(filePath, file);

return data;
};

Kết luận

Việc xây dựng một CMS với Supabase và React không chỉ giúp bạn tiết kiệm thời gian phát triển, mà còn đảm bảo tính bảo mật và khả năng mở rộng cho dự án. Supabase với PostgreSQL mạnh mẽ, kết hợp cùng sự linh hoạt của React, tạo nên một giải pháp toàn diện cho nhu cầu quản lý nội dung hiện đại. Hãy bắt tay vào thực hành và tùy biến theo nhu cầu của riêng bạn, để tạo ra một CMS phù hợp nhất với dự án của mình.