Halo teman - teman Developers. Please READ THIS Carefully.
Terima kasih sudah tertarik untuk join Pipeline
Ini adalah contoh Dashboard yang dibangun menggunakan SvelteKit sebagai Frontend dan Supabase sebagai Database
Silahkan Explore Dan Clone Repository ini
Jika sudah maka tolong convert ke Vue JS menggunakan Nuxt Framework.
Dashboard Hanya Referensi Silahkan Berkreasi Sebebas Mungkin.
Jika sudah selesai membuat dashboard versi kamu silahkan.
- Kirim video perkenalan diri dan jelaskan fungsi apa yang kamu bangun
- Kamu bisa rekam menggunakan Loom.com atau vidline.com
- Dalam Proses ini kami akan menerima dua orang Developer [PAID] Intern BACKEND dan FRONTEND.
- Jika kamu lebih suka BACKEND menggunakan EXPRESS tidak usah terlalu fokus ke Frontend pakai saja component yang sudah ada
Ubah codenya dan bangun APA SAJA CHART YANG KAMU BISA untuk menunjukan ketertarikan di BACKEND MENGGUNAKAN EXPRESS JS
Demo Dashboard
- Untuk melihat Landing Page klik disini.
- Untuk melihat Dashboard Setelah Login klik disini
Fitur Yang Dimiliki
- User Interface dibuat dengan warna Supabase
- Dashboard bisa dipakai oleh banyak organisasi dengan akun ID masing - masing.
- Bisa memiliki beberapa tingkatan role akses di dalam sebuah organization.
- Bisa menambahkan dan menghapus pengguna dari dalam Dashboard.
- Tampilan Table dan Chart
- Demo mode (show hints and disable database updates)
Teknologi Yang Dipakai
- 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
Apa Yang Harus Dilakukan?
- Hubungkan Frontend dengan Supabase
- ==Tambahkan Data dan Chart Versi kamu.==
- Coba tambahkan beberapa dokumentasi code sehingga team lain bisa memahami apa fungsi yang tujuan dari sebuah code.
- Ada beberapa Typescript yang bermasalah.
- Tambahkan Role dan Organization UI --> [[Dokumentasi]]
- Improve mobile version
- Deploy to Vercel* optional
Cara Memulai
Bikin Akun Supabase
- Silahkan buat Proyek baru di supabase.com
- Pilih Settings API untuk melihat project URL and API keys kamu.
Clone Repo Ini
git clone https://github.com/christmantoro/sveltekit-supabase-chartjs.git
cd sveltekit-supabase-chartjs
MEMBUAT ENVIRONMENT VARIABLE ( sehingga terhubung dengan supabase)
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"
JALANKAN CODE DI SQL EDITOR SUPABASE
Execute sql/init_databse.sql and sql/init_demo_data.sql in Supabase SQL Editor.
Install & Jalankan
npm install
To start in development mode:
npm run dev
To build and start in production mode:
npm run build
npm run preview
KAMU BISA COBA 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
