Development of a Web Application for Consulting Geographic Information and Printing Maps: A Case Study

Phillip Leonardo Cabrera Medrano

May 18, 2024 • 2 min read

Within the framework of my company's Annual Operating Plan, I was assigned the task of developing an innovative web application to consult geographic information of clients and generate interactive maps. This project is crucial to improve efficiency in geographic data management and optimize the relationship with our clients. In this article, I will describe the development process, from the analysis phase to the implementation of the first module.

Analysis and Planning

Description of the Current System

Currently, we have a similar system that has performance failures, request saturation, and slow map generation.

Use Cases

The new system will work when the current one is saturated or has problems meeting user needs.

Requirements

The requirements of the new system include secure access, friendly interface, compatibility with existing data, and reduced response times.

Flow Charts

I have created flow charts to represent the processes of the current system and the new system.

Technologies to Use

HTML
AntDesign
JavaScript (FrontEnd)
Node.js (BackEnd)
Express.js
React.js
Leaflet
React-Leaflet
OracleDB
Sequelize

Entity-Relationship Diagram

I will describe the relationships of the tables that the application will use in the backend.

Development

Creating the API

I use JWT for authentication and secure transfer of information between the backend and the frontend. Endpoints have middleware to ensure authentication and data validation.

FrontEnd

I am creating the frontend using a feature-based folder structure. I use Vite.js as a packager.

First Module

The first module of the application will allow the user to select options from a list, rendering an interactive map with the corresponding elements. Users will be able to interact with the map, consult information and generate PDF files for printing. I plan to deliver this first module to receive feedback from users and report it as evidence of progress.

I hope this article has given you a clear insight into the development process of our geographic query application. As we progress, I will share more updates on the feedback received and progress in the upcoming modules. Thank you for your interest and following.