sveltekit supabase dashboard

SvelteKit Supabase Dashboard (BETA)

---

Einfaches Dashboard, inspiriert von der Supabase-Benutzeroberfläche, erstellt mit SvelteKit als Frontend und Supabase als Backend.

HAFTUNGSAUSSCHLUSS: Dieses Projekt ist noch nicht produktionsbereit. Der rollenbasierte Zugriff wurde nicht vollständig getestet. Die Nutzung erfolgt auf eigene Gefahr.

Demo

Probieren Sie hier verschiedene Zugriffsrollen und Ansichten aus.

Merkmale

• Von Supabase inspirierte Benutzeroberfläche
• Multi-Organisation
• Rollenbasierter Zugriff
• Benutzererstellung und -löschung in der Dashboard-Benutzeroberfläche
• Demoansichten für Tabellen und Diagramme
• Demomodus (Hinweise anzeigen und Datenbankaktualisierungen deaktivieren)

Technologien

• Svelte und SvelteKit als Anwendungsframework
• Supabase als Datenbank und Backend
• TailwindCSS als CSS-Framework
• DaisyUI als Tailwind CSS-Komponentenbibliothek
• Supabase Auth Helpers als Auth-Dienstprogramme für die Arbeit mit Supabase
• Benutzerdefinierte Supabase-Ansprüche für organisationsübergreifenden und rollenbasierten Zugriff
• Charts.js und svelte-chartjs für Diagramme
• Feder-Icons und schlanke Feder-Icons für Icons
• Schlanke Ladespinner zum Laden von Spinnern
• Vercel als Bereitstellungsplattform

TODO

• Verbessern Sie die Entwicklungsdokumente
• Beheben Sie TypeScript-Probleme
• Fügen Sie weitere Diagrammansichten hinzu
• Aktualisieren Sie supabase-js v2
• Benutzerprofile
• Hell/Dunkel-Modus
• Verbessern Sie die mobile Navigation
• PWA

Installation

Supabase einrichten

Erstellen Sie ein neues Projekt auf supabase.com und gehen Sie zu Einstellungen->API, um Ihre Projekt-URL und API-Schlüssel zu überprüfen

Klonen Sie das Repo

git clone https://github.com/xulioc/sveltekit-supabase-dashboard.git
cd sveltekit-supabase-dashboard

Umgebungsvariablen einrichten

Erstellen Sie eine neue .env Datei

cp .env.example .env

Bearbeiten Sie Ihre .env Datei so, dass sie mit Ihrer Projekt-URL und Ihren API-Schlüsseln übereinstimmt

 # SUPABASE
PUBLIC_SUPABASE_URL= " YOUR PROJECT URL "
PUBLIC_SUPABASE_ANON_KEY= " YOUR PROJECT ANON KEY "
PRIVATE_SUPABASE_SERVICE_KEY= " YOUR PROJECT SERVICE KEY "

Datenbank initialisieren

Führen Sie sql/init_databse.sql und sql/init_demo_data.sql im Supabase SQL Editor aus.

Installieren und ausführen

npm install

So starten Sie im Entwicklungsmodus:

npm run dev

So erstellen und starten Sie im Produktionsmodus:

npm run build
npm run preview

Einsetzen

Für die Bereitstellung auf Vercel folgen Sie bitte den Anweisungen hier.

Entwicklung

Weitere Entwicklungsdetails finden Sie hier.

Beitragen

Fühlen Sie sich frei, einen Beitrag zu leisten. Issues und Pull Requests sind willkommen.

Lizenz

MIT