ProjectsJuly 5, 2026

Rumio.id: Platform Marketing & Eksplorasi Properti Generasi Baru

Rumio.id: Platform Pemasaran & Eksplorasi Properti

Rumio.id adalah platform pemasaran dan eksplorasi properti komprehensif yang dirancang untuk menghubungkan para pencari properti, pemilik, dan agen (scout). Sistem ini memanfaatkan kemampuan teknologi web modern untuk menghadirkan pengalaman interaktif yang imersif (seperti tur virtual 360°) dengan tetap mempertahankan infrastruktur administratif yang berkinerja tinggi, aman, dan dapat diskalakan.

Arsitektur Sistem

Rumio.id dibangun di atas arsitektur full-stack modern yang menggunakan paradigma Next.js App Router, yang menyatukan lapisan frontend, API, dan logika backend ke dalam satu ekosistem yang kohesif.

1. Lapisan Presentasi (Frontend)

Framework & Rendering: Menggunakan Next.js Server Components dan Client Components untuk meminimalkan beban JavaScript di sisi klien. Halaman statis di-cache secara otomatis pada edge, sedangkan dasbor dinamis dan formulir memanfaatkan server-side rendering (SSR).
Mesin Styling: Menggunakan Tailwind CSS v4 untuk menghasilkan CSS yang responsif, berbasis utilitas, dan sangat optimal.
Media Interaktif: Konteks WebGL dimanfaatkan melalui Three.js dan Photo Sphere Viewer untuk menghadirkan panorama 360 derajat interaktif pada 60fps yang dioptimalkan baik untuk desktop maupun seluler (kontrol geser satu jari).
Pengalaman Pengguna (UX) yang Halus: Lenis memberikan pengalaman menggulir (scrolling) yang mulus, sementara Lucide React memastikan ikonografi yang konsisten dan elegan.

2. Logika Aplikasi & Lapisan API (Backend)

Next.js API Routes & Server Actions: Platform ini secara ekstensif menggunakan Next.js Server Actions untuk mutasi data berbasis formulir yang aman (misalnya: Registrasi Scout, Pemesanan Paket). API Route Handlers mengelola pengambilan data dinamis dan integrasi seperti ekstraksi metadata OpenGraph.
Sistem Keamanan Autentikasi: Dilindungi melalui NextAuth.js, yang mengelola sesi dengan andal, verifikasi kredensial yang aman menggunakan Bcrypt.js, dan kontrol akses berbasis peran (RBAC) untuk memastikan hanya administrator berwenang yang dapat mengakses CMS dan Dasbor.
Manajemen Konten (CMS): Sistem blogging berbasis rich-text terintegrasi yang didukung oleh Tiptap (editor headless) dan pemrosesan MDX, memungkinkan administrator menyusun konten web yang kaya visual dan valid secara semantik.

3. Lapisan Penyimpanan Data (Database)

ORM: Prisma (v6) bertindak sebagai jembatan tipe-aman (strictly-typed) antara logika aplikasi dan database.
Optimasi Kueri: Menerapkan deduplikasi kueri tingkat lanjut dan pengambilan field secara selektif untuk mencegah masalah kueri N+1 serta meminimalkan penggunaan RAM pada server.
Struktur Data Relasional: Database mencakup skema terstruktur untuk Properti, Scouts, Paket, Pesanan, Postingan Blog, dan direktori geospasial/lokasi yang kompleks (Provinsi, Kota, Kecamatan) untuk pencarian properti yang akurat.

4. Arsitektur Keamanan & Performa

Mitigasi XSS: Seluruh masukan pengguna dan CMS disanitasi secara ketat menggunakan Sanitize-html sebelum di-render.
Pembatasan Laju (Rate Limiting): Formulir publik dan endpoint API dilengkapi mekanisme pembatasan laju yang tangguh untuk mencegah penyalahgunaan bot dan kelelahan sumber daya akibat serangan bergaya DDOS.
SEO Dinamis: Menghasilkan gambar OpenGraph dan metadata dinamis untuk properti dan blog secara otomatis, meningkatkan kualitas pratinjau tautan di media sosial dan visibilitas pada mesin pencari.

Rincian Tumpukan Teknologi (Tech Stack)

Framework Utama: Next.js 16.2.9 (App Router) — Orkestrasi full-stack, perutean, SSR/SSG, dan Server Actions.
Library UI: React 19 — Manajemen siklus hidup komponen dan DOM.
Styling: Tailwind CSS v4 — Pengembangan UI yang cepat dengan pembersihan kode tak terpakai secara otomatis.
Database ORM: Prisma v6 — Akses database yang aman (type-safe), migrasi skema, dan pembuatan kueri.
Autentikasi: NextAuth.js — Manajemen sesi yang aman dan hashing kredensial.
Mesin Virtual Tour: Photo Sphere Viewer — Library inti untuk merender tur properti 360° yang interaktif.
Rendering 3D: Three.js — Mesin grafis WebGL yang menggerakkan tur virtual.
Editor Rich Text: Tiptap & Ekstensi — Editor WYSIWYG headless untuk penulisan konten blog dan deskripsi properti.
Visualisasi Data: Recharts — Komponen React untuk merender grafik analitik pada dasbor secara dinamis.
Keamanan: DOMPurify / Sanitize-html — Menghapus skrip berbahaya dari masukan pengguna sebelum diolah.
Server Deployment: Node.js (Custom Server) — Arsitektur server.js kustom untuk mendukung Next.js secara mulus pada lingkungan VPS tradisional seperti Hostinger.

Struktur Direktori (Folder Structure)

Proyek ini terorganisir dengan arsitektur modular di bawah direktori src/ yang merupakan inti dari Next.js App Router:

Text

rumio.id/
├── prisma/               # Konfigurasi Prisma, skema database (schema.prisma), dan migrasi.
├── public/               # Aset statis publik seperti gambar, ikon, dan logo platform.
├── src/
│   ├── app/              # (App Router) Definisi halaman, layout, dan rute API.
│   │   ├── actions/      # Next.js Server Actions untuk mutasi data (mis: hapus properti, simpan blog).
│   │   ├── admin/        # Halaman dan tata letak khusus untuk Dasbor Administrator (dilindungi NextAuth).
│   │   ├── api/          # Route Handlers API backend (mis: scraping OpenGraph, endpoint rate-limited).
│   │   ├── blog/         # Halaman publik untuk membaca artikel blog.
│   │   ├── properti/     # Halaman penjelajahan dan Virtual Tour 360 properti.
│   │   └── ...           # Rute lain seperti login, pricing, dan property-scout.
│   ├── components/       # Komponen React yang dapat digunakan ulang (Reusable UI).
│   │   ├── admin/        # Komponen spesifik dasbor (Tabel, Form, Recharts, Custom Confirm Dialog).
│   │   ├── ui/           # Komponen UI dasar (Button, Modal, Toast).
│   │   └── Section/      # Komponen layout untuk landing page (Hero, Features).
│   ├── data/             # Data statis (misalnya direktori Provinsi/Kota untuk Scout).
│   ├── lib/              # Fungsi utilitas (Prisma client instance, konfigurasi NextAuth, utils).
│   └── types/            # Definisi tipe TypeScript dan interface data.
├── package.json          # Definisi dependensi dan skrip (build, dev, start).
├── next.config.ts        # Konfigurasi build Next.js.
└── server.js             # Skrip custom server Node.js untuk kompatibilitas deployment di VPS/cPanel.

Related projects

Panggih Sedulur: Kuisioner Minat Bakat UKM Unsoed

Platform kuisioner interaktif untuk UKM Unsoed dengan sistem scoring 5 kategori utama, branching questions, dan rekomendasi personalisasi.

Read case study View project

Website Resmi BEM Universitas Jenderal Soedirman

Pengembangan dan pengelolaan website resmi Badan Eksekutif Mahasiswa Universitas Jenderal Soedirman (BEM-U) menggunakan WordPress, Elementor, dan custom inject HTML.

Read case study View project

URL Shortener BEM Unsoed Edition

Pengembangan aplikasi pemendek URL profesional dengan antarmuka Glassmorphism untuk kebutuhan publikasi BEM Universitas Jenderal Soedirman.

Read case study View project

GrowTo: Platform Direktori Delivery Order Purwokerto

Pengembangan platform informasi layanan delivery order untuk area Purwokerto sebagai Final Project program Soedirman Digital School 2025.

Read case study View project

NiceGuy Sound Board

Buat para streamer laper yang pengen naik kereta Bigmo via Soundboard telah kami sediakan aplikasi yang sudah sepaket dengan sound2 yang sering digunakan oleh rektor kita BIGMO.

Read case study View project

Edu-Tajwid: Platform Edukasi Digital Ilmu Tajwid

TajwidApps adalah platform edukasi berbasis web yang dirancang untuk membantu pengguna mempelajari hukum bacaan Al-Qur'an (Tajwid), makharijul huruf, dan sifat huruf secara fasih dan tartil.

Read case study View project

Transformasi Digital Rabiha Tour & Travel: Branding dan Pengembangan Website

Pengembangan identitas visual, desain konten media sosial menggunakan CorelDRAW & Photoshop, serta pembangunan website company profile menggunakan WordPress Elementor.

Read case study

Najmi Calculator: Kalkulator Interaktif dengan Fitur Real-Time

Pengembangan aplikasi kalkulator responsif menggunakan Vanilla JavaScript dengan fitur Dark Mode dan sistem Error Handling kustom.

Read case study View project