ProjectsJuly 5, 2026

Rumio.id: Next-Generation Property Marketing & Exploration Platform

Rumio.id: Property Marketing & Exploration Platform

Rumio.id is a comprehensive property marketing and exploration platform designed to connect property seekers, owners, and agents (scouts). The system leverages modern web technology capabilities to deliver immersive interactive experiences (such as 360° virtual tours) while maintaining a highly performant, secure, and scalable administrative infrastructure.

System Architecture

Rumio.id is built on a modern full-stack architecture using the Next.js App Router paradigm, which unifies the frontend layer, API, and backend logic into a single cohesive ecosystem.

1. Presentation Layer (Frontend)

Framework & Rendering: Utilizes Next.js Server Components and Client Components to minimize client-side JavaScript overhead. Static pages are automatically cached at the edge, while dynamic dashboards and forms utilize server-side rendering (SSR).
Styling Engine: Uses Tailwind CSS v4 to generate responsive, utility-based, and highly optimized CSS.
Interactive Media: WebGL context is leveraged via Three.js and Photo Sphere Viewer to deliver interactive 360-degree panoramas at 60fps, optimized for both desktop and mobile (single-finger swipe controls).
Smooth User Experience (UX): Lenis provides a seamless scrolling experience, while Lucide React ensures consistent and elegant iconography.

2. Application Logic & API Layer (Backend)

Next.js API Routes & Server Actions: The platform extensively uses Next.js Server Actions for secure form-based data mutations (e.g., Scout Registration, Package Ordering). API Route Handlers manage dynamic data fetching and integrations like OpenGraph metadata extraction.
Authentication Security System: Secured via NextAuth.js, which reliably manages sessions, secure credential verification using Bcrypt.js, and Role-Based Access Control (RBAC) to ensure only authorized administrators can access the CMS and Dashboard.
Content Management (CMS): An integrated rich-text blogging system powered by Tiptap (headless editor) and MDX processing, allowing administrators to compose visually rich and semantically valid web content.

3. Data Storage Layer (Database)

ORM: Prisma (v6) acts as a strictly-typed bridge between the application logic and the database.
Query Optimization: Implements advanced query deduplication and selective field fetching to prevent N+1 query issues and minimize server RAM usage.
Relational Data Structure: The database includes structured schemas for Properties, Scouts, Packages, Orders, Blog Posts, and a complex geospatial/location directory (Province, City, District) for precise property searches.

4. Security & Performance Architecture

XSS Mitigation: All user inputs and CMS content are strictly sanitized using Sanitize-html before being rendered.
Rate Limiting: Public forms and API endpoints are equipped with robust rate-limiting mechanisms to prevent bot abuse and resource exhaustion from DDOS-style attacks.
Dynamic SEO: Automatically generates dynamic OpenGraph images and metadata for properties and blogs, enhancing the quality of link previews on social media and visibility on search engines.

Technology Stack Details

Core Framework: Next.js 16.2.9 (App Router) — Full-stack orchestration, routing, SSR/SSG, and Server Actions.
UI Library: React 19 — Component lifecycle and DOM management.
Styling: Tailwind CSS v4 — Rapid UI development with automatic unused code purging.
Database ORM: Prisma v6 — Type-safe database access, schema migrations, and query generation.
Authentication: NextAuth.js — Secure session management and credential hashing.
Virtual Tour Engine: Photo Sphere Viewer — Core library for rendering interactive 360° property tours.
3D Rendering: Three.js — WebGL graphics engine powering the virtual tours.
Rich Text Editor: Tiptap & Extensions — Headless WYSIWYG editor for writing blog content and property descriptions.
Data Visualization: Recharts — React components for dynamically rendering analytic charts on the dashboard.
Security: DOMPurify / Sanitize-html — Stripping malicious scripts from user inputs before processing.
Server Deployment: Node.js (Custom Server) — Custom server.js architecture to seamlessly support Next.js on traditional VPS environments like Hostinger.

Directory Structure (Folder Structure)

This project is organized with a modular architecture under the src/ directory, which is the core of the Next.js App Router:

Text

rumio.id/
├── prisma/               # Prisma configuration, database schema (schema.prisma), and migrations.
├── public/               # Public static assets like images, icons, and platform logos.
├── src/
│   ├── app/              # (App Router) Page definitions, layouts, and API routes.
│   │   ├── actions/      # Next.js Server Actions for data mutation (e.g., delete property, save blog).
│   │   ├── admin/        # Specific pages and layouts for the Administrator Dashboard (NextAuth protected).
│   │   ├── api/          # Backend API Route Handlers (e.g., OpenGraph scraping, rate-limited endpoints).
│   │   ├── blog/         # Public pages for reading blog articles.
│   │   ├── properti/     # Property exploration and 360 Virtual Tour pages.
│   │   └── ...           # Other routes like login, pricing, and property-scout.
│   ├── components/       # Reusable React UI components.
│   │   ├── admin/        # Dashboard-specific components (Tables, Forms, Recharts, Custom Confirm Dialog).
│   │   ├── ui/           # Basic UI components (Button, Modal, Toast).
│   │   └── Section/      # Layout components for landing pages (Hero, Features).
│   ├── data/             # Static data (e.g., Province/City directories for Scouts).
│   ├── lib/              # Utility functions (Prisma client instance, NextAuth config, utils).
│   └── types/            # TypeScript type definitions and data interfaces.
├── package.json          # Dependency definitions and scripts (build, dev, start).
├── next.config.ts        # Next.js build configuration.
└── server.js             # Node.js custom server script for deployment compatibility on VPS/cPanel.

Related projects

Panggih Sedulur: Unsoed Student Club Aptitude Questionnaire

An interactive questionnaire platform for Unsoed student clubs, featuring a 5-category scoring system, branching questions, and personalized recommendations.

Read case study View project

Official Website of BEM Universitas Jenderal Soedirman

Development and management of the official website for the Student Executive Board of Universitas Jenderal Soedirman (BEM-U) using WordPress, Elementor, and custom HTML inject.

Read case study View project

URL Shortener BEM Unsoed Edition

Development of a professional URL shortener application with a Glassmorphism interface for the publication needs of BEM Universitas Jenderal Soedirman.

Read case study View project

GrowTo: Delivery Order Directory Platform for Purwokerto

Development of an information platform for delivery order services in the Purwokerto area as the Final Project for the Soedirman Digital School 2025 program.

Read case study View project

NiceGuy Sound Board

For hungry streamers wanting to ride the Bigmo train via Soundboard, we've provided an app bundled with sounds frequently used by our rector, BIGMO.

Read case study View project

Edu-Tajwid: Digital Educational Platform for Tajweed

TajwidApps is a web-based educational platform designed to help users learn the rules of Quranic recitation (Tajweed), articulation points (makharijul huruf), and characteristics of letters fluently.

Read case study View project

Digital Transformation of Rabiha Tour & Travel: Branding and Website Development

Development of a visual identity, social media content design using CorelDRAW & Photoshop, and building a company profile website using WordPress Elementor.

Read case study

Najmi Calculator: Interactive Calculator with Real-Time Features

Development of a responsive calculator app using Vanilla JavaScript, featuring Dark Mode and a custom Error Handling system.

Read case study View project