Interactive map

Table of content

About
Technologies
Installation
Usage
App preview

About

!! Work in progress

👋 Hello! Interactive map is a web application for reading data about countries of the world from an external api. The application has an interactive map from which we can choose the countries we want to learn about. After a few clicks, they will be added to the list in the side panel where you can read the downloaded data about them. For optimization, I used the Context API for data storage with the implemented publish-subscribe pattern in order to limit the number of rerenders.

Live: https://interactive-map-mu.vercel.app

Technologies

  • React
  • Typescript
  • Context API (publish-subscribe pattern) (global store)
  • Redux Query (API calls)
  • Vite (builder)
  • Styled Components (styles)

Installation

Usage

  • Select a country by clicking on its borders on the map or search by entering its name in input.
  • Browse selected countries listed in the side panel.
  • Display detailed information about the selected country by clicking on it from the list in the side panel.
  • Zoom in/out and move the map with the mouse.

App preview

enter image description here

enter image description here

enter image description here