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

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

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes