This is a ReactJS-based Contact Management App that allows users to manage their contacts and view COVID-19 statistics on a simple dashboard with charts and maps. The app features contact management functionalities like adding, editing, and deleting contacts. It also provides COVID-19 data visualization using charts and maps.
Before you begin, ensure you have the following software installed on your machine:
- Node.js and npm
- Git
Follow these steps to run the app locally:
- Clone the repository to your local machine:
git clone https://github.com/sumon-chandra/contact-management-app.git- Navigate to the project directory:
cd contact-management-app- Install the project dependencies:
npm install- Start the development server:
npm start- Open your web browser and visit http://localhost:3000 to access the app.
- Contacts Page: Allows you to manage your contacts, including adding, viewing, editing, and deleting contacts. Contact data is stored using Redux.
- Charts and Maps Page: Provides a dashboard with COVID-19 statistics, including a line graph displaying case fluctuations and a map with markers indicating COVID-19 data for different countries.
- Worldwide COVID-19 Data: https://disease.sh/v3/covid-19/all
- Country-Specific COVID-19 Data: https://disease.sh/v3/covid-19/countries
- Graph Data for Cases with Date: https://disease.sh/v3/covid-19/historical/all?lastdays=all
- ReactJS
- TypeScript
- React Query (TanstackQuery)
- TailwindCSS
- React Router v6
- Redux (for contact data storage)
- Leaflet (for the map component)
- Click on "Add Contact" to add a new contact.
- Click on a contact card to view contact details.
- Use the edit and delete buttons to edit or delete contacts.
- View a line graph showing COVID-19 cases fluctuations.
- Interact with the React Leaflet map to view COVID-19 statistics for different countries.
The app is deployed using Vercel and can be accessed at https://contact-management2.vercel.app/.
This app is responsive and designed to work well on both desktop and mobile devices.