Gis Application

#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)

CI/CD Pipeline Concepts

The CI/CD pipeline was implemented as an independent improvement beyond the course material, following CI/CD best practices.

CI/CD Overview

CI/CD Pipeline, short for Continuous Integration (CI) and Continuous Delivery/Deployment (CD), is an automation process that streamlines software development from code changes to deployment. This process automates the steps of building, testing, and deployment, allowing developers to release code changes more frequently, reliably, and securely.

The pipeline covers:

Build & Test Pull Request Check
Build & Push Container Image to GitHub Container Registry (GHCR)
Automatic tagging & release using semantic versioning based on conventional commit rules

#Semantic Versioning

Semantic Versioning Components

Semantic Versioning (SemVer) is a software version numbering standard defined at semver.org, using the format MAJOR.MINOR.PATCH:

MAJOR — Increases when there are breaking changes (not backward compatible). Example: v1.5.7 → v2.0.0
MINOR — Increases when there are new feature additions that are still backward compatible. Example: v1.5.7 → v1.6.0
PATCH — Increases when there are bug fixes or minor changes that are still backward compatible. Example: v1.5.7 → v1.5.8

#Conventional Commit

Conventional Commit is a standardized commit message convention that determines which version level should be bumped:

BREAKING CHANGE — Bumps to MAJOR version
feat() — Bumps to MINOR version
fix() or hotfix() — Bumps to PATCH version

#Git Flow (SDLC)

Git Flow Concepts

Semantic Versioning is often used in conjunction with Git Flow, a branching model that helps maintain software version consistency across the SDLC:

dev or development — Used before UAT stage, versions labeled beta
staging — Used for UAT, versions labeled rc (Release Candidate)
main — Used for production-ready releases, stable versions without labels

#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.