cult directory template
1.0.0
Un modèle complet de pile NextJS + Shadcn + Supabase
| Fonctionnalité | Version gratuite | Version payante |
|---|---|---|
| Suivant.js v13 | ✅ | ✅ |
| / Répertoire de l'application | ✅ | ✅ |
| CSS du vent arrière | ✅ | ✅ |
| Composants shadcn | ✅ | ✅ |
| SDK Vercel AI | ✅ | ✅ |
| Intégration Supabase | ✅ | ✅ |
| Mobile réactif | ✅ | ✅ |
| Soumettre le produit RSC | ✅ | ✅ |
| Mode sombre et clair | ✅ | ✅ |
| Authentification des utilisateurs | ✅ | ✅ |
| Filtres de produit | ✅ | ✅ |
| Thèmes de couleur personnalisés | ✅ | ✅ |
| Mises à jour gratuites | ✅ | ✅ |
| Tableau de bord administratif | ✅ | |
| Analytique de l'administration | ✅ | |
| Enrichissement des données d'IA en vrac | ✅ | |
| Licence | GPL-2.0 | Commercial |
| Prix | Gratuit | 119 $ |
Rejoindre le culte
Lorsque vous rejoignez le culte, vous obtenez un accès à vie à une variété d'autres modèles premium.
| Modèle | Description | Caractéristiques | Lien |
|---|---|---|---|
| Cachette de voyage | Application de voyage d'abord hors ligne avec le support de synchronisation en temps réel et PWA, conçue pour gérer et planifier des objectifs de voyage. | Capacités hors ligne, synchronisation en temps réel, support PWA, Next.js, Tailwind CSS, Claude AI, RXDB Progressive Web App | Cachette de voyage |
| SEO culte | Outil pour ramper les sites Web, classer le référencement et fournir des améliorations axées sur l'IA. | RSC Sctring Web, web vitals, Structured Ai Sorput, next.js, tailwind CSS, Claude Ai | SEO culte |
| Manifeste | Modèle complet pour expédier des applications AI avec incorporations de vecteur et récupération de chiffon. | Vector Embeddings, Rag Retrieval, Supabase, Next.js, Tailwind CSS, Open AI | Manifeste |
| Page de destination | Page de destination de l'abonnement de conception. | Animation, navigation unique, Next.js, Tailwind CSS | Page de destination |
| Backend | Divers modèles backend pour différents besoins. | Diverses solutions et extraits backend pour différents cas d'utilisation. | Backend |
Chacun de ces modèles est complet et prêt à la production comme le directeur culte. La pile culte est suivante.js, Shadcn, Tailwind CSS, Supabase et le SDK Vercel AI.
Conçu pour vous aider à construire et à lancer rapidement des startups bien conçues.
Regardez la vidéo intégrée pour tourner rapidement
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>
Créez un projet Supabase sur le tableau de bord Supabase ou via la CLI:
npx supabase projects create -i " your-saas-app "Votre identifiant de l'organisation peut être trouvé dans l'URL après avoir sélectionné une organisation.
Liez votre CLI au projet:
npx supabase init
npx supabase linkSélectionnez le projet que vous venez de créer.
.env.local pour next.js Store URL Supabase et clé publique dans .env.local pour next.js:
NEXT_PUBLIC_SUPABASE_URL= < api-url >
NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >Vous pouvez obtenir l'URL de l'API du projet et la clé anonyme à partir de la page des paramètres de l'API.
Configuration du schéma DB:
Cela exécutera toutes les migrations situées dans le répertoire
supabase/migrations
supabase db push.env sont configurées correctement 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.. " Dans un terminal séparé, exécutez les commandes suivantes:
pnpm ipnpm run devOuvrez http: // localhost: 3000 dans votre navigateur.
La limitation du taux SMTP par défaut pour Supabase est très faible maintenant.
Courriel des fournisseurs - page Paramètres de l'API.
Pour ajouter de nouveaux produits à votre répertoire, visitez simplement la page de soumission:
Soumettre des produits
Vous avez maintenant une base de données entièrement ensemencée avec toutes les données dont vous avez besoin pour commencer à construire votre propre répertoire culte.
Version payante uniquement
Rejoindre le culte
La limitation du taux SMTP par défaut pour Supabase est très faible maintenant.
Courriel des fournisseurs - page Paramètres de l'API.
Si vous avez besoin de confirmation par e-mail, suivez ces guides
Se connecter
Récupérer la page des paramètres de l'API de la table des utilisateurs AUTH.
Dans .env.local Copie la variable SUPABASE_ADMIN_ID et collez-le dans l'éditeur SQL.
Accédez à l'éditeur SQL dans la page des paramètres de l'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 ' ; Pour attribuer des droits d'administration à un utilisateur, exécutez le script SQL suivant. Remplacez 'USER_UUID' par le même ID utilisateur que vous avez copié à partir de la table des utilisateurs AUTH.
Le script de graines est assez complexe. Il existe des documents de vue 0.
supabase/seed/src/README.mdet Docs pour chaque étape:
supabase/seed/src/stage-1-crawl/readme.mdsupabase/seed/src/stage-2-enrich/readme.mdsupabase/seed/src/stage-3-seed/readme.mdJ'ai essayé de le rendre aussi bon marché que possible. Selon votre niveau de support API, vous pouvez augmenter les performances des scripts en jouant avec les valeurs de concurrence et de délai d'expiration.
Vous avez besoin de l' ANTHROPIC_API_KEY ou d'un ANTHROPIC_API_KEY dans votre fichier .env.local pour exécuter supabase/seed/src/stage-2-enrich .
Si vous avez une clé API, copiez-le dans votre fichier .env.local .
Éventuellement modifier la variable SEED_URLS dans supabase/seed/src/main.ts pour inclure les URL que vous souhaitez gratter et enrichir.
Exécutez le script:
pnpm run enrich-seed Si vous n'avez pas de clé API, j'ai inclus un ensemble de données pré-enrichi d'une exécution précédente. Vous pouvez le voir dans supabase/seed/src/stage-2-enrich/__data__/enriched-20240611T210738.json .
Pour utiliser cet ensemble de données au lieu de s'enrichir à l'aide de vos clés:
Ouvrez le fichier à supabase/seed/src/main.ts
Commentez les lignes 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")Exécutez le script:
pnpm run enrich-seedGérez le contenu et les utilisateurs de votre répertoire via le tableau de bord Admin. Accédez-y ici:
Tableau de bord administratif
Pour donner à votre répertoire un look unique, créez un thème de couleur personnalisé:
Concevez votre thème
Visitez la page de thème Shadcn personnalisée pour concevoir votre thème.
Appliquez votre thème
Une fois que vous avez votre thème, copiez le CSS pertinent et collez-le dans votre fichier app/globals.css , en remplaçant les lignes 5-67.
Créez un nouveau référentiel et poussez le projet vers GitHub.
Allez sur Vercel et importez le référentiel GitHub: Déploiement.
Configurer des variables d'environnement dans Vercel
Accédez à vos paramètres de projet sur Vercel et configurez les variables d'environnement en copiant le contenu à partir de votre fichier .env.local . Assurez-vous que les variables suivantes sont incluses:
NEXT_PUBLIC_SUPABASE_URL - Votre URL de l'API SupabaseNEXT_PUBLIC_SUPABASE_ANON_KEY - Votre clé anonyme SupabaseSUPABASE_PROJECT_ID - Votre ID de projet SupabaseSUPABASE_ADMIN_ID - ID utilisateur d'administration pour votre applicationVoici un exemple de ce à quoi pourraient ressembler vos variables d'environnement:
NEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
SUPABASE_PROJECT_ID="abcd1234"
SUPABASE_ADMIN_ID="efgh5678"
Déploier le projet
Une fois vos variables d'environnement définies, vous pouvez déployer votre projet. Vercel gérera le processus de construction et de déploiement pour vous.
Accéder à votre application en direct
Après le déploiement, vous pouvez accéder à votre application en direct via l'URL fournie par Vercel. Votre application doit désormais être en direct et prête à l'emploi.
Bienvenue au culte! :)
Suivez les étapes décrites dans cette lecture pour déployer et personnaliser votre application d'annuaire. Si vous avez des questions ou rencontrez des problèmes, n'hésitez pas à tendre la main sur Twitter: https://x.com/nolansym
Acclamations! Stoké pour voir ce que vous construisez!
Autres marchandises gratuites
L'interface utilisateur de culte est une collection de composants React magnifiquement conçus construits avec Radix UI et CSS de vent arrière. Ces composants sont optimisés pour faciliter l'utilisation et l'intégration, ce qui facilite la création d'applications Web visuellement attrayantes et fonctionnelles.
Le modèle AI est un modèle complet conçu pour construire des applications alimentées par AI. Il tire parti de Next.js, Tailwind CSS, Supabase et Openai pour fournir une base robuste pour développer des solutions d'IA sophistiquées.
Faites défiler en haut
