Irma Verse adalah platform web komprehensif yang dirancang untuk kebutuhan edukasi dan komunitas. Aplikasi ini mengintegrasikan Learning Management System (LMS) dengan fitur sosial interaktif, memungkinkan pengguna untuk belajar, berkompetisi, dan berinteraksi secara real-time.
Sistem ini dibangun untuk memfasilitasi interaksi antara instruktur dan siswa/member melalui berbagai fitur unggulan:
- Akademi Digital: Manajemen materi pembelajaran, jadwal kelas, dan presensi otomatis.
- Kompetisi: Platform untuk mengadakan dan mengelola lomba atau event.
- Interaksi Real-time: Ruang obrolan (Chat Rooms) dan diskusi langsung antara instruktur dan member.
- Informasi Terpusat: Portal berita dan pengumuman kegiatan.
Project ini menggunakan teknologi modern full-stack berbasis TypeScript:
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS & Shadcn UI
- Database: MySQL
- ORM: Prisma
- Authentication: NextAuth.js (Auth.js)
- Real-time Engine: Socket.io (Custom Server)
- Package Manager: PNPM
- Manajemen Materi: Instruktur dapat mengunggah dan menyusun materi pelajaran.
- Jadwal & Presensi: Kalender kegiatan dan sistem absensi digital.
- Quiz & Penilaian: (Opsional/Planned) Fitur evaluasi pembelajaran.
- Listing Kompetisi: Daftar lomba yang tersedia beserta detail pendaftarannya.
- Leaderboard: Papan peringkat untuk memacu semangat kompetisi member.
- Real-time Chat: Fitur kirim pesan instan antar pengguna atau dalam grup.
- Pengumuman (News): Portal berita terbaru seputar komunitas.
- Profil Pengguna: Kustomisasi profil, avatar, dan status kehadiran (online/offline).
- Dashboard Statistik: Ringkasan data pengguna, materi, dan aktivitas.
- Manajemen User: Kontrol penuh atas data member dan hak akses.
Gambaran struktur direktori utama project (Next.js App Router):
irma-verse/
├── app/ # Halaman dan API Routes (Next.js App Router)
│ ├── academy/ # Halaman modul akademi
│ ├── admin/ # Dashboard khusus admin
│ ├── api/ # Backend API endpoints
│ ├── auth/ # Halaman login/register
│ ├── chat-rooms/ # Interface chat
│ ├── competitions/ # Halaman kompetisi
│ └── materials/ # Halaman materi pelajaran
├── components/ # Komponen UI Reusable (Buttons, Cards, Modals)
│ ├── ui/ # Komponen dasar (Shadcn/Custom)
├── lib/ # Utilitas, konfigurasi Prisma, Auth, & Socket
├── prisma/ # Skema database & file migrasi
├── public/ # Aset statis (Gambar, Suara notifikasi)
├── server.ts # Konfigurasi custom server (untuk Socket.io)
└── package.json # Dependensi project
Pastikan Anda sudah menginstal Node.js dan PNPM.
- Clone Repository
git clone [https://github.com/raditt10/irma-verse.git](https://github.com/raditt10/irma-verse.git)
cd irma-verse
- Instal Dependensi
pnpm install
- Konfigurasi Environment
Buat file
.envdi root folder dan sesuaikan variabel berikut:
DATABASE_URL="mysql://user:password@localhost:3306/db_irmaverse"
NEXTAUTH_SECRET="rahasia_anda_disini"
NEXTAUTH_URL="http://localhost:3000"
# Tambahkan variabel lain jika diperlukan (misal: Cloudinary/Uploadthing)
- Setup Database (Prisma) Jalankan migrasi untuk membuat tabel di database MySQL Anda:
npx prisma generate
npx prisma migrate dev --name init
(Opsional) Jalankan seeder untuk data awal:
npx prisma db seed
- Jalankan Project Karena menggunakan custom server untuk Socket.io, gunakan perintah:
pnpm dev
Akses aplikasi di http://localhost:3000.
Ingin berkontribusi? Silakan ikuti langkah standar GitHub Flow:
- Fork repository.
- Buat branch fitur (
git checkout -b fitur-baru). - Commit perubahan (
git commit -m 'Menambah fitur X'). - Push ke branch (
git push origin fitur-baru). - Buat Pull Request.
Hak cipta sepenuhnya milik pengembang Syntax13.