مكدس كامل NEXTJS + TADCN + SUPABASE


| ميزة | نسخة مجانية | النسخة المدفوعة |
|---|---|---|
| Next.js v13 | ✅ | ✅ |
| /دليل التطبيق | ✅ | ✅ |
| Tailwind CSS | ✅ | ✅ |
| مكونات Shadcn | ✅ | ✅ |
| Vercel AI SDK | ✅ | ✅ |
| تكامل Supabase | ✅ | ✅ |
| مستجيب للهاتف المحمول | ✅ | ✅ |
| إرسال المنتج RSC | ✅ | ✅ |
| وضع الظلام والضوء | ✅ | ✅ |
| مصادقة المستخدم | ✅ | ✅ |
| مرشحات المنتج | ✅ | ✅ |
| سمات اللون المخصصة | ✅ | ✅ |
| تحديثات مجانية | ✅ | ✅ |
| لوحة معلومات المشرف | ✅ | |
| تحليلات المسؤول | ✅ | |
| إثراء بيانات الذكاء الاصطناعي بالجملة | ✅ | |
| رخصة | GPL-2.0 | تجاري |
| التسعير | حر | 119 دولار |
انضم إلى العبادة

عندما تنضم إلى العبادة ، يمكنك الوصول إلى مدى الحياة إلى مجموعة متنوعة من القوالب المتميزة الأخرى.
| نموذج | وصف | سمات | وصلة |
|---|---|---|---|
| خبأ السفر | تطبيق السفر في وضع عدم الاتصال بالإنترنت مع Sync في الوقت الفعلي ودعم PWA ، المصمم لتحقيق أهداف السفر والتخطيط. | إمكانات غير متصلة بالإنترنت ، Sync في الوقت الفعلي ، PWA Support ، Next.js ، Tailwind CSS ، Claude AI ، RXDB Progressive Web App | خبأ السفر |
| عبادة كبار المسئولين الاقتصاديين | أداة لزحف المواقع ، وتصنيف كبار المسئولين الاقتصاديين ، وتوفير تحسينات من AI. | RSC Web Drassing ، Web Hotals ، Outdergance AI ، Next.js ، Tailwind CSS ، Claude AI | عبادة كبار المسئولين الاقتصاديين |
| يظهر | قالب المكاسب الكاملة لشحن تطبيقات الذكاء الاصطناعى مع تضمينات المتجهات واسترجاع الخرقة. | التضمينات المتجهة ، استرجاع الخرقة ، supabase ، next.js ، tailwind css ، فتح الذكاء الاصطناعي | يظهر |
| الصفحة المقصودة | تصميم الصفحة المقصودة الاشتراك. | الرسوم المتحركة ، التنقل الفريد ، التالي. | الصفحة المقصودة |
| الخلفية | قوالب خلفية مختلفة لتلبية الاحتياجات المختلفة. | حلول خلفية مختلفة ومقتطفات لحالات الاستخدام المختلفة. | الخلفية |
كل من هذه القوالب مصممة بالكامل وإنتاج جاهز مثل الدليل. مكدس Cult هو Next.js و Shadcn و Tailwind CSS و Supabase و Vercel AI SDK.
مصممة لمساعدتك على بناء وإطلاق الشركات الناشئة المصممة بشكل جيد.
شاهد الفيديو على متن الطائرة لتدور بسرعة
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 ، أو عبر CLI:
npx supabase projects create -i " your-saas-app "يمكن العثور على معرف ORG الخاص بك في عنوان URL بعد اختيار ORG.
ربط CLI الخاص بك بالمشروع:
npx supabase init
npx supabase linkحدد المشروع الذي أنشأته للتو.
.env.local for next.js متجر url url و anon العامة في .env.local لـ next.js:
NEXT_PUBLIC_SUPABASE_URL= < api-url >
NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >يمكنك الحصول على عنوان URL API للمشروع ومفتاح مجهول من صفحة إعدادات API.
إعداد مخطط DB:
سيؤدي ذلك إلى تشغيل جميع الهجرات الموجودة في دليل
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 TABLE AUST.
في .env.local نسخ المتغير SUPABASE_ADMIN_ID ولصقه في محرر SQL.
انتقل إلى محرر SQL في صفحة إعدادات 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 ' ; لتعيين حقوق المسؤول للمستخدم ، قم بتشغيل البرنامج النصي 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 APINEXT_PUBLIC_SUPABASE_ANON_KEY - مفتاح Supabase الخاص بك مجهولSUPABASE_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
هتافات! أصعب لترى ما تبنيه!
سلع حرة أخرى

Cult UI عبارة عن مجموعة من مكونات React المصممة بشكل جميل مصممة باستخدام CSS و Tailwind. يتم تحسين هذه المكونات لسهولة الاستخدام والتكامل ، مما يجعل من السهل إنشاء تطبيقات ويب جذابة وعملية.
قالب الذكاء الاصطناعى هو قالب الكامل مصمم لبناء التطبيقات التي تعمل بالطاقة الذكاء الاصطناعي. إنه يعزز Next.js ، CSS Tailwind ، Supabase ، و Openai لتوفير أساس قوي لتطوير حلول AI متطورة.
انتقل إلى الأعلى