Playground
MFM – Beranda

Pustaka

31 proyek

Semua proyek di ekosistem pengembang saya, dari produk yang sudah rilis hingga eksperimen.

Unggulan

31 dari 31 proyek

  • UnggulanEkosistemAktif

    Pintu gerbang utama ekosistem developer saya, dibangun dengan Next.js, React Three Fiber, dan Three.js. Proyek ditampilkan sebagai semesta 3D interaktif berisi dunia-dunia yang melayang, lengkap dengan tombol jeda animasi dan navigasi keyboard. Tautan dan detail proyeknya diambil dari konfigurasi kanonis yang dipakai bersama oleh semua aplikasi saya.

    Next.jsReact Three FiberThree.js

  • UnggulanAplikasi WebAktif

    Aplikasi presentasi interaktif yang mengubah slide menjadi dunia pixel-art yang bisa dimainkan: penonton berjalan menyusuri tiap adegan dan membuka checkpoint-nya dengan ritme sendiri. Tersedia pustaka lokal untuk membuat, mengimpor, dan memakai template presentasi, penyimpanan di browser, serta mode game terpisah dengan alur cerita. Dibangun dengan Next.js, TypeScript, dan game engine Phaser.

    Next.jsReact.jsTypeScript+1

  • UnggulanAplikasi WebAktif

    Page builder visual untuk menyusun situs multi-halaman dari blok tata letak, konten, media, dan formulir. Fiturnya mencakup pengeditan drag-and-drop, pratinjau desktop, tablet, dan mobile, undo/redo, template awal, serta ekspor HTML. Proyek disimpan di browser. Game puzzle pendampingnya, Restore Pages, memakai blok penyusun yang sama.

    Next.jsReact.jsdnd-kit

  • UnggulanAplikasi WebAktif

    Marketplace perencanaan pernikahan untuk calon pengantin dan vendor lokal di Indonesia. Saya mengembangkan frontend Next.js-nya: pencarian vendor dan layanan dengan filter, kalkulator anggaran, checklist persiapan, alur akun, dan dukungan dua bahasa (Inggris dan Indonesia). Backend Go dikerjakan oleh kolaborator.

    Next.jsReact.jsi18n

  • UnggulanGameAktif

    Game restorasi dunia 3D berbasis browser dengan tiga mode untuk rentang usia berbeda. Di mode Code Adventure, pemain menulis JavaScript sungguhan di editor dalam game untuk memprogram robot, lalu menjalankan, menghentikan, dan mengatur ulang kodenya sambil melihat robot beraksi di dunia 3D. Tersedia dalam bahasa Inggris dan Indonesia.

    Three.jsViteJavaScript

  • UnggulanGameAktif

    Kumpulan 18 game mini untuk anak kecil, mulai dari puzzle, memori, dan permainan edukatif hingga game multipemain, dengan rekomendasi game sesuai usia. Dibangun dengan Vite dan JavaScript murni sebagai PWA yang bisa dipasang dan tetap berjalan offline, dengan dua bahasa (Indonesia dan Inggris), tema terang dan gelap, serta dukungan pengaturan animasi berkurang.

    ViteJavaScriptPWA

  • UnggulanAplikasi WebDijeda

    Frontend platform pendidikan untuk sekolah. Aplikasi pertamanya adalah antarmuka administrasi sekolah dengan akses berbasis peran, seperti admin sekolah, keuangan, guru, siswa, dan orang tua; aplikasi LMS, keterampilan, dan komunitas masih direncanakan. Saat ini memakai data tiruan (mock) dan pengembangannya sedang dijeda.

    Next.jsReact.js

  • EkosistemAktif

    Sumber data tunggal untuk ekosistem developer saya: metadata proyek, skema JSON, skrip validasi, dan konfigurasi hasil generate yang dipakai aplikasi-aplikasi saya, termasuk CV ini. Validasinya berjalan di GitHub Actions.

    JSON SchemaNode.jsGitHub Actions

  • Alat PengembangSelesai

    Skrip Bash yang saya tulis sebagai instruktur bootcamp untuk mengelola repositori GitHub Classroom para mentee sekaligus: meng-clone tugas, mengarsipkan dan membuka kembali arsip repositori dengan GitHub CLI, menginstal dependensi, dan menjalankan tes.

    BashGitHub CLI

  • PembelajaranDijeda

    Repositori belajar publik yang terinspirasi roadmap.sh, berisi catatan bahasa pemrograman, proyek latihan, serta jalur belajar berdasarkan peran dan keterampilan.

    Node.jsPythonFastAPI+2

  • PembelajaranAktif

    RPG pixel-art (early access) untuk belajar JavaScript lewat eksplorasi, pertarungan, dan ujian guild. Dibangun dengan React, Phaser 3, TypeScript, Vite, dan Zustand.

    React.jsPhaserTypeScript+2

  • EkosistemAktif

  • Alat PengembangAktif

  • GameAktif

  • PembelajaranAktif

  • PembelajaranAktif

  • Aplikasi WebAktif

  • EkosistemAktif

  • Alat PengembangAktif

  • EksperimenDijeda

  • Aplikasi WebDijeda

  • Aplikasi WebDijeda

  • Aplikasi WebDijeda

    A demo inventory management application that uses mock data.

  • EksperimenDijeda

  • Aplikasi WebDijeda

  • GameDijeda

  • Aplikasi WebDijeda

  • Alat PengembangSelesai

  • PembelajaranSelesai

  • Aplikasi WebSelesai

  • Aplikasi WebSelesai