This is a contact management app with charts and maps built using ReactJS, TypeScript, TailwindCSS, React Router v6, and React Query.

The app allows you to manage contacts, view charts showing COVID-19 cases fluctuations, and visualize COVID-19 data on a world map.

Click here to view a live demo

• Add, view, edit, and delete contacts
• View a list of all added contacts
• Line graph showing COVID-19 cases over time
• Interactive map with markers for COVID-19 data by country

• Node.js (at least version 12)
• npm or yarn

1. Clone the repository:

   git clone https://github.com/abhisheksharma1310/contact-management-app-with-charts-and-maps
   cd contact-management-app-with-charts-and-maps

2. Install dependencies:

   npm install

1. Start the development server:

   npm start

   This will start the app in development mode and open it in your default web browser.

2. Navigate to the Contacts page to manage your contacts.

3. Navigate to the Dashboard page to view the line graph and the map.

• Worldwide data of cases: https://disease.sh/v3/covid-19/all
• Country Specific data of cases: https://disease.sh/v3/covid-19/countries
• Graph data for cases with date: https://disease.sh/v3/covid-19/historical/all?lastdays=all

This project is deployed on Netlify. Click here to view a live demo.

• ReactJS
• TypeScript
• TailwindCSS
• React Router v6
• React Query
• Chart.js
• React Leaflet

• src/components: Contains individual components.
• src/pages: Contains main pages of the app.
• src/features: Contains Redux slices.
• src/api.ts: Handles API calls using React Query.
• src/store.ts: Redux store setup.

Contributions are welcome! Feel free to open issues and pull requests for bug fixes, features, or improvements.