sveltekit supabase dashboard

SvelteKit Supabase 대시보드(베타)

---

SvelteKit을 프런트엔드로, Supabase를 백엔드로 사용하여 만든 Supabase UI에서 영감을 받은 간단한 대시보드입니다.

면책조항: 이 프로젝트는 아직 생산 준비가 되어 있지 않습니다. 역할 기반 액세스는 완전히 테스트되지 않았습니다. 자신의 책임하에 사용하십시오.

데모

여기에서 다양한 액세스 역할과 보기를 시도해 보세요.

특징

• Supabase에서 영감을 받은 UI
• 다중 조직
• 역할 기반 액세스
• 대시보드 UI에서 사용자 생성 및 삭제
• 테이블 및 차트 데모 보기
• 데모 모드(힌트 표시 및 데이터베이스 업데이트 비활성화)

기술

• 애플리케이션 프레임워크로서의 Svelte 및 SvelteKit
• 데이터베이스 및 백엔드로 Supabase
• CSS 프레임워크로서의 TailwindCSS
• Tailwind CSS 구성 요소 라이브러리인 DaisyUI
• Supabase 작업을 위한 인증 유틸리티인 Supabase 인증 도우미
• 다중 조직 및 역할 기반 액세스를 위한 Supabase 사용자 정의 클레임
• 차트용 Charts.js 및 svelte-chartjs
• 깃털 아이콘 및 아이콘용 날씬한 깃털 아이콘
• 스피너 로딩을 위한 스벨트 로딩 스피너
• 배포 플랫폼으로서의 Vercel

TODO

• 개발 문서 개선
• TypeScript 문제 수정
• 더 많은 차트 보기 추가
• supabase-js v2 업데이트
• 사용자 프로필
• 밝음/어두움 모드
• 모바일 탐색 개선
• PWA

설치

수파베이스 설정

supabase.com에서 새 프로젝트를 생성하고 설정->API로 이동하여 프로젝트 URL과 API 키를 확인하세요.

저장소 복제

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

환경 변수 설정

새 .env 파일 만들기

cp .env.example .env

프로젝트 URL 및 API 키와 일치하도록 .env 파일을 편집하세요.

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

데이터베이스 초기화

Supabase SQL Editor에서 sql/init_databse.sql 및 sql/init_demo_data.sql 실행합니다.

설치 및 실행

npm install

개발 모드에서 시작하려면:

npm run dev

프로덕션 모드에서 빌드하고 시작하려면 다음 안내를 따르세요.

npm run build
npm run preview

배포

Vercel에 배포하려면 여기의 지침을 따르세요.

개발

자세한 개발 세부 정보는 여기에서 확인하세요.

기여하다

자유롭게 기여해 주세요. 이슈 및 Pull Request를 환영합니다.

특허

MIT