ITSDojo adalah platform Gamified Learning Management System (LMS) modern yang dikembangkan menggunakan Next.js 15 (App Router), Socket.io (WebSockets), dan Drizzle ORM dengan Neon PostgreSQL. Platform ini dirancang untuk menghadirkan pengalaman belajar yang interaktif dan kompetitif bagi mahasiswa melalui fitur gamifikasi, evaluasi coding secara langsung, duel real-time, dan pemisahan hak akses yang jelas antara Mahasiswa, Asisten Dosen, Dosen, dan Admin.
- Framework: Next.js 15 (App Router) dengan TypeScript & Turbopack
- Database: Serverless PostgreSQL (Neon) & Drizzle ORM
- Real-time & WebSockets: Socket.io (server kustom
server.jsterintegrasi) - Styling: Tailwind CSS & Shadcn UI
- State Management: Zustand
- Rich Text Editor:
react-quill-new(WYSIWYG editor materi)
Ikuti instruksi langkah demi langkah berikut secara berurutan untuk memasang dan menjalankan proyek ITSDojo di komputer lokal Anda:
Pastikan Anda sudah menginstal:
- Node.js (versi LTS terbaru direkomendasikan)
- Akun Neon Console (atau instansi database PostgreSQL lokal yang aktif)
Buka terminal Anda, masuk ke direktori proyek, lalu pasang paket dependensi yang dibutuhkan:
# Install seluruh package dependensi proyek
npm installPenting: Seluruh dependensi utama (seperti three.js, socket.io, react-quill-new, zustand, framer-motion, dan komponen shadcn/ui) sudah terdaftar lengkap di package.json sehingga perintah di atas akan menginstal semuanya secara otomatis.
Buat sebuah berkas bernama .env di direktori utama (root) proyek, kemudian masukkan konfigurasi database Anda.
Catatan: Sangat disarankan untuk menggunakan Pooled Connection String jika Anda menggunakan Neon Database.
# Contoh isi berkas .env
DATABASE_URL="postgresql://neondb_owner:PASSWORD_ANDA@endpoint-aws-neon.tech/neondb?sslmode=require"Setelah kredensial database terpasang dengan benar di .env, jalankan perintah berikut untuk mensinkronisasikan berkas skema di db/schema.ts ke database PostgreSQL Anda secara otomatis:
npx drizzle-kit pushJalankan server Next.js lokal terintegrasi dengan WebSocket:
npm run devSetelah berjalan, buka tautan http://localhost:3000 di browser Anda.
Jika Anda ingin mengekspos aplikasi pengembangan lokal (http://localhost:3000) ke internet agar bisa diuji oleh orang lain (misal: mahasiswa/dosen) dari luar jaringan lokal secara global:
- Pastikan Anda sudah menginstal Cloudflare Tunnel (cloudflared).
- Pastikan server lokal Anda sudah berjalan (
npm run dev). - Buka terminal baru, jalankan perintah tunnel gratis berikut:
cloudflared tunnel --url http://localhost:3000
- Salin tautan publik bertipe
https://*.trycloudflare.comyang muncul di terminal dan bagikan ke penguji/mahasiswa.
Untuk memudahkan eksplorasi fitur dan alur kerja di ITSDojo, sistem login menggunakan mode simulasi instan (Demo Mode). Anda cukup mengeklik tombol masuk tanpa perlu memasukkan kata sandi rumit:
- Mahasiswa (👨🎓 Student View):
- Akses: Pilih role Mahasiswa saat login.
- Fitur: Menjelajahi roadmap pembelajaran dinamis, melakukan duel 1v1 secara real-time via WebSocket, mengumpulkan XP dan Gems, serta mengerjakan soal coding terintegrasi.
- Dosen (👨🏫 Instructor View):
- Akses: Pilih role Dosen saat login.
- Fitur: Mengelola materi secara detail (menambah modul, menulis rangkuman pelajaran dengan editor rich-text, menempelkan URL YouTube/Google Drive dengan auto-preview, mengunggah lampiran PDF/DOCX, dan merancang soal coding latihan beserta test cases-nya).
- Super Admin (🛠️ Admin View):
- Akses: Klik tombol jalan pintas developer "Bypass to Super Admin (Dev Only)" di bagian bawah kartu login.
- Fitur: Membuat kelas global baru secara keseluruhan, memantau data performa pengguna, serta melakukan Ploting Dosen (menugaskan dosen pengampu ke kelas-kelas yang aktif).
Jika Anda ingin melihat, menambah, atau memanipulasi data di database secara visual melalui antarmuka web (mirip dengan phpMyAdmin), jalankan perintah berikut di terminal baru:
npx drizzle-kit studioLalu buka tautan lokal yang tertera di terminal (biasanya https://local.drizzle.studio) untuk mengelola tabel secara langsung.