Web Development

Palembang Go Vacation — Katalog 94 Destinasi Wisata

KMIPN VI • Portal wisata
Layanan
FrontendContent ArchitectureUI/UX
• Katalog dan filter destinasi per kategori• Halaman detail berbasis slug• Galeri dengan lightbox• Tautan peta dan tur virtual 360°
KlienKMIPN VI — Politeknik Negeri Sriwijaya
Website / Demopalembang-go-vacation.vercel.app/

Membuat satu pintu untuk mengenal wisata Palembang lewat katalog, detail destinasi, galeri, dan peta.

Informasi tempat wisata Palembang tersebar di banyak sumber sehingga pengunjung memerlukan titik awal untuk mengenal destinasi, sejarah, dan lokasi.

Bersama tim, saya membangun portal wisata dengan Next.js App Router, React, TypeScript, dan CSS Modules. Informasi destinasi dikelola pada data terstruktur, bukan halaman HTML terpisah untuk masing-masing tempat.

Tampilan mencakup slider unggulan, katalog yang bisa difilter, halaman detail berdasarkan slug, galeri foto, tautan Google Maps, serta tombol tur virtual 3D/360° untuk destinasi yang mendukungnya.

Satu struktur data, banyak halaman destinasi

Repository versi sekarang memuat 94 destinasi: 47 wisata sejarah dan budaya, 32 wisata buatan, 4 wisata alam, dan 11 wisata kuliner.

Satu template Next.js menangani rute /wisata/[slug]. Pengelola menambah objek data baru tanpa perlu menulis ulang tata letak halaman, dan 14 destinasi memiliki tautan tur virtual.

Cara teknologi mendukung pengalaman wisatawan

React membangun antarmuka filter kategori, carousel, dan galeri. TypeScript menjaga tipe konten destinasi, sedangkan CSS Modules mempertahankan gaya komponen secara terpisah.

Hasilnya adalah portal informasi yang mudah dijelajahi. Sebagian destinasi masih menggunakan konten fallback, dan form newsletter pada repository belum terhubung ke layanan email.

Hasil yang Diperoleh

Website katalog wisata dengan halaman dinamis, navigasi kategori, galeri, peta, dan opsi tur virtual; total 94 destinasi pada data repository.

94Destinasi
73Halaman dengan deskripsi
14Tur virtual 360°
4Kategori wisata

Teknologi yang Digunakan

Next.jsReactTypeScriptCSS ModulesGoogle Maps
Website / Demo ↗Kode Sumber ↗