Ein Vollstapel NextJS + Shadcn + Supabase -Vorlage


| Besonderheit | Kostenlose Version | Bezahlte Version |
|---|---|---|
| Weiter.js v13 | ✅ | ✅ |
| /App -Verzeichnis | ✅ | ✅ |
| Rückenwind -CSS | ✅ | ✅ |
| Shadcn -Komponenten | ✅ | ✅ |
| Vercel ai sdk | ✅ | ✅ |
| Supabase -Integration | ✅ | ✅ |
| Mobile Responsive | ✅ | ✅ |
| Produkt RSC einreichen | ✅ | ✅ |
| Dunkel- und Lichtmodus | ✅ | ✅ |
| Benutzerauthentifizierung | ✅ | ✅ |
| Produktfilter | ✅ | ✅ |
| Benutzerdefinierte Farbthemen | ✅ | ✅ |
| Kostenlose Updates | ✅ | ✅ |
| Admin -Dashboard | ✅ | |
| Admin -Analytik | ✅ | |
| Datenanreicherung von Bulk AI | ✅ | |
| Lizenz | GPL-2.0 | Kommerziell |
| Preisgestaltung | Frei | $ 119 |
Schließe dich dem Kult an

Wenn Sie sich dem Kult anschließen, erhalten Sie einen lebenslangen Zugang zu einer Vielzahl anderer Premium -Vorlagen.
| Vorlage | Beschreibung | Merkmale | Link |
|---|---|---|---|
| Reiseverstärker | Offline-First-Reise-App mit Echtzeit-Synchronisation und PWA-Unterstützung, die für die Verwaltung und Planung von Reisezielen konzipiert und plant. | Offline-Funktionen, Echtzeit-Synchronisation, PWA-Unterstützung, Next.js, Tailwind CSS, Claude AI, RXDB Progressive Web App | Reiseverstärker |
| Kultseo | Tool für Kriechwebsites, SEO-Bewertungen und Bereitstellung von AI-gesteuerten Verbesserungen. | RSC Web Scraping, Web -Vitals, strukturierte KI -Ausgabe, Weiter.js, Rückenwind -CSS, Claude AI | Kultseo |
| Manifest | Vorlage für Full-Stack-Vorlage für Versand von AI-Apps mit Vektor-Einbettungen und Rag-Abrufen. | Vektor -Einbettung, Rag -Abruf, Supabase, Next.js, Rückenwind -CSS, Open AI | Manifest |
| Zielseite | Design -Abonnement -Zielseite. | Animation, einzigartige Navigation, Next.js, Rückenwind -CSS | Zielseite |
| Backend | Verschiedene Backend -Vorlagen für unterschiedliche Bedürfnisse. | Verschiedene Backend -Lösungen und Snippets für verschiedene Anwendungsfälle. | Backend |
Jedes dieser Vorlagen ist voll gestaltet und produktionsbereit wie ein Kultverzeichnis. Der Kultstapel erfolgt als nächstes.
Entwickelt, um Ihnen dabei zu helfen, gut gestaltete Startups schnell zu bauen und zu starten.
Sehen Sie sich das Onboarding -Video an, um sich schnell zu drehen
MAC: brew install supabase/tap/supabase
Fenster:
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>
Erstellen Sie ein Supabase -Projekt bei Supabase Dashboard oder über die CLI:
npx supabase projects create -i " your-saas-app "Ihre Org -ID finden Sie nach Auswahl einer org in der URL.
Verknüpfen Sie Ihre CLI mit dem Projekt:
npx supabase init
npx supabase linkWählen Sie das gerade erstellte Projekt aus.
.env.local für Next.js Supabase URL & Public Anon Key in .env.local für Next.js:
NEXT_PUBLIC_SUPABASE_URL= < api-url >
NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >Sie können die Projekt -API -URL und den anonymen Schlüssel von der API -Einstellungsseite erhalten.
Setup DB -Schema:
Dadurch werden alle Migrationen im
supabase/migrations-Verzeichnis durchgeführt
supabase db push.env -Variablen korrekt konfiguriert sind 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.. " Führen Sie in einem separaten Terminal die folgenden Befehle aus:
pnpm ipnpm run devÖffnen Sie http: // localhost: 3000 in Ihrem Browser.
Die Standard -SMTP -Rate für Supabase ist jetzt sehr niedrig.
Anbieter -E -Mail - API -Einstellungen Seite.

Um Ihrem Verzeichnis neue Produkte hinzuzufügen, besuchen Sie einfach die Einreichungsseite:
Produkte einreichen
Sie haben jetzt eine voll ausgesetzte Datenbank mit allen Daten, die Sie benötigen, um Ihr eigenes Kultverzeichnis zu erstellen.
Nur bezahlte Version
Schließe dich dem Kult an



Die Standard -SMTP -Rate für Supabase ist jetzt sehr niedrig.
Anbieter -E -Mail - API -Einstellungen Seite.

Wenn Sie eine E -Mail -Bestätigung benötigen, folgen Sie diesen Leitfäden.
Login

