Tạo Ứng Dụng CRM Trong 30 Phút Với Supabase

-- Cho phép người dùng xem, thêm, sửa, xóa customer của chính họ
(
  auth.uid()::text = 'authenticated' AND
  customer_id = auth.uid()
)

npx create-react-app crm-app
cd crm-app

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

Tạo file src/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)

Bước 5: Xây dựng giao diện chính

Tạo component src/App.js:

import { useState, useEffect } from 'react'
import { supabase } from './supabaseClient'
import { Button, Input, Table, Badge, Avatar, Card, Spacer } from '@supabase/ui'

function App() {
  const [session, setSession] = useState(null)
  const [customers, setCustomers] = useState([])
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
      if (session?.user) {
        supabase
          .from('customers')
          .select('*')
          .then(({ data }) => setCustomers(data))
      }
    })
    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  }, [])

const addCustomer = async () => {
    if (session?.user) {
      const { data, error } = await supabase
        .from('customers')
        .insert([
          {
            name,
            email,
            created_by: session.user.id
          }
        ])
      if (data) {
        setCustomers([...customers, data[0]])
        setName('')
        setEmail('')
      }
    }
  }

return (
    <div style={{ padding: '2rem' }}>
      <h1>CRM Dashboard</h1>
      {!session?.user ? (
        <Button onClick={() => supabase.auth.signInWithOAuth('google')}>
          Sign in with Google
        </Button>
      ) : (
        <>
          <h2>Customers</h2>
          <div style={{ display: 'flex', gap: '1rem', marginBottom: '1rem' }}>
            <Input
              placeholder="Customer name"
              value={name}
              onChange={(e) => setName(e.target.value)}
            />
            <Input
              placeholder="Email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Button onClick={addCustomer}>Add Customer</Button>
          </div>
          <Table>
            <Table.Head>
              <Table.Row>
                <Table.Cell>Name</Table.Cell>
                <Table.Cell>Email</Table.Cell>
                <Table.Cell>Actions</Table.Cell>
              </Table.Row>
            </Table.Head>
            <Table.Body>
              {customers.map((c) => (
                <Table.Row key={c.id}>
                  <Table.Cell>
                    <Avatar size="small" />
                    <span style={{ marginLeft: '0.5rem' }}>{c.name}</span>
                  </Table.Cell>
                  <Table.Cell>{c.email}</Table.Cell>
                  <Table.Cell>
                    <Button size="small">View</Button>
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
          </Table>
        </>
      )}
    </div>
  )
}

export default App

Bước 6: Deploy nhanh với Vercel hoặc Netlify

Với Vercel:

npm install -g vercel
vercel

Chọn thư mục project, kết nối với Git repo, và Vercel sẽ tự động build và deploy.

Kết luận

Chỉ trong 30 phút, bạn đã có một ứng dụng CRM hoàn chỉnh với khả năng đăng nhập, quản lý khách hàng, và bảo mật dữ liệu nhờ Supabase. Điểm mạnh của cách tiếp cận này là tốc độ, bảo mật tích hợp sẵn, và khả năng mở rộng khi nhu cầu tăng.

Bạn có thể nâng cấp thêm bằng cách thêm dashboard analytics, email notifications, hoặc mobile app. Supabase cũng hỗ trợ storage cho file đính kèm, functions cho automation, và real-time subscription cho cập nhật tức thì.

Nếu bạn muốn xem demo hoặc source code đầy đủ, hãy để lại bình luận. Chúc bạn coding vui vẻ!