cult directory template
1.0.0
Template SUPABASE SUPPABASE NEXTJS + Shadcn +
| Fitur | Versi gratis | Versi berbayar |
|---|---|---|
| Next.js v13 | ✅ | ✅ |
| /Direktori Aplikasi | ✅ | ✅ |
| Tailwind CSS | ✅ | ✅ |
| Komponen shadcn | ✅ | ✅ |
| Vercel Ai SDK | ✅ | ✅ |
| Integrasi Supabase | ✅ | ✅ |
| Responsif seluler | ✅ | ✅ |
| Kirim Produk RSC | ✅ | ✅ |
| Mode gelap & terang | ✅ | ✅ |
| Otentikasi pengguna | ✅ | ✅ |
| Filter produk | ✅ | ✅ |
| Tema warna khusus | ✅ | ✅ |
| Pembaruan gratis | ✅ | ✅ |
| Dasbor Admin | ✅ | |
| Analisis Admin | ✅ | |
| Pengayaan Data AI curah | ✅ | |
| Lisensi | Gpl-2.0 | Komersial |
| Harga | Bebas | $ 119 |
Bergabunglah dengan kultus
Saat Anda bergabung dengan kultus, Anda mendapatkan akses seumur hidup ke berbagai templat premium lainnya.
| Templat | Keterangan | Fitur | Link |
|---|---|---|---|
| Simpanan perjalanan | Aplikasi perjalanan offline-first dengan sinkronisasi real-time dan dukungan PWA, yang dirancang untuk mengelola dan merencanakan tujuan perjalanan. | Kemampuan offline, sinkronisasi real-time, dukungan PWA, Next.js, CSS Tailwind, Claude AI, Aplikasi Web Progresif RXDB | Simpanan perjalanan |
| Seo kultus | Alat untuk merangkak situs web, menilai SEO, dan memberikan peningkatan yang digerakkan AI. | RSC Web Scraping, Web Vitals, Output AI Terstruktur, Next.js, Tailwind CSS, Claude AI | Seo kultus |
| Tampak | Template Full-Stack untuk pengiriman aplikasi AI dengan embeddings vektor dan pengambilan kain. | Vektor embeddings, pengambilan kain, supabase, next.js, css tailwind, ai terbuka | Tampak |
| Halaman arahan | Desain halaman pendaratan berlangganan. | Animasi, Navigasi Unik, Next.js, Tailwind CSS | Halaman arahan |
| Backend | Berbagai templat backend untuk kebutuhan yang berbeda. | Berbagai solusi backend dan cuplikan untuk kasus penggunaan yang berbeda. | Backend |
Masing-masing templat ini dirancang penuh dan produksi siap seperti-direktur kultus. Tumpukan kultus adalah Next.js, shadcn, tailwind CSS, Supabase, dan Vercel Ai SDK.
Dirancang untuk membantu Anda membangun dan meluncurkan startup yang dirancang dengan baik dengan cepat.
Tonton video onboarding untuk berputar dengan cepat
Mac: brew install supabase/tap/supabase
Windows:
scoop bucket add supabase https: // github.com / supabase / scoop - bucket.git
scoop install supabase Linux: brew install supabase/tap/supabase
NPM/BUN: npx supabase <command>
Buat Proyek Supabase di Supabase Dashboard, atau melalui CLI:
npx supabase projects create -i " your-saas-app "ID org Anda dapat ditemukan di URL setelah memilih org.
Tautkan CLI Anda ke proyek:
npx supabase init
npx supabase linkPilih proyek yang baru saja Anda buat.
.env.local UNTUK NEXT.JS Store Supabase Url & Public Anon Key di .env.local for Next.js:
NEXT_PUBLIC_SUPABASE_URL= < api-url >
NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >Anda bisa mendapatkan URL API Proyek dan Kunci Anonim dari halaman Pengaturan API.
Pengaturan Skema DB:
Ini akan menjalankan semua migrasi yang terletak di direktori
supabase/migrations
supabase db push.env Anda dikonfigurasi dengan benar cp .env.local.example .env.local # Example Supabase Config
NEXT_PUBLIC_SUPABASE_URL= " https://examplesqnwerasdfaser.supabase.co "
SUPABASE_PROJECT_ID= " examplesqnwerasdfaser "
NEXT_PUBLIC_SUPABASE_ANON_KEY= " xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.. " Di terminal terpisah, jalankan perintah berikut:
pnpm ipnpm run devBuka http: // localhost: 3000 di browser Anda.
Tingkat SMTP default yang membatasi Supabase sangat rendah sekarang.
Email Penyedia - Halaman Pengaturan API.
Untuk menambahkan produk baru ke direktori Anda, cukup kunjungi halaman pengiriman:
Kirim Produk
Anda sekarang memiliki basis data yang sepenuhnya diunggulkan dengan semua data yang Anda butuhkan untuk mulai membangun direktori kultus Anda sendiri.
Versi berbayar saja
Bergabunglah dengan kultus
Tingkat SMTP default yang membatasi Supabase sangat rendah sekarang.
Email Penyedia - Halaman Pengaturan API.
Jika Anda memerlukan konfirmasi email, ikuti panduan ini
Login
Ambil dari halaman Pengaturan API Tabel Pengguna AUTH.
Di .env.local Salin variabel SUPABASE_ADMIN_ID dan tempel ke editor SQL.
Pergi ke SQL Editor di halaman Pengaturan API SUPABASE.
UPDATE auth . users
SET raw_app_meta_data = jsonb_set(
coalesce(raw_app_meta_data, ' {} ' ),
' {claims_admin} ' ,
' true ' ::jsonb
)
WHERE id = ' USER_UUID ' ; Untuk menetapkan hak admin kepada pengguna, jalankan skrip SQL berikut. Ganti 'USER_UUID' dengan ID pengguna yang sama yang Anda salin dari tabel pengguna auth.
Skrip benih cukup rumit. Ada ikhtisar dokumen 0.
supabase/seed/src/README.mddan dokumen untuk setiap tahap:
supabase/seed/src/stage-1-crawl/readme.mdsupabase/seed/src/stage-2-enrich/readme.mdsupabase/seed/src/stage-3-seed/readme.mdSaya sudah mencoba membuatnya semurah mungkin untuk dijalankan. Bergantung pada level dukungan API Anda, Anda dapat meningkatkan kinerja skrip dengan bermain dengan nilai konkurensi dan batas waktu.
Anda memerlukan ANTHROPIC_API_KEY atau ANTHROPIC_API_KEY di file .env.local Anda untuk menjalankan supabase/seed/src/stage-2-enrich .
Jika Anda memiliki kunci API, salin ke file .env.local Anda.
Secara opsional mengedit variabel SEED_URLS dalam supabase/seed/src/main.ts untuk memasukkan URL yang ingin Anda kikis dan memperkaya.
Jalankan skrip:
pnpm run enrich-seed Jika Anda tidak memiliki kunci API, saya sudah memasukkan set data yang diperkaya sebelumnya dari menjalankan sebelumnya. Anda dapat melihat ini di supabase/seed/src/stage-2-enrich/__data__/enriched-20240611T210738.json .
Untuk menggunakan set data ini alih -alih memperkaya menggunakan kunci Anda:
Buka file di supabase/seed/src/main.ts .
Komentar keluar baris 104 - 110 :
// console.log("Step 1: Crawl and save raw data")
// await crawlAndSave(SEED_URLS)
// console.log("Step 1 completed successfully")
// console.log("Step 2: Enrich the latest raw data")
// await enrichLatestData()
// console.log("Step 2 completed successfully")Jalankan skrip:
pnpm run enrich-seedKelola konten dan pengguna direktori Anda melalui dasbor admin. Mengaksesnya di sini:
Dasbor Admin
Untuk memberikan tampilan yang unik kepada direktori Anda, buat tema warna khusus:
Rancang tema Anda
Kunjungi halaman tema shadcn khusus untuk merancang tema Anda.
Terapkan tema Anda
Setelah Anda memiliki tema, salin CSS yang relevan dan tempel ke file app/globals.css Anda, mengganti baris 5-67.
Buat repositori baru dan dorong proyek ke GitHub.
Pergi ke Vercel dan impor repositori GitHub: Deploy.
Mengatur variabel lingkungan di Vercel
Buka pengaturan proyek Anda di Vercel dan atur variabel lingkungan dengan menyalin konten dari file .env.local Anda. Pastikan variabel berikut disertakan:
NEXT_PUBLIC_SUPABASE_URL - URL API Supabase AndaNEXT_PUBLIC_SUPABASE_ANON_KEY - kunci anonim supabase AndaSUPABASE_PROJECT_ID - ID Proyek Supabase AndaSUPABASE_ADMIN_ID - ID Pengguna Admin untuk aplikasi AndaBerikut adalah contoh dari seperti apa variabel lingkungan Anda:
NEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
SUPABASE_PROJECT_ID="abcd1234"
SUPABASE_ADMIN_ID="efgh5678"
Menyebarkan proyek
Setelah variabel lingkungan Anda ditetapkan, Anda dapat menggunakan proyek Anda. Vercel akan menangani proses build dan penyebaran untuk Anda.
Akses Aplikasi Langsung Anda
Setelah penempatan, Anda dapat mengakses aplikasi langsung Anda melalui URL yang disediakan oleh Vercel. Aplikasi Anda sekarang harus ditayangkan dan siap digunakan.
Selamat datang di The Cult! :)
Ikuti langkah -langkah yang diuraikan dalam readme ini untuk menggunakan dan menyesuaikan aplikasi direktori Anda. Jika Anda memiliki pertanyaan atau mengalami masalah, jangan ragu untuk menghubungi dukungan di Twitter: https://x.com/nolansym
Bersulang! Dipicu untuk melihat apa yang Anda bangun!
Barang gratis lainnya
Cult UI adalah kumpulan komponen reaksi yang dirancang dengan indah yang dibangun dengan Radix UI dan CSS Tailwind. Komponen -komponen ini dioptimalkan untuk kemudahan penggunaan dan integrasi, membuatnya mudah untuk membuat aplikasi web yang menarik secara visual dan fungsional.
AI Template adalah template full-stack yang dirancang untuk membangun aplikasi bertenaga AI. Ini memanfaatkan Next.js, Tailwind CSS, Supabase, dan Openai untuk memberikan fondasi yang kuat untuk mengembangkan solusi AI yang canggih.
Gulir ke atas
