Ranu.
SystemsAbout
Explore Work
Core Systems
  • E-Proglat (Analitik Atlet)
  • Rekap Nilai (Parser e-Rapor)
  • SIMAIR (Distribusi Air)
  • E-Lucky (Evaluasi Siswa)
  • Full Archive (15) →
Curriculum
  • Berpikir Komputasional
  • Algoritma & Pemrograman
  • Literasi & Etika AI
  • Pendidikan Koding SMA
Architecture
  • Next.js 16 (App Router)
  • TypeScript & React 19
  • Laravel & Inertia.js
  • SQLite & MySQL Local-First
Profile
  • About Ranu
  • Indonesia
  • Active Educator
Ranu·Coding Educator & Web Developer
© 2026. Built with Next.js, React & Tailwind CSS.

Engineering Catalog & Systems Architecture.

A comprehensive inventory of 15 production web systems, automated school grading tools, athlete workload analytics, and municipal utilities built with modern local-first principles.

15+Deployed Systems
100%Functional & Live
0 msLocal-First Latency
PRJ-01·Web App
Featured
E-PROGLAT — Athletic Training Program System
6 Screenshots

E-PROGLAT — Athletic Training Program System

Web application for calculating athlete micro-loads (Absolute Volume, Intensity, PI.VE score) and plotting peak performance projection curves for coaches before competitions.

Next.js 16React 19TypeScriptTailwind CSSRecharts
LIVE DEMO
PRJ-02·Information System
Featured
SIMAIR — Water Utility Management System
6 Screenshots

SIMAIR — Water Utility Management System

Operational web app for municipal water distribution, periodic meter reading, and customer consumption records.

Laravel 11Inertia.jsReactTailwind CSSMySQL
PRJ-03·Web App
Featured
E-LUCKY — Student Assessment Platform
3 Screenshots

E-LUCKY — Student Assessment Platform

Learning evaluation platform with pre-tests, post-tests, rubric scoring, and automated grade book exports to Excel.

PHP 8MySQLPhpSpreadsheetBootstrap 5
PRJ-04·Teacher Tool
Featured
Student Grade Recapitulation
1 Screenshots

Student Grade Recapitulation

Daily grading and CS assessment tool with a rapid checklist interface (✓1–✓4) and automated export formatted for national e-Rapor standards.

Node.jsExpressSQLiteSheetJSVanilla JS
PRJ-05·Web App
Catalog
Graha Tennis Course (GTC)
3 Screenshots

Graha Tennis Course (GTC)

Profile site and administrative portal for a tennis academy, featuring training program details, class schedules, and member registration.

ReactViteTailwind CSSJavaScript
PRJ-06·Event System
Catalog
Run 62 — Fun Walk & Run Event Platform
1 Screenshots

Run 62 — Fun Walk & Run Event Platform

Participant registration system for community walking and running events, with merchandise orders, receipt generation, and admin summaries.

JavaScriptHTML5CSS3Local DB
PRJ-07·E-Learning
Catalog
Interactive Javanese Script Learning Portal
4 Screenshots

Interactive Javanese Script Learning Portal

Web-based interactive learning module for Javanese script, character pairings, vowel diacritics, reading drills, and comprehension quizzes.

Next.jsReactRadix UIFramer MotionTailwind CSS
PRJ-08·Web App
Catalog
Graha Mandiri Waste Bank Management
4 Screenshots

Graha Mandiri Waste Bank Management

Community waste bank ledger tracking sorting deposits, converting waste weights into cash balances, and logging operational cash flows.

JavaScriptHTML5CSS3Local DB
PRJ-09·School System
Catalog
Self-Service Digital Library System
1 Screenshots

Self-Service Digital Library System

Kiosk-ready school library system for book checkouts and returns using barcode scanners, member authentication, and circulation tracking.

Next.jsReactMySQLRechartsTailwind CSS
PRJ-10·Information System
Catalog
Public Grievance Redressal System (SIPM)
1 Screenshots

Public Grievance Redressal System (SIPM)

Public complaint logging and tracking portal with role-based access for citizens, field officers, and administrators.

PHPMySQLJavaScriptBootstrap
PRJ-11·E-Learning
Catalog
SIRAJA — Interactive Javanese Script Learning Portal
4 Screenshots

SIRAJA — Interactive Javanese Script Learning Portal

Modern interactive learning module for Javanese script, character pairings, vowel diacritics, and interactive drills.

TypeScriptNext.jsReactTailwind CSS
PRJ-12·Web App
Catalog
Great Ritter — Badminton Club Showcase
3 Screenshots

Great Ritter — Badminton Club Showcase

Modern badminton academy showcase with dynamic interfaces, athlete profiles, and structured coaching schedules.

TypeScriptNext.jsReactFramer MotionTailwind CSS
PRJ-13·Website
Catalog
Digital Literacy & Computing Portal
1 Screenshots

Digital Literacy & Computing Portal

Publishing hub for student coding projects, competition resources, and computing literacy guides.

HTML5CSS3JavaScript
PRJ-14·E-Learning
Catalog
Sinau Basa Jawa Digital — OPIER Teacher Platform
3 Screenshots

Sinau Basa Jawa Digital — OPIER Teacher Platform

Digital instructional model for teachers supporting cyclical classroom improvement: Observation, Planning, Implementation, Evaluation, and Reflection (OPIER).

HTML5CSS3BootstrapJavaScript
PRJ-15·Website
Catalog
KKA Profile & Curriculum Showcase
1 Screenshots

KKA Profile & Curriculum Showcase

Personal portfolio and educational showcase presenting curriculum frameworks, classroom resources, and engineering projects.

Next.js 16React 19Tailwind CSSFramer Motion