Introduction
This small showcase project I worked on is called "Atlas" The purpose of this project is to create an app that connects to the API of REST Countries and Google Maps API, providing users with detailed information about any country they are interested in. The app allows users to search for a country by name and displays information such as the country's flag, population, region, languages, currencies, capital, and border states. Additionally, it includes a Google Maps feature that shows the location of the selected country.
Features
Connecting to the API of REST countries and Google Maps: The app integrates with the REST countries API and Google Maps API to fetch and display country information and the country's location on the map.
Country search: Users can search for any country by name, making it easy to find specific information they are looking for.
Country information: The app retrieves and presents various details about the selected country, including its flag, population, region, languages, currencies, capital, and border states.
Google Maps integration: The app incorporates a Google Maps feature to visually display the location of the selected country.
User Interface
The user interface of the app is designed to be simple and clean, as it is a one-page application. Bootstrap was utilized to enhance the UI aesthetics, and careful consideration was given to the creation of global variables for CSS to ensure consistent design throughout the app.
Code Architecture
The project follows a one-page app architecture. It uses a JavaScript class to render and update the information for the selected country. The class creates the necessary components, such as the map and the information of the searched country. The architecture also includes API requests and component separation. Furthermore, a manual test is implemented to verify the availability of all countries in the returned data from the requested API.
Technologies Used
The following technologies and techniques were used in this project:
JavaScript: Used to implement the rendering and updating of country information.
Bootstrap: Employed for styling the user interface.
CSS: Utilized for additional styling.
HTML: Markup language for structuring the app's elements.
AXIOS library: Used to make API requests.
Lodash: Utilized for working with the JSON data.
Challenges and Solutions
During the development process, one challenge was using JavaScript classes and its correct implementation. Through research and experimentation, I was able to grasp the concepts and effectively utilize classes to render and update country information. Another challenge was implementing API requests and handling the returned data. By utilizing the AXIOS library and working with the JSON data using Lodash, I was able to overcome this challenge and successfully retrieve the necessary information.
Conclusion
As small project, the Atlas project was a good showcase of usage native JavaScript without any frameworks and the functionality of classes, as well as the process of making API requests. This project providing valuable information in working with front-end raw technologies. Moving forward, the knowledge and skills could be gained from this project will greatly influence future work of any user in web development who would like to take a look and experiment with the code.