Web Development

Website Profil dan CMS Berita Youth Ranger Indonesia Sumatera Selatan

Website organisasi & CMS
Layanan
FrontendCMSUI/UX
• Website profil organisasi responsif• Halaman program, berita, dan galeri• Panel admin untuk tambah, edit, dan hapus artikel• Penyimpanan konten berbasis commit GitHub
KlienYouth Ranger Indonesia Sumsel
Website / Demoyouthrangerindonesiasumateraselatan.vercel.app/

Satu platform untuk memperkenalkan program organisasi sekaligus mengelola publikasi berita tanpa mengubah kode secara manual.

Organisasi pemuda membutuhkan satu tempat yang jelas untuk menampilkan identitas, kegiatan, berita, dan dokumentasi kepada publik.

Saya mengembangkan antarmuka website profil YRI Sumsel menggunakan Next.js App Router, React, TypeScript, dan CSS Modules. Kontennya dibagi menjadi halaman utama, program, berita, detail artikel, dan galeri.

Panel admin artikel terhubung ke GitHub API: penambahan, penyuntingan, penghapusan berita, dan pengelolaan gambar dicatat sebagai perubahan data repository yang kemudian digunakan dalam deployment Vercel.

Apa yang dibangun dan bagaimana cara kerjanya?

Frontend menampilkan navigasi program, daftar berita dengan filter dan pencarian, serta halaman detail artikel yang memiliki progress membaca dan informasi kegiatan.

Untuk kebutuhan redaksi, CMS menyediakan formulir artikel, upload gambar, autentikasi admin, dan penyimpanan perubahan ke repository. Cara ini memungkinkan pengelolaan konten meski aplikasi tidak memakai database SQL.

Pelajaran teknis dari proyek ini

Next.js mengatur routing dan rendering halaman, React membangun komponen interaktif, TypeScript menjaga struktur data, sedangkan CSS Modules membuat styling setiap komponen lebih terisolasi.

Penyimpanan lewat GitHub memerlukan token dengan izin penulisan, validasi unggahan, dan penanganan error API. Ini merupakan kompromi teknis yang perlu diperhatikan dibandingkan CMS dengan database khusus.

Hasil yang Diperoleh

Website organisasi dengan halaman profil, program, daftar dan detail berita, galeri, serta alur pengelolaan artikel melalui admin. Fitur tersedia pada kode proyek; angka pertumbuhan trafik atau pendaftaran belum diukur secara terverifikasi.

Profil • Program • Berita • GaleriModul utama
Tambah • Edit • HapusPengelolaan artikel

Teknologi yang Digunakan

Next.jsReactTypeScriptCSS ModulesGitHub APIVercel
Website / Demo ↗Kode Sumber ↗