Atlas
Atlas is a front-end showcase project built to provide users with detailed information about any country through the REST Countries and Google Maps APIs. This one-page application allows users to search for a country by name and view details such as its flag, population, region, languages, currencies, capital, and bordering states, with a visual representation of the country's location on Google Maps.
Features
- API Integration: Connects to the REST Countries API and Google Maps API to fetch and display country data and locations.
- Country Search: Enables users to search for any country by name for quick access to information.
- Detailed Information: Displays comprehensive details including flag, population, region, languages, currencies, capital, and bordering states.
- Google Maps: Visually shows the selected country's location on an interactive map.
Tech Stack
- JavaScript
- CSS
- HTML
- AOS
- Bootstrap
- Animista
- Lodash
- AXIOS
Development Journey
UI Design
The user interface is designed to be simple and intuitive, leveraging Bootstrap for responsive styling and AOS and Animista for smooth animations. Global CSS variables ensure consistent design across the app, creating a seamless user experience on a single-page layout.
Architecture
Atlas follows a one-page app architecture, utilizing a JavaScript class to manage rendering and updating country information. The app is structured with clear component separation and includes API request handling via AXIOS and data manipulation with Lodash. A manual test suite verifies the availability of all countries in the API response.
Challenges & Solutions
- JavaScript Classes: Initially challenging, the correct implementation of classes was achieved through research and experimentation, enabling efficient rendering of country data.
- API Handling: Using AXIOS for API requests and Lodash for JSON data processing streamlined data retrieval and manipulation, overcoming issues with handling large datasets.
Screenshots
Conclusion
The Atlas project demonstrates the power of native JavaScript without frameworks, showcasing the use of classes and API integration. It serves as a valuable learning resource for front-end developers interested in raw web technologies. The skills gained from this project, such as API handling and modular JavaScript, are highly transferable to future web development endeavors.