Abrufen Sie von der Seite "AUTH -Benutzer Tabelle API -Einstellungen" ab.
In .env.local kopieren Sie die Variable SUPABASE_ADMIN_ID und fügen Sie sie in den SQL -Editor ein.
Gehen Sie zum SQL -Editor auf Seite Supabase API -Einstellungen.
UPDATE auth . users
SET raw_app_meta_data = jsonb_set(
coalesce(raw_app_meta_data, ' {} ' ),
' {claims_admin} ' ,
' true ' ::jsonb
)
WHERE id = ' USER_UUID ' ; Führen Sie das folgende SQL -Skript aus, um Administratorrechten zuzuweisen. Ersetzen Sie 'USER_UUID' durch die gleiche Benutzer -ID, die Sie in der Tabelle Auth Users kopiert haben.
Das Samenskript ist ziemlich komplex. Es gibt Übersichtsdokumente 0.
supabase/seed/src/README.mdund docs für jede Phase:
supabase/seed/src/stage-1-crawl/readme.mdsupabase/seed/src/stage-2-enrich/readme.mdsupabase/seed/src/stage-3-seed/readme.mdIch habe versucht, es so billig wie möglich zu machen. Abhängig von Ihrer API -Support -Ebene können Sie die Leistung der Skripte erhöhen, indem Sie mit den Parallelitäts- und Timeout -Werten spielen.
Sie benötigen entweder den ANTHROPIC_API_KEY oder einen ANTHROPIC_API_KEY in Ihrer .env.local Datei, um supabase/seed/src/stage-2-enrich auszuführen.
Wenn Sie einen API -Schlüssel haben, kopieren Sie ihn in Ihre .env.local -Datei.
Bearbeiten Sie optional die Variable SEED_URLS in supabase/seed/src/main.ts um die URLs, die Sie kratzen und anreichern möchten, einzuschließen.
Führen Sie das Skript aus:
pnpm run enrich-seed Wenn Sie keinen API-Schlüssel haben, habe ich einen vorgereichten Datensatz eines früheren Laufs beigefügt. Sie können dies in supabase/seed/src/stage-2-enrich/__data__/enriched-20240611T210738.json sehen.
Verwenden Sie diesen Datensatz anstatt mit Ihren Schlüssel zu bereichern:
Öffnen Sie die Datei bei supabase/seed/src/main.ts .
Kommentieren Sie Zeilen 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")Führen Sie das Skript aus:
pnpm run enrich-seedVerwalten Sie den Inhalt und die Benutzer Ihres Verzeichnisses über das Admin -Dashboard. Greifen Sie hier zu darauf zu:
Admin -Dashboard
Um Ihrem Verzeichnis ein einzigartiges Aussehen zu verleihen, erstellen Sie ein benutzerdefiniertes Farbthema:
Entwerfen Sie Ihr Thema
Besuchen Sie die benutzerdefinierte Shadcn -Themenseite, um Ihr Thema zu entwerfen.
Wenden Sie Ihr Thema an
Sobald Sie Ihr Thema haben, kopieren Sie die relevanten CSS und fügen Sie es in Ihre app/globals.css Datei ein und ersetzen Sie die Zeilen 5-67.
Erstellen Sie ein neues Repository und geben Sie das Projekt auf GitHub.
Gehen Sie zu Vercel und importieren Sie das GitHub -Repository: Bereitstellung.
Richten Sie Umgebungsvariablen in Vercel ein
Gehen Sie zu Ihren Projekteinstellungen auf Vercel und richten Sie die Umgebungsvariablen ein, indem Sie den Inhalt aus Ihrer .env.local -Datei kopieren. Stellen Sie sicher, dass die folgenden Variablen enthalten sind:
NEXT_PUBLIC_SUPABASE_URL - Ihre Supabase -API -URLNEXT_PUBLIC_SUPABASE_ANON_KEY - Dein Supabase Anonymous KeySUPABASE_PROJECT_ID - Ihre Supabase -Projekt -IDSUPABASE_ADMIN_ID - Admin -Benutzer -ID für Ihre AnwendungHier ist ein Beispiel dafür, wie Ihre Umgebungsvariablen aussehen könnten:
NEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
SUPABASE_PROJECT_ID="abcd1234"
SUPABASE_ADMIN_ID="efgh5678"
Das Projekt einsetzen
Sobald Ihre Umgebungsvariablen festgelegt sind, können Sie Ihr Projekt bereitstellen. Vercel wird den Build- und Bereitstellungsprozess für Sie behandeln.
Greifen Sie auf Ihre Live -Anwendung zu
Nach der Bereitstellung können Sie über die von Vercel bereitgestellte URL auf Ihre Live -Anwendung zugreifen. Ihre Bewerbung sollte jetzt live und bereit sein.
Willkommen im Kult! :)
Befolgen Sie die in diesem Readme beschriebenen Schritte, um Ihre Verzeichnis -App bereitzustellen und anzupassen. Wenn Sie Fragen haben oder auf Probleme stoßen, können Sie sich gerne auf Twitter unterstützen: https://x.com/nolansym
Prost! Begeistert, um zu sehen, was Sie bauen!
Andere freie Waren

Cult UI ist eine Sammlung von wunderschön gestalteten React -Komponenten, die mit Radix UI und Rückenwind -CSS gebaut wurden. Diese Komponenten sind für die Benutzerfreundlichkeit und Integration optimiert, sodass es einfach ist, visuell ansprechende und funktionale Webanwendungen zu erstellen.
AI-Vorlage ist eine Vorlage in voller Stapel, die zum Erstellen von AI-anbetriebenen Anwendungen entwickelt wurde. Es nutzt Next.js, Rückenwind CSS, Supabase und Openai, um eine robuste Grundlage für die Entwicklung von ausgefeilten KI -Lösungen zu bieten.
Scrollen Sie nach oben