Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xulioc/sveltekit-supabase-dashboard
Dashboard inspired by Supabase UI and made with SvelteKit as frontend and Supabase as backend.
https://github.com/xulioc/sveltekit-supabase-dashboard
admin-dashboard charts-js chartsjs daisy-ui daisyui dashboard feather-icons supabase svelte sveltejs sveltekit tailwindcss vercel
Last synced: 3 months ago
JSON representation
Dashboard inspired by Supabase UI and made with SvelteKit as frontend and Supabase as backend.
- Host: GitHub
- URL: https://github.com/xulioc/sveltekit-supabase-dashboard
- Owner: xulioc
- License: mit
- Created: 2022-09-24T10:22:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T19:46:36.000Z (over 1 year ago)
- Last Synced: 2024-09-29T11:54:11.990Z (3 months ago)
- Topics: admin-dashboard, charts-js, chartsjs, daisy-ui, daisyui, dashboard, feather-icons, supabase, svelte, sveltejs, sveltekit, tailwindcss, vercel
- Language: Svelte
- Homepage: https://sveltekit-supabase-dashboard.vercel.app/
- Size: 1.09 MB
- Stars: 136
- Watchers: 6
- Forks: 27
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SvelteKit Supabase Dashboard (BETA)
---
## Simple dashboard inspired by Supabase UI made with [SvelteKit](https://kit.svelte.dev/) as frontend and [Supabase](https://supabase.com/) 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](https://sveltekit-supabase-dashboard.vercel.app/).
## 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](https://svelte.dev/) and [SvelteKit](https://kit.svelte.dev/) as application framework
- [Supabase](https://supabase.com/) as database and backend
- [TailwindCSS](https://tailwindcss.com/) as CSS framework
- [DaisyUI](https://daisyui.com/) as Tailwind CSS component library
- [Supabase Auth Helpers](https://github.com/supabase/auth-helpers) as Auth utilities for working with Supabase
- [Supabase custom claims](https://github.com/supabase-community/supabase-custom-claims) for multi organization and role based access
- [Charts.js](https://www.chartjs.org/) and [svelte-chartjs](https://www.npmjs.com/package/svelte-chartjs) for charts
- [Feather Icons](https://feathericons.com/) and [svelte-feather-icons](https://www.npmjs.com/package/svelte-feather-icons) for icons
- [svelte-loading-spinners](https://www.npmjs.com/package/svelte-loading-spinners) for loading spinners
- [Vercel](https://vercel.com/) 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](https://supabase.com/) and go to Settings->API to check your project URL and API keys
### Clone the repo
```bash
git clone https://github.com/xulioc/sveltekit-supabase-dashboard.git
cd sveltekit-supabase-dashboard
```
### Setup environment variables
Create a new `.env` file
```bash
cp .env.example .env
```
Edit your `.env` file to match your project URL and API keys
```bash
# 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
```bash
npm install
```
To start in development mode:
```bash
npm run dev
```
To build and start in production mode:
```bash
npm run build
npm run preview
```
### Deploy
To deploy to Vercel please follow instructions [here](https://vercel.com/guides/deploying-svelte-with-vercel).
## Development
Find more development details [here](https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/README_DEV.md).
## Contribute
Feel free to contribute. Issues and Pull Requests are welcome.
## License
[MIT](https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/LICENSE)