Skip to content

README.md

Latest commit

 

History

History
64 lines (44 loc) · 1.72 KB

README.md

File metadata and controls

64 lines (44 loc) · 1.72 KB

🌍 Interactive World Map

An interactive, data-driven world map built with Angular, integrating real-time country data from the World Bank API.

📌 Project Overview

This project is an Angular-based web application that visualizes a world map and allows users to explore country-specific data, such as population and other key statistics. It demonstrates best practices in:

  • Angular services and dependency injection
  • HTTP client integration with observables
  • Reactive programming using RxJS
  • Clean and modular architecture

✨ Features

  • 🗺️ Interactive world map visualization
  • 📊 Real-time data fetching from the World Bank API
  • 👥 Population and country-specific metric display
  • 💡 Modular Angular services and reusable components
  • 📱 Fully responsive and mobile-friendly UI

🛠️ Technologies Used

  • Angular (v20.0.5)
  • TypeScript
  • RxJS
  • Angular HttpClientModule
  • World Bank API

🚀 Getting Started

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn
  • Angular CLI

Installation

git clone https://github.com/your-username/interactive-world-map.git
cd interactive-world-map
npm install
ng serve

💻 Usage

Click on any country on the map to view detailed, real-time data.

All data is fetched dynamically using the WorldBankAPIService.

🌐 API Integration

This project uses the World Bank API to retrieve:

  • Country details by ID
  • Population statistics
  • Other economic and development indicators

Data is fetched via Angular's HttpClient inside a custom service (WorldBankAPIService).

🤝 Contributing

Contributions are welcome! Feel free to fork the repository, open issues, or submit pull requests.