Sistem Manajemen Pembelajaran (LMS)
(Next.js dan Express.js)
Perkenalan
Selamat datang di aplikasi LMS-sistem manajemen pembelajaran yang canggih yang dirancang untuk memberikan pengalaman belajar online yang interaktif dan komprehensif. Dibangun dengan Next.js dan Express.js, platform ini dilengkapi dengan fitur canggih untuk manajemen kursus, keterlibatan siswa, dan pengalaman pengguna yang aman dan mulus.
Beberapa pratinjau UI
Halaman Masuk/Masuk
Otentikasi Panitera untuk Pengguna yang Aman
Halaman kursus
Guru/admin untuk melihat daftar kursus
Kursus/: Halaman Kursus
Guru/admin untuk membuat, mengedit, menghapus, dan melihat kursus detail lengkap
Halaman bab
Bab Teacher/Admin to (buat, edit, hapus, dan lihat detail lengkap) untuk kursus
Halaman analitik
Guru/admin untuk menganalisis berapa banyak kursus yang dijual dan berapa banyak pendapatan yang diperoleh
Halaman bab
Pelanggan dapat mendaftar untuk kursus, melihat bab gratis
Strip untuk proses pembayaran
Pelanggan memeriksa proses pembayaran
Halaman bab
Pelanggan dapat melihat lampiran kursus, kemajuan mereka setelah membeli kursus
Halaman dasbor
Pelanggan dapat melihat kursus kemajuan mereka, kursus selesai
Menu/peringatan bilah sisi
antarmuka yang responsif dan ramah pengguna
Fitur utama
Penciptaan & Manajemen Kursus Dinamis: Mudah membuat dan mengelola konten kursus, termasuk gambar dan lampiran. Otentikasi yang kuat: Otentikasi pengguna yang aman menggunakan Panitera. Playback & Unggah Video Interaktif: Terintegrasi dengan MUX untuk pengalaman video yang lancar. Pembayaran Aman: Integrasi garis untuk menangani pembayaran dan langganan kursus. Antarmuka yang ramah pengguna: Desain modern dan responsif dengan CSS tailwind. Dokumen dan gambar unggahan: Memanfaatkan pengunggahan untuk manajemen file bebas repot.
Teknologi digunakan
Frontend
Teknologi yang digunakan:
- Bereaksi 18.2.0
- Next.js 13.4.12
- Tailwind CSS 3.3.5
- Bentuk react hook 7.48.2
- React-quill 2.0.0
- Recharts 2.10.3
- Lucide-react 0,294.0
Perpustakaan Kunci:
- @Clerk/NextJS 4.27.2 : Untuk otentikasi pengguna yang aman.
- @mux/mux-node dan @mux/mux-player-react 7.3.3 & 2.3.0 : Untuk pemutaran video dan unggahan.
- @Unggah/Bereaksi 6.0.2 : Untuk menangani unggahan dokumen dan gambar.
- React-Hot-Toast 2.4.1 : Untuk pemberitahuan yang elegan.
- Zustand 4.4.7 : Manajemen Negara.
UI/UX Peningkatan:
- Tailwind Gabungkan 2.0.0 : Untuk mengoptimalkan kelas CSS Tailwind.
- CMDK 0.2.0 : Antarmuka menu perintah.
- React-dropzone 14.2.3 : Seret dan lepas unggahan file.
- @tanstack/react-table 8.10.7 : Untuk membangun dan mengelola tabel.
- @radix-ui/react-dialog , @radix-ui/react-dropdown-menu , dll., Untuk komponen UI canggih.
Fitur:
- Antarmuka interaktif dan ramah pengguna.
- Integrasi mulus dengan streaming video dan layanan unggahan file.
- Alat penciptaan dan manajemen kursus yang komprehensif.
- Desain responsif memastikan kompatibilitas di berbagai perangkat.
Alat Pengembangan:
- ESLINT 8.54.0 : Untuk Code Linting.
- PostCSS 8.4.31 dan Autoprefixer 10.4.16 : Untuk pemrosesan CSS.
- TypeScript 5.3.2 : Untuk memeriksa jenis.
Backend
Teknologi Utama:
- Express.js 4.18.2 : Tulang punggung server, menangani perutean dan middleware.
- Mongoose 8.0.2 : ODM untuk MongoDB, Menyederhanakan Interaksi Database.
- Node.js: Lingkungan runtime untuk mengeksekusi JavaScript di sisi server.
Database:
- MongoDB: Database NoSQL yang digunakan untuk menyimpan data aplikasi.
Perpustakaan dan middleware utama:
- dotenv 16.3.1 : Untuk mengelola variabel lingkungan.
- Nodemon 3.0.2 (pengembangan): Untuk memulai ulang server secara otomatis selama pengembangan.
Fitur:
- Titik akhir API istirahat yang kuat untuk pengambilan data dan manipulasi.
- Koneksi aman ke database dengan penanganan kueri yang efisien.
- Arsitektur yang dapat diskalakan yang cocok untuk memperluas fitur dan basis pengguna.
Keamanan dan otentikasi:
- Langkah -langkah keamanan terintegrasi untuk titik akhir API.
- Logika otentikasi dan otorisasi untuk melindungi data pengguna.
Alat Pengembangan:
- Berbagai paket NPM untuk meningkatkan fungsionalitas dan efisiensi.
- Pos untuk menguji dan memvalidasi titik akhir API.
Integrasi:
- Stripe untuk Pemrosesan Pembayaran: Terintegrasi dengan Webhooks Stripe untuk menangani transaksi.
- Layanan pihak ketiga lainnya seperti yang disyaratkan oleh aplikasi.
