cult directory template
1.0.0
เทมเพลตสแต็คเต็มรูปแบบ nextjs + Shadcn + Supabase
| คุณสมบัติ | เวอร์ชันฟรี | เวอร์ชันที่ชำระเงิน |
|---|---|---|
| next.js v13 | ||
| /ไดเรกทอรีแอพ | ||
| tailwind css | ||
| ส่วนประกอบ Shadcn | ||
| vercel ai sdk | ||
| การรวม Supabase | ||
| การตอบสนองต่อมือถือ | ||
| ส่งผลิตภัณฑ์ RSC | ||
| โหมดมืดและแสง | ||
| การรับรองความถูกต้องของผู้ใช้ | ||
| ตัวกรองผลิตภัณฑ์ | ||
| ธีมสีที่กำหนดเอง | ||
| อัปเดตฟรี | ||
| แดชบอร์ดผู้ดูแลระบบ | ||
| การวิเคราะห์ผู้ดูแลระบบ | ||
| การเพิ่มประสิทธิภาพข้อมูล AI จำนวนมาก | ||
| ใบอนุญาต | GPL-2.0 | ทางการค้า |
| การกำหนดราคา | ฟรี | $ 119 |
เข้าร่วมลัทธิ
เมื่อคุณเข้าร่วมลัทธิคุณจะได้รับการเข้าถึงเทมเพลตพรีเมี่ยมอื่น ๆ ที่หลากหลาย
| เทมเพลต | คำอธิบาย | คุณสมบัติ | การเชื่อมโยง |
|---|---|---|---|
| ที่ซ่อนการเดินทาง | แอพการเดินทางแบบออฟไลน์ก่อนพร้อมการสนับสนุนแบบเรียลไทม์และการสนับสนุน PWA ซึ่งออกแบบมาสำหรับการจัดการและวางแผนเป้าหมายการเดินทาง | ความสามารถออฟไลน์, การซิงค์แบบเรียลไทม์, การสนับสนุน PWA, Next.js, Tailwind CSS, Claude AI, RXDB Progressive Web App | ที่ซ่อนการเดินทาง |
| SEO ลัทธิ | เครื่องมือสำหรับการรวบรวมข้อมูลเว็บไซต์การให้คะแนน SEO และให้การปรับปรุงที่ขับเคลื่อนด้วย AI | RSC Web Scraping, Web Vitals, output AI ที่มีโครงสร้าง, next.js, tailwind css, Claude AI | SEO ลัทธิ |
| ประจักษ์ | เทมเพลตแบบเต็มสแต็คสำหรับการจัดส่งแอพ AI พร้อมการฝังตัวเวกเตอร์และการดึง RAG | vector Embeddings, Rag Retrieval, Supabase, Next.js, Tailwind CSS, เปิด AI | ประจักษ์ |
| หน้า Landing Page | การออกแบบหน้า Landing Page | แอนิเมชั่นการนำทางที่ไม่ซ้ำกัน next.js tailwind css | หน้า Landing Page |
| แบ็กเอนด์ | เทมเพลตแบ็กเอนด์ต่างๆสำหรับความต้องการที่แตกต่างกัน | โซลูชันแบ็กเอนด์และตัวอย่างต่าง ๆ สำหรับกรณีการใช้งานที่แตกต่างกัน | แบ็กเอนด์ |
แต่ละเทมเพลตเหล่านี้ได้รับการออกแบบอย่างเต็มรูปแบบและการผลิตพร้อมเช่นเดียวกับลัทธิ-ไดเรกทอรี สแต็คลัทธิคือ next.js, shadcn, tailwind css, supabase และ vercel ai sdk
ออกแบบมาเพื่อช่วยให้คุณสร้างและเปิดตัวสตาร์ทอัพที่ได้รับการออกแบบมาอย่างรวดเร็ว
ดูวิดีโอ onboarding เพื่อหมุนอย่างรวดเร็ว
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>
สร้างโครงการ Supabase ที่ Supabase Dashboard หรือผ่าน CLI:
npx supabase projects create -i " your-saas-app "รหัสองค์กรของคุณสามารถพบได้ใน URL หลังจากเลือกองค์กร
เชื่อมโยง CLI ของคุณกับโครงการ:
npx supabase init
npx supabase linkเลือกโครงการที่คุณเพิ่งสร้าง
.env.local สำหรับ next.js จัดเก็บ Supabase URL & Public Anon Key ใน .env.local สำหรับ next.js:
NEXT_PUBLIC_SUPABASE_URL= < api-url >
NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >คุณสามารถรับ URL โครงการ API และคีย์นิรนามได้จากหน้าการตั้งค่า API
การตั้งค่า DB Schema:
สิ่งนี้จะเรียกใช้การอพยพทั้งหมดที่อยู่ในไดเรกทอรี
supabase/migrations
supabase db push.env ของคุณได้รับการกำหนดค่าอย่างถูกต้อง 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.. " ในเทอร์มินัลแยกต่างหากให้เรียกใช้คำสั่งต่อไปนี้:
pnpm ipnpm run devเปิด http: // localhost: 3000 ในเบราว์เซอร์ของคุณ
การ จำกัด อัตรา SMTP เริ่มต้นสำหรับ supabase นั้นต่ำมากในขณะนี้
ผู้ให้บริการอีเมล - หน้าการตั้งค่า API
หากต้องการเพิ่มผลิตภัณฑ์ใหม่ลงในไดเรกทอรีของคุณเพียงไปที่หน้าส่ง:
ส่งสินค้า
ตอนนี้คุณมีฐานข้อมูลที่มีเมล็ดอย่างเต็มที่พร้อมข้อมูลทั้งหมดที่คุณต้องการเพื่อเริ่มสร้างไดเรกทอรีลัทธิของคุณเอง
เวอร์ชันที่ชำระแล้วเท่านั้น
เข้าร่วมลัทธิ
การ จำกัด อัตรา SMTP เริ่มต้นสำหรับ supabase นั้นต่ำมากในขณะนี้
ผู้ให้บริการอีเมล - หน้าการตั้งค่า API
หากคุณต้องการการยืนยันทางอีเมลทำตามคำแนะนำเหล่านี้
เข้าสู่ระบบ
ดึงข้อมูลจากหน้าการตั้งค่า API ของผู้ใช้ AUTH ผู้ใช้
ใน .env.local คัดลอกตัวแปร SUPABASE_ADMIN_ID และวางลงในตัวแก้ไข SQL
ไปที่หน้า SQL Editor ในหน้าการตั้งค่า Supabase API
UPDATE auth . users
SET raw_app_meta_data = jsonb_set(
coalesce(raw_app_meta_data, ' {} ' ),
' {claims_admin} ' ,
' true ' ::jsonb
)
WHERE id = ' USER_UUID ' ; ในการกำหนดสิทธิ์ผู้ดูแลระบบให้กับผู้ใช้ให้เรียกใช้สคริปต์ SQL ต่อไปนี้ แทนที่ 'USER_UUID' ด้วยรหัสผู้ใช้เดียวกันที่คุณคัดลอกจากตารางผู้ใช้ Auth
สคริปต์เมล็ดนั้นค่อนข้างซับซ้อน มีภาพรวมเอกสาร 0.
supabase/seed/src/README.mdและเอกสารสำหรับแต่ละขั้นตอน:
supabase/seed/src/stage-1-crawl/readme.mdsupabase/seed/src/stage-2-enrich/readme.mdsupabase/seed/src/stage-3-seed/readme.mdฉันพยายามทำให้ราคาถูกที่สุดเท่าที่จะทำได้ ขึ้นอยู่กับระดับการสนับสนุน API ของคุณคุณสามารถเพิ่มประสิทธิภาพของสคริปต์โดยการเล่นกับค่าพร้อมกันและค่าหมดเวลา
คุณต้องมีทั้ง ANTHROPIC_API_KEY หรือ ANTHROPIC_API_KEY ในไฟล์ .env.local ของคุณเพื่อเรียกใช้ supabase/seed/src/stage-2-enrich
หากคุณมีคีย์ API ให้คัดลอกไปยังไฟล์. .env.local ของคุณ
เลือกแก้ไขตัวแปร SEED_URLS ใน supabase/seed/src/main.ts เพื่อรวม URL ที่คุณต้องการขูดและเพิ่มคุณค่า
เรียกใช้สคริปต์:
pnpm run enrich-seed หากคุณไม่มีคีย์ API ฉันได้รวมชุดข้อมูลที่ได้รับการปรับปรุงล่วงหน้าไว้ก่อน คุณสามารถเห็นสิ่งนี้ได้ใน supabase/seed/src/stage-2-enrich/__data__/enriched-20240611T210738.json
หากต้องการใช้ชุดข้อมูลนี้แทนการเพิ่มคุณค่าโดยใช้คีย์ของคุณ:
เปิดไฟล์ที่ supabase/seed/src/main.ts
แสดงความคิดเห็นบรรทัด 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")เรียกใช้สคริปต์:
pnpm run enrich-seedจัดการเนื้อหาและผู้ใช้ไดเรกทอรีของคุณผ่านแผงควบคุมผู้ดูแลระบบ เข้าถึงได้ที่นี่:
แดชบอร์ดผู้ดูแลระบบ
เพื่อให้ไดเรกทอรีของคุณดูเป็นเอกลักษณ์สร้างธีมสีที่กำหนดเอง:
ออกแบบธีมของคุณ
เยี่ยมชมหน้าธีม Shadcn ที่กำหนดเองเพื่อออกแบบธีมของคุณ
ใช้ธีมของคุณ
เมื่อคุณมีธีมของคุณแล้วให้คัดลอก CSS ที่เกี่ยวข้องและวางลงในไฟล์ app/globals.css ของคุณแทนที่บรรทัด 5-67
สร้างที่เก็บใหม่และผลักดันโครงการไปยัง GitHub
ไปที่ Vercel และนำเข้าพื้นที่เก็บข้อมูล GitHub: ปรับใช้
ตั้งค่าตัวแปรสภาพแวดล้อมใน Vercel
ไปที่การตั้งค่าโครงการของคุณบน Vercel และตั้งค่าตัวแปรสภาพแวดล้อมโดยการคัดลอกเนื้อหาจากไฟล์. .env.local ของคุณ ตรวจสอบให้แน่ใจว่ามีตัวแปรต่อไปนี้:
NEXT_PUBLIC_SUPABASE_URL - url supabase api ของคุณNEXT_PUBLIC_SUPABASE_ANON_KEY - คีย์นิรนามของคุณ supabaseSUPABASE_PROJECT_ID - รหัสโครงการ supabase ของคุณSUPABASE_ADMIN_ID - รหัสผู้ใช้งานสำหรับแอปพลิเคชันของคุณนี่คือตัวอย่างของสิ่งที่ตัวแปรสภาพแวดล้อมของคุณอาจเป็นอย่างไร:
NEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
SUPABASE_PROJECT_ID="abcd1234"
SUPABASE_ADMIN_ID="efgh5678"
ปรับใช้โครงการ
เมื่อตั้งค่าตัวแปรสภาพแวดล้อมของคุณแล้วคุณสามารถปรับใช้โครงการของคุณได้ Vercel จะจัดการกระบวนการสร้างและการปรับใช้ให้คุณ
เข้าถึงแอปพลิเคชันสดของคุณ
หลังจากการปรับใช้คุณสามารถเข้าถึงแอปพลิเคชันสดของคุณผ่าน URL ที่จัดทำโดย Vercel แอปพลิเคชันของคุณควรมีชีวิตอยู่และพร้อมใช้งาน
ยินดีต้อนรับสู่ลัทธิ! -
ทำตามขั้นตอนที่ระบุไว้ใน readMe นี้เพื่อปรับใช้และปรับแต่งแอพไดเรกทอรีของคุณ หากคุณมีคำถามใด ๆ หรือพบปัญหาโปรดติดต่อเพื่อสนับสนุน Twitter: https://x.com/nolansym
ไชโย Stoked เพื่อดูสิ่งที่คุณสร้าง!
สินค้าฟรีอื่น ๆ
Cult UI เป็นคอลเลกชันของส่วนประกอบปฏิกิริยาที่ออกแบบมาอย่างสวยงามที่สร้างขึ้นด้วย Radix UI และ CSS tailwind ส่วนประกอบเหล่านี้ได้รับการปรับให้เหมาะสมเพื่อความสะดวกในการใช้งานและการรวมทำให้ง่ายต่อการสร้างเว็บแอปพลิเคชันที่ดึงดูดสายตาและใช้งานได้
เทมเพลต AI เป็นเทมเพลตเต็มรูปแบบที่ออกแบบมาสำหรับการสร้างแอพพลิเคชั่น AI ที่ขับเคลื่อนด้วย AI มันใช้ประโยชน์จาก Next.js, Tailwind CSS, Supabase และ Openai เพื่อให้รากฐานที่แข็งแกร่งสำหรับการพัฒนาโซลูชั่น AI ที่ซับซ้อน
เลื่อนไปด้านบน
