#Project Overview
GIS Application adalah sebuah aplikasi Geographic Information System (GIS) berbasis web yang dibangun menggunakan React.js (TypeScript) di sisi frontend dan Golang di sisi backend. Aplikasi ini menampilkan data geografis secara interaktif melalui peta berbasis web dengan integrasi OpenStreetMap menggunakan Leaflet.js.
Project ini dikembangkan sebagai latihan implementasi full-stack web application, mulai dari pembuatan RESTful API, konsumsi API di frontend, hingga penerapan automation CI/CD pipeline yang merupakan hasil improvement dan eksplorasi mandiri di luar materi course.
#Latar Belakang & Motivasi
Project ini berawal dari keinginan saya untuk mempelajari pembuatan RESTful API menggunakan Golang serta bagaimana cara mengonsumsinya di frontend modern berbasis React + TypeScript.
Sebagai dasar pembelajaran, saya mengikuti sebuah course dari santrikoding.com yang membahas pengembangan aplikasi GIS. Namun, saya tidak berhenti pada materi yang disediakan. Project ini saya lanjutkan dengan:
- Mengeksplorasi implementasi yang lebih mendekati kebutuhan dunia kerja
- Melakukan improvement mandiri pada arsitektur dan workflow
- Menerapkan automasi yang tidak dibahas di dalam course, seperti CI/CD
#Arsitektur Project
Project ini dipisahkan menjadi dua repository terpisah untuk menerapkan prinsip separation of concerns dan mendekati arsitektur aplikasi nyata.
#Backend (Golang – RESTful API)
Backend dibangun menggunakan Golang dan berfungsi sebagai penyedia data geografis melalui RESTful API.
Tanggung jawab utama backend meliputi:
- Menyediakan endpoint API untuk data GIS
- Mengelola dan memproses data koordinat geografis
- Menjadi latihan praktis dalam membangun API menggunakan Golang
Repository backend:
github.com/armandwipangestu/gis-api
#Frontend (React + TypeScript)
Frontend dibangun menggunakan React.js dengan TypeScript dan berfungsi sebagai antarmuka utama pengguna.
Tanggung jawab utama frontend meliputi:
- Menampilkan peta interaktif berbasis web
- Mengintegrasikan OpenStreetMap menggunakan Leaflet.js
- Mengonsumsi API backend secara terstruktur dan reusable
Repository frontend:
github.com/armandwipangestu/gis-ui
#Problem Statement
Melalui project ini, saya ingin memahami:
- Bagaimana cara membangun RESTful API menggunakan Golang
- Bagaimana cara mengonsumsi API tersebut di React menggunakan TypeScript
- Bagaimana membuat reusable data-fetching logic di frontend
- Bagaimana mengintegrasikan data geografis ke dalam peta berbasis web
- Bagaimana menerapkan CI/CD automation sebagai bagian dari improvement pengembangan
#Pendekatan Solusi
Untuk menjawab kebutuhan tersebut, saya menerapkan beberapa pendekatan berikut:
#1. Backend API Development
- Membangun RESTful API menggunakan Golang
- Menyusun struktur project backend agar mudah dikembangkan
- Menyediakan endpoint yang siap dikonsumsi frontend
#2. Frontend Data Fetching & State Management
- Menggunakan TanStack Query (React Query) untuk:
- Data fetching
- Caching
- Pengelolaan state asynchronous
- Membuat custom reusable hooks agar logic fetching dapat digunakan kembali
#3. GIS & Web Mapping
- Integrasi OpenStreetMap
- Visualisasi data lokasi pada peta
- Interaksi peta menggunakan Leaflet.js (marker, zoom, dan navigasi)
#4. Automation & CI/CD Pipeline (Improvement)
- Menerapkan CI/CD pipeline menggunakan GitHub Actions
- Automasi proses:
- Build aplikasi
- Pembuatan container image
- Push image ke GitHub Container Registry
- Improvement ini dilakukan sebagai eksplorasi mandiri dan tidak termasuk dalam materi course
#What I Learned
Dari project ini, saya memperoleh pembelajaran praktikal, antara lain:
- Dasar-dasar pengembangan RESTful API dengan Golang
- Konsumsi API di React menggunakan TypeScript secara terstruktur
- Penerapan reusable hooks dengan TanStack Query
- Pemahaman dasar GIS dan web-based mapping
- Implementasi CI/CD pipeline sebagai improvement mandiri
- Pentingnya inisiatif eksplorasi di luar materi pembelajaran
#Mengapa Project Ini Penting
Walaupun project ini berangkat dari sebuah course, saya menjadikannya sebagai media eksplorasi teknis, bukan sekadar mengikuti tutorial.
Project ini penting karena:
- Menunjukkan inisiatif pengembangan mandiri
- Menggabungkan backend, frontend, dan automation workflow
- Memberikan pengalaman membangun aplikasi full-stack secara end-to-end
#Kesimpulan
GIS Application merupakan project pembelajaran yang membantu saya memahami proses pengembangan aplikasi GIS berbasis web secara menyeluruh, mulai dari RESTful API di Golang, konsumsi API di React + TypeScript, hingga penerapan CI/CD automation sebagai hasil improvement pribadi.
Project ini memperkuat kemampuan saya di bidang Software Engineering, khususnya dalam pengembangan full-stack web application dengan pendekatan modern.
