Light

xulioc / sveltekit-supabase-dashboard Goto Github PK

View Code? Open in Web Editor NEW

134.0 6.0 27.0 1.11 MB

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

Home Page: https://sveltekit-supabase-dashboard.vercel.app/

License: MIT License

JavaScript 4.14% TypeScript 19.04% HTML 0.37% Svelte 70.28% CSS 0.40% PLpgSQL 5.77%

daisyui supabase sveltekit tailwindcss dashboard svelte admin-dashboard vercel sveltejs daisy-ui

sveltekit-supabase-dashboard's Introduction

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

sveltekit-supabase-dashboard's People

Contributors

Stargazers

Watchers

sveltekit-supabase-dashboard's Issues

You just doxed yourself.

Que pasa majo? Jejeje, he visto la captura y cagoendiez, galicia? Muy guapo el proyecto, le seguire de cerca.

can't populate Supabase using the SQL

Hello,
Great project!

Copy pasting https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/init_database.sql into supabase SQL Editor is not working for me.
First an error "near $", then "near select"
Any idea what I did wrong?

Have a great day!

This is GOLD!

Thank you for sharing this project.Finally I found a really good project.The only thing that its missing is the pwa.Keep this project updated, its very usefull.

Conflicting peer dependency: @sveltejs/[email protected]

I have cloned this repo to a fresh folder. Then I try to install Supabase CLI and get the following:

Larry@ASUS MINGW64 /c/__repos/_sv/svpinz (main)
$ npm install supabase --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @sveltejs/[email protected]
npm ERR! node_modules/@sveltejs/adapter-auto
npm ERR!   dev @sveltejs/adapter-auto@"^1.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @sveltejs/adapter-auto@"^1.0.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @sveltejs/[email protected]
npm ERR! node_modules/@sveltejs/kit
npm ERR!   peer @sveltejs/kit@"^1.0.0" from @sveltejs/[email protected]
npm ERR!   node_modules/@sveltejs/adapter-auto
npm ERR!     dev @sveltejs/adapter-auto@"^1.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\Larry\AppData\Local\npm-cache\_logs\2023-02-16T18_50_19_941Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Larry\AppData\Local\npm-cache\_logs\2023-02-16T18_50_19_941Z-debug-0.log

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.