Interactive World Map

A interactive world map built with ReactJS, Tailwind CSS and REST Countries API, featuring country details, zoom, and light/dark modes.

Table of Contents

• Live Website
• Screenshots
• Features
• Getting Started
• License
• Contributing
• Acknowledgements
• Contact

Live Website

Check out the live version of the website: Interactive World Map

Screenshots

Below are some screenshots showcasing the application's features and appearance:

Screenshot	Description
	The homepage in light mode, showing the interactive map.
	The homepage in dark mode, with the dark color scheme.
	A country selected, displaying the sidebar with country info.
	The map zoomed in, demonstrating the zoom feature.

Features

• Interactive SVG world map: click any country to view details
• Sidebar with country information (flag, population, capital, etc.)
• Zoom in/out controls for the map
• Light and dark mode toggle
• Responsive design for mobile and desktop
• URL routing: /countryname opens sidebar for that country

Getting Started

To run the project locally, follow these steps:

Prerequisites

Make sure you have the following installed:

• Node.js
• npm

Installation

1. Clone the repository:

   git clone https://github.com/JoyM268/interactive-map-reactjs.git

2. Navigate to the project directory:

   cd interactive-map-reactjs

3. Install dependencies:

   npm install

Running the Application

To start the development server:

npm start

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please submit a pull request or open an issue for any improvements or bug fixes.

Acknowledgements

• Simple Maps for the SVG world map.
• REST Countries API for providing country data.

Contact

For any questions or suggestions, please reach out to [email protected].