Giải pháp thay thế Trello mã nguồn mở, nhẹ, dành cho makers và indie hackers.
Tập trung vào sự đơn giản, tốc độ và khả năng mở rộng. Được xây dựng với công nghệ hiện đại: Tailwind CSS, shadcn/ui, Supabase, tích hợp Stripe. Hỗ trợ không giới hạn dự án, cộng tác nhóm, chế độ tối/sáng, và trải nghiệm người dùng mượt mà. Hoàn hảo cho các lập trình viên cá nhân và nhóm nhỏ muốn kiểm soát hoàn toàn mà không phức tạp không cần thiết.
🌟 Nếu bạn thấy dự án này hữu ích, hãy cho nó một sao! Điều này giúp người khác cũng khám phá ra nó.
Hướng Dẫn Triển Khai
Tổng Quan
Ứng dụng này hiện sử dụng các route API cục bộ của Next.js thay vì Supabase Edge Functions cho tích hợp Stripe. Điều này giúp việc triển khai dễ dàng hơn và cho phép bạn sử dụng các file .env tiêu chuẩn để cấu hình.Thiết Lập Biến Môi Trường
1. Tạo file .env.local
Sao chép.env.example thành .env.local và điền các giá trị thực tế của bạn:cp .env.example .env.local2. Biến Môi Trường Bắt Buộc
#### Cấu Hình Supabase
NEXT_PUBLIC_SUPABASE_URL- URL dự án Supabase của bạnNEXT_PUBLIC_SUPABASE_ANON_KEY- Khóa ẩn danh của SupabaseSUPABASE_SERVICE_ROLE_KEY- Khóa vai trò dịch vụ của Supabase (chỉ sử dụng phía máy chủ)
STRIPE_SECRET_KEY- Khóa bí mật Stripe của bạn (chỉ sử dụng phía máy chủ)NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY- Khóa công khai Stripe của bạnSTRIPE_WEBHOOK_SECRET- Khóa webhook Stripe của bạn
NEXT_PUBLIC_SITE_URL- URL trang web của bạn (cho môi trường production)NEXTAUTH_URL- URL trang web của bạn (giống như trên)NEXTAUTH_SECRET- Một chuỗi bí mật ngẫu nhiên cho NextAuth
Phát Triển Cục Bộ
- Cài đặt các phụ thuộc:
npm install- Thiết lập các biến môi trường của bạn trong
.env.local - Khởi động máy chủ phát triển:
npm run dev- Kiểm tra webhook của Stripe cục bộ bằng Stripe CLI:
stripe listen --forward-to localhost:3000/api/stripe/webhookTriển khai sản xuất
Triển khai trên Vercel
- Triển khai lên Vercel:
npx vercel
- Biến Môi Trường:
- Thiết Lập Stripe Webhook:
- Trỏ webhook đến:
https://your-domain.vercel.app/api/stripe/webhook
Các Đầu Mối API
Ứng dụng hiện sử dụng các tuyến API cục bộ sau:
POST /api/stripe/checkout- Tạo phiên thanh toán StripePOST /api/stripe/webhook- Xử lý các sự kiện webhook Stripe
Lợi Ích của Tuyến API Cục Bộ
- Triển Khai Đơn Giản Hơn - Không cần triển khai các hàm edge riêng biệt
- Biến Môi Trường - Hỗ trợ tệp .env tiêu chuẩn
- Gỡ Lỗi Tốt Hơn - Dễ dàng gỡ lỗi cục bộ
- Tích Hợp Framework - Tích hợp tốt hơn với Next.js
- Không Bị Khóa Nhà Cung Cấp - Có thể triển khai lên bất kỳ nền tảng nào hỗ trợ Next.js
Xử Lý Sự Cố
- Vấn Đề Webhook:
- Đảm bảo
STRIPE_WEBHOOK_SECRETkhớp với endpoint webhook Stripe của bạn - Kiểm tra nhật ký webhook trong bảng điều khiển Stripe
- Xác minh URL webhook chính xác
- Biến Môi Trường:
- Đảm bảo tất cả biến cần thiết đã được thiết lập
- Kiểm tra lỗi chính tả trong tên biến
- Xác minh khóa vai trò dịch vụ Supabase có đủ quyền hạn
- Vấn Đề CORS:
- Các tuyến API bao gồm header CORS phù hợp
- Đảm bảo tên miền của bạn đã được cho phép nếu cần
Ghi Chú Bảo Mật
- Không bao giờ tiết lộ
STRIPE_SECRET_KEYhoặcSUPABASE_SERVICE_ROLE_KEYcho phía client - Chỉ sử dụng tiền tố
NEXT_PUBLIC_cho các biến phía client - Thường xuyên thay đổi khóa bí mật webhook của bạn
- Giám sát việc gửi webhook trong bảng điều khiển Stripe