Muhammad Firdan AzhariFull-Stack Developer
Kembali ke BerandaSTUDI KASUS / 03
PROYEK 03/Edutech & Culture

NUSAVERSE

NUSAVERSE dibangun untuk ajang BytesFest 2026 guna mendukung Target Pembangunan Berkelanjutan (SDG 11: Kota dan Komunitas yang Berkelanjutan) melalui pelestarian warisan budaya Nusantara secara digital.

PeranFrontend Developer
KategoriEdutech & Culture
Hasil UtamaEksplorasi warisan budaya interaktif dengan navigasi visual yang aksesibel.
TeknologiNEXT.JS · TYPESCRIPT · TAILWIND

Visual Antarmuka Proyek

JELAJAH NUSANTARANUSA
VERSE
Warisan hidup dalam cerita.

FIG. 03 — REPRESENTASI ARSITEKTUR & ANTARMUKA NUSAVERSE

01

Masalah & Latar Belakang

Dokumentasi budaya tradisional Indonesia sering tersebar secara sporadis dan disajikan secara pasif berbasis teks, sehingga kurang mengundang minat eksplorasi generasi muda.

02

Peran & Tanggung Jawab

Bertanggung jawab atas arsitektur frontend web, menerjemahkan wireframe dan desain Figma menjadi komponen Next.js berbasis TypeScript, serta memastikan visualisasi orbit budaya berjalan mulus pada berbagai resolusi layar.

03

Fitur Utama

01

Eksplorasi terarah materi adat, pakaian tradisional, tarian, dan rumah adat 34 provinsi.

02

Navigasi interaktif berbasis kartu dan tata letak dinamis bertema kepulauan Nusantara.

03

Aksesibilitas web dengan kontras warna terbaca, dukungan pembaca layar, dan navigasi ramah keyboard.

04

Arsitektur halaman terindeks SEO untuk mendukung literasi budaya di mesin pencari.

04

Sorotan Teknis & Rekayasa

  • Penerapan Next.js App Router dengan Static Site Generation (SSG) untuk pemuatan halaman instan.
  • Desain sistem modular dengan Tailwind CSS tanpa ketergantungan pustaka animasi berlebih demi menjaga beban bundle minimal.
  • Optimasi gambar menggunakan next/image dengan format modern WebP/AVIF untuk efisiensi transfer data.
05

Hasil & Dampak

Diselesaikan sebagai karya inovasi digital BytesFest 2026 dengan performa Core Web Vitals sempurna dan navigasi bebas hambatan.