An interactive Angular application that lets users explore countries around the world by clicking on an SVG map. Selecting a country fetches live data from the World Bank API and displays key details such as capital city, region, income level, and geographic coordinates.
- Interactive SVG World Map — click any country to select it
- Live Country Data — real-time info pulled from the World Bank REST API
- Responsive Layout — adapts to desktop and tablet screen sizes
- Hover & Selection Effects — smooth color transitions on hover and a distinct highlight for the selected country
| Layer | Technology |
|---|---|
| Framework | Angular 21 |
| Language | TypeScript 5.9 |
| Styling | CSS (no external UI library) |
| API | World Bank Country API |
| Testing | Vitest |
- Node.js ≥ 18
- npm ≥ 9 (or the bundled
npm@11.9)
npm installng serveOpen http://localhost:4200 in your browser. The app reloads automatically on file changes.
ng buildBuild output is written to the dist/ directory.
ng test