xulioc/sveltekit-supabase-dashboard

Dashboard inspired by Supabase UI and made with SvelteKit as frontend and Supabase as backend.

SvelteKit Supabase Dashboard (BETA)

---

Simple dashboard inspired by Supabase UI made with SvelteKit as frontend and Supabase as backend.

DISCLAIMER: This project is not production ready. Role based access is not fully tested. Use at your own risk.

Demo

Try different access roles and views here.

Features

• Supabase inspired UI
• Multi organization
• Role based access
• User creation and deletion in dashboard UI
• Tables & Charts demo views
• Demo mode (show hints and disable database updates)

Technologies

• Svelte and SvelteKit as application framework
• Supabase as database and backend
• TailwindCSS as CSS framework
• DaisyUI as Tailwind CSS component library
• Supabase Auth Helpers as Auth utilities for working with Supabase
• Supabase custom claims for multi organization and role based access
• Charts.js and svelte-chartjs for charts
• Feather Icons and svelte-feather-icons for icons
• svelte-loading-spinners for loading spinners
• Vercel as deployment platform

TODO

• Improve development docs
• Fix TypeScript issues
• Add more chart views
• Update supabase-js v2
• User profiles
• Light/Dark mode
• Improve mobile navigation
• PWA

Installation

Setup Supabase

Create new project at supabase.com and go to Settings->API to check your project URL and API keys

Clone the repo

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

Setup environment variables

Create a new .env file

cp .env.example .env

Edit your .env file to match your project URL and API keys

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

Initialize database

Execute sql/init_databse.sql and sql/init_demo_data.sql in Supabase SQL Editor.

Install & run

npm install

To start in development mode:

npm run dev

To build and start in production mode:

npm run build
npm run preview

Deploy

To deploy to Vercel please follow instructions here.

Development

Find more development details here.

Contribute

Feel free to contribute. Issues and Pull Requests are welcome.

License

MIT