React Router

React Router adalah full-stack framework berbasis React yang mendukung Server-Side Rendering (SSR) secara native. Dibangun di atas standar Web Platform seperti Fetch API dan Web Streams, sehingga performa server maupun klien sangat efisien.

Versi 7 membawa pendekatan framework penuh dengan fitur loader, action, dan nested routing yang terintegrasi erat dengan React 18 Concurrent Mode.

DataGunung menggunakan React Router v7 sebagai tulang punggung routing dan data fetching seluruh halaman, menggantikan Remix yang merupakan pendahulunya.

React

React adalah library JavaScript buatan Meta yang digunakan untuk membangun antarmuka pengguna yang interaktif dan reaktif. React menggunakan konsep komponen yang dapat digunakan ulang, memudahkan pengelolaan tampilan yang kompleks.

Dengan model Virtual DOM dan sistem state yang deklaratif, React memungkinkan pembaruan UI yang efisien hanya pada bagian yang berubah.

DataGunung memanfaatkan React 18 dengan fitur Concurrent Rendering dan Streaming SSR untuk pengalaman pengguna yang lebih mulus dan responsif.

Supabase

Supabase adalah platform Backend-as-a-Service open-source berbasis PostgreSQL yang menyediakan database, autentikasi, storage, dan realtime subscriptions dalam satu layanan terintegrasi.

Supabase menyediakan infrastruktur database PostgreSQL dengan dukungan ekstensi PostGIS, yang memungkinkan penyimpanan dan pemrosesan data geospasial untuk lokasi gunung-gunung di Indonesia.

DataGunung menggunakan Supabase sebagai fondasi backend. Semua koneksi dan query dikelola secara aman melalui Prisma ORM, sehingga kode tetap type-safe dan mudah di-maintain.

Prisma

Prisma adalah ORM (Object-Relational Mapping) modern untuk Node.js dan TypeScript yang menyederhanakan interaksi dengan basis data relasional. Prisma menyediakan type-safety penuh dari skema database hingga ke kode aplikasi.

Dengan Prisma Schema Language, model data didefinisikan dalam satu file tunggal yang menjadi sumber kebenaran untuk migrasi database maupun tipe TypeScript yang di-generate secara otomatis.

Semua query database di DataGunung dikelola melalui Prisma Client yang di-generate dari `prisma/schema.prisma` dan terhubung ke database Supabase PostgreSQL.

Tailwind CSS

Tailwind CSS adalah framework CSS utility-first yang memungkinkan styling langsung di dalam markup HTML/JSX tanpa perlu menulis file CSS terpisah. Setiap kelas utilitas merepresentasikan satu properti CSS.

Pendekatan ini mempercepat pengembangan UI secara signifikan, menghilangkan risiko konflik nama kelas, dan menjaga ukuran bundle CSS tetap kecil berkat PurgeCSS bawaan.

DataGunung menggunakan Tailwind CSS bersama plugin `@tailwindcss/typography` untuk konten artikel dan `@tailwindcss/forms` untuk elemen formulir yang konsisten dan aksesibel.

TypeScript

TypeScript adalah superset JavaScript buatan Microsoft yang menambahkan sistem tipe statis ke dalam bahasa. TypeScript dikompilasi menjadi JavaScript biasa dan dapat berjalan di mana saja JavaScript berjalan.

Sistem tipe TypeScript membantu mendeteksi bug lebih awal saat proses development, bukan saat runtime, sehingga kode menjadi lebih aman, lebih mudah di-refactor, dan lebih mudah dipahami oleh tim.

Seluruh kode DataGunung — dari server-side loader hingga komponen UI — ditulis dalam TypeScript untuk memastikan konsistensi tipe data dan meningkatkan produktivitas pengembangan.

Vite

Vite adalah build tool generasi terbaru yang memanfaatkan native ES Modules di browser untuk Hot Module Replacement (HMR) yang sangat cepat. Server development Vite tidak perlu mem-bundle seluruh aplikasi saat startup.

Untuk production build, Vite menggunakan Rollup di balik layar untuk menghasilkan bundle yang teroptimasi dengan code-splitting dan tree-shaking otomatis.

DataGunung menggunakan Vite sebagai bundler utama, menghasilkan waktu startup development yang hampir instan dan production build yang efisien.

Framer Motion

Framer Motion adalah library animasi deklaratif untuk React yang memudahkan pembuatan transisi dan efek gerak yang halus dan natural. Animasi didefinisikan langsung sebagai props komponen.

Library ini mendukung berbagai jenis animasi: layout animations, shared element transitions, gesture-driven animations (drag, hover, tap), dan keyframe sequences yang kompleks.

DataGunung menggunakan Framer Motion untuk memperindah transisi antar halaman, animasi konten yang muncul saat di-scroll, dan elemen interaktif yang memberikan umpan balik visual kepada pengguna.

Google Gemini

Google Gemini adalah model AI generatif multimodal buatan Google DeepMind yang mampu memahami dan menghasilkan teks, kode, gambar, audio, dan video. Gemini tersedia dalam berbagai ukuran model untuk berbagai kebutuhan.

Melalui SDK `@google/genai`, pengembang dapat mengintegrasikan kemampuan Gemini langsung ke dalam aplikasi Node.js dan TypeScript dengan API yang mudah digunakan.

DataGunung menggunakan Google Gemini untuk menghasilkan konten berbasis AI yang relevan dengan data pendakian dan informasi gunung, membuka peluang fitur cerdas seperti ringkasan kondisi jalur dan rekomendasi berdasarkan data terkini.

GitHub

GitHub adalah platform hosting kode sumber dan kolaborasi pengembangan perangkat lunak berbasis Git buatan Microsoft. GitHub menjadi pusat ekosistem open-source terbesar di dunia.

Platform ini menyediakan fitur seperti Issues untuk pelacakan bug, Pull Requests untuk code review, GitHub Actions untuk CI/CD otomatis, dan GitHub Pages untuk hosting dokumentasi.

Seluruh kode sumber DataGunung dikelola di GitHub sebagai pusat version control, kolaborasi tim, dan alur kerja deployment yang terotomatisasi.

Leaflet

Leaflet adalah library JavaScript open-source yang ringan untuk membuat peta interaktif di web. Didesain dengan pendekatan mobile-first, Leaflet hanya berukuran ~42KB namun memiliki fitur lengkap untuk kebutuhan mapping.

Dengan React Leaflet, integrasi peta ke dalam komponen React menjadi lebih mudah menggunakan pendekatan deklaratif yang sesuai dengan ekosistem React.

DataGunung menggunakan Leaflet (via React Leaflet) untuk menampilkan visualisasi lokasi gunung-gunung yang pernah didaki pada halaman profil publik, memberikan gambaran visual persebaran pendakian di seluruh Indonesia.

Upstash

Upstash adalah layanan Redis serverless yang dirancang khusus untuk lingkungan serverless dan edge. Berbeda dengan Redis tradisional, Upstash menggunakan model pay-per-request sehingga sangat efisien dari sisi biaya.

Upstash menyediakan REST API yang kompatibel dengan Redis, memungkinkan caching data dari server-side functions tanpa masalah batas koneksi yang umum terjadi pada database tradisional di lingkungan serverless.

DataGunung menggunakan Upstash Redis sebagai lapisan caching untuk data publik yang sering diakses — seperti profil pengguna, statistik gunung, dan daftar terpopuler — mengurangi beban database dan mempercepat respons halaman secara signifikan.