KuroNews - Modern News Web App dengan Spatial UI
Aplikasi portal berita modern berbasis React yang mengusung desain Bento Grid dan Spatial UI. Terintegrasi dengan Functions sebagai backend proxy untuk menjamin keamanan dari eksposur API Key.
KuroNews adalah aplikasi pembaca berita modern yang dirancang untuk mengatasi information fatigue dengan mengutamakan estetika dan kenyamanan pengguna. Mengadaptasi gaya antarmuka Spatial Design dan tata letak asimetris Bento Grid, aplikasi ini memberikan penyajian konten yang dinamis dan tidak monoton. Fitur tambahan di sisi antarmuka meliputi transisi antara Dark Mode dan Light Mode, efek glassmorphism pada navigasi, serta animasi mikro (seperti hover zoom dan scroll reveal) yang ditenagai oleh Framer Motion.
Di balik antarmuka visualnya, arsitektur frontend aplikasi ini dibangun di atas ekosistem React.js dan Tailwind CSS untuk pengembangan yang cepat, responsif, dan mudah di- maintain. Pengelolaan life cycle data (data fetching) dipercayakan pada SWR, yang menyediakan mekanisme caching dan revalidation. Hal ini memungkinkan pemuatan berita per kategori terjadi secara instan tanpa perlu memuat ulang halaman, dipadukan dengan Skeleton Loader yang berkedip halus sebagai indikator pemuatan, menggantikan spinner.
Fokus lain dalam proyek ini adalah penerapan praktik keamanan siber (cybersecurity) untuk arsitektur Single Page Application (SPA). Alih-alih mengekspos kredensial API secara terbuka di sisi peramban pengguna, KuroNews mengadopsi pendekatan serverless proxy menggunakan Functions. Semua permintaan dari klien dialihkan melalui backend worker ini untuk diinjeksi dengan API Key rahasia dan User-Agent yang valid secara aman di level server. Hasilnya, integrasi ke NewsAPI berjalan lancar dan terlindungi dari ancaman penyadapan token (token scraping) melalui tab Network inspektur peramban.