#Project Overview
GIS Application is a web-based Geographic Information System (GIS) application built using React.js (TypeScript) on the frontend and Golang on the backend. The application displays geographic data interactively through a web map, integrating OpenStreetMap with Leaflet.js.
This project was developed as a full-stack web application exercise, covering the entire flow from building a RESTful API, consuming the API on the frontend, to implementing an automation CI/CD pipeline as a result of independent improvement and exploration beyond the course material.
#Background & Motivation
This project started from my intention to learn how to build RESTful APIs using Golang and how to consume them in a modern frontend built with React + TypeScript.
As a learning foundation, I followed a course from santrikoding.com that covers GIS application development. However, I did not stop at the provided material. I continued developing this project by:
- Exploring implementations that are closer to real-world industry needs
- Making independent improvements to the architecture and development workflow
- Implementing automation that was not covered in the course, such as CI/CD
#Project Architecture
This project is separated into two distinct repositories to apply the principle of separation of concerns and to better resemble a real-world application architecture.
#Backend (Golang – RESTful API)
The backend is built using Golang and acts as a provider of geographic data through a RESTful API.
The main responsibilities of the backend include:
- Providing API endpoints for GIS data
- Managing and processing geographic coordinate data
- Serving as hands-on practice for building APIs with Golang
Backend repository: github.com/armandwipangestu/gis-api
#Frontend (React + TypeScript)
The frontend is built using React.js with TypeScript and serves as the primary user interface.
The main responsibilities of the frontend include:
- Displaying an interactive web-based map
- Integrating OpenStreetMap using Leaflet.js
- Consuming backend APIs in a structured and reusable manner
Frontend repository: github.com/armandwipangestu/gis-ui
#Problem Statement
Through this project, I aimed to understand:
- How to build RESTful APIs using Golang
- How to consume APIs in React using TypeScript
- How to create reusable data-fetching logic on the frontend
- How to integrate geographic data into a web-based map
- How to implement CI/CD automation as part of development improvements
#Solution Approach
To address these goals, I applied the following approaches:
#1. Backend API Development
- Building RESTful APIs using Golang
- Structuring the backend project for better maintainability
- Providing endpoints that are ready to be consumed by the frontend
#2. Frontend Data Fetching & State Management
-
Using TanStack Query (React Query) for:
- Data fetching
- Caching
- Asynchronous state management
-
Creating custom reusable hooks so data-fetching logic can be reused
#3. GIS & Web Mapping
- Integrating OpenStreetMap
- Visualizing location data on a web-based map
- Handling map interactions using Leaflet.js (markers, zoom, and navigation)
#4. Automation & CI/CD Pipeline (Improvement)
-
Implementing a CI/CD pipeline using GitHub Actions
-
Automating processes such as:
- Application build
- Container image creation
- Pushing images to GitHub Container Registry
-
This improvement was implemented independently and was not part of the course material
#What I Learned
From this project, I gained practical learning experiences, including:
- Fundamentals of RESTful API development with Golang
- Consuming APIs in React using TypeScript in a structured way
- Implementing reusable hooks with TanStack Query
- Basic understanding of GIS and web-based mapping
- Implementing a CI/CD pipeline as an independent improvement
- The importance of taking initiative beyond provided learning materials
#Why This Project Matters
Although this project originated from a course, I used it as a technical exploration platform, not merely as a tutorial follow-along.
This project matters because it:
- Demonstrates independent development initiative
- Combines backend, frontend, and automation workflows
- Provides hands-on experience building a full-stack application end-to-end
#Conclusion
GIS Application is a learning-focused project that helped me understand the end-to-end process of building a web-based GIS application, from creating RESTful APIs in Golang, consuming them in React + TypeScript, to implementing CI/CD automation as a personal improvement.
This project strengthened my skills in Software Engineering, particularly in building modern full-stack web applications.
