GeoCoords: Discover Nearby Essentials with Real-Time Navigation

Core problems solved

• Difficulty Finding Nearby Places

  Many users struggle to find essential places like gas stations, restaurants, or ATMs nearby. GeoCoords solves this by fetching and displaying places close to the user’s current location in real time.

• Inaccurate or Outdated Location Data

  Some navigation tools display outdated information or closed businesses. GeoCoords ensures up-to-date location data by integrating with reliable APIs, so users get accurate information.

• Poor Mobile Optimization

  Navigating on mobile can be difficult with some tools due to poor optimization. GeoCoords solves this by being fully responsive, ensuring a smooth user experience across all devices, whether on mobile or desktop.

Core stack

• Javascript

  The app is built using pure JavaScript to handle all the interactive features and dynamic content. JavaScript enables the app to fetch real-time location data, calculate distances, and provide step-by-step directions.

• Scss/SASS

  For styling the app, Sass (Syntactically Awesome Style Sheets) was used, a CSS preprocessor that extends the capabilities of regular CSS. SCSS, a syntax of Sass, allows for more organized and modular stylesheets. It enables the use of variables, nesting, and mixins, which helps in maintaining clean, reusable, and scalable styles.

• ArcGis

  ArcGIS is a powerful mapping and geospatial analysis platform. It was integrated into the app to provide accurate location data, maps, and geocoding services. ArcGIS allows the app to display users' current locations, show nearby places of interest, and draw paths between the user’s location and selected destinations. This makes it possible to offer precise and reliable navigation services within the app.

Functionality and Features

• Accurate Locations

  The app provides precise location data for the user and nearby places of interest. Using ArcGIS’s geolocation services, it can pinpoint the user’s current position and show nearby locations such as gas stations, restaurants, and ATMs with high accuracy.

• Step-by-Step Directions

  Users can receive turn-by-turn directions to guide them from their current location to their chosen destination. This feature makes navigation easy and intuitive, helping users reach their destinations without confusion.

• Approximate Distance

  The app displays the approximate distance between the user’s location and selected places of interest. This real-time information helps users understand how far they need to travel and choose the best route.

• Map Showing User’s Approximate Location

  An interactive map shows the user’s approximate location, providing a clear visual representation of their surroundings. The map updates dynamically as the user moves, ensuring an accurate navigation experience.

• Path Linking Location to Place of Interest

  When a user selects a destination, the app draws a path on the map linking their current location to the chosen place. This visual guide makes it easy to follow the route and navigate efficiently.

• User Dashboard

  Each user has a personal dashboard where they can see the rooms they have booked. The dashboard also allows them to view and edit their profile, such as changing their profile picture or name

• Sort Locations by “Furthest" or "Nearest"

  The app allows users to sort nearby locations based on distance, either showing the nearest or furthest places first. This feature helps users prioritize their search results and find the most convenient options based on their preferences.

Challenges

• Understanding the ArcGIS Documentation

  One of the main challenges in building the geocoordinates app was getting acquainted with the ArcGIS technology. As it was the first time working with ArcGIS, it took some time to navigate and understand the extensive documentation. However, the documentation was well-organized and straightforward, which made it easier to grasp the concepts and functionalities needed for the project. This experience not only helped in effectively integrating ArcGIS into the app but also enhanced the ability to read and utilize documentation efficiently, a valuable skill for future projects.

Conclusion

The development of the GeoCoords web app was an enriching experience, aimed at solving common navigation challenges by providing accurate and real-time location data. With features like step-by-step directions, distance calculations, and an interactive map, the app offers a comprehensive solution for users seeking nearby places of interest. The ability to sort locations by distance adds another layer of convenience, making it easier to find the best options based on user preferences. By using technologies like JavaScript, Sass/SCSS, and ArcGIS, the app delivers a responsive and user-friendly experience across all devices. This project not only enhanced my skills in frontend development and geospatial analysis but also showcased the potential of web applications in improving everyday navigation