This is a contact management app built using ReactJS, JavaScript, TailwindCSS, React Router v6, and Redux. The app includes a dashboard with charts and maps that display COVID-19 data for different countries.
https://contact-app-maps-charts.vercel.app/
- The app has a form for adding new contacts
- The app displays a list of all added contacts
- Each contact has a button to view the contact details
- The app able to edit and delete contacts
- Redux is used to store the contact data
- A line graph showing the case fluctuations
- A react leaflet map with markers that indicate the country name, total number of active, recovered cases and deaths in that particular country as a popup.
This page allows you to manage your contacts. You can add a new contact by filling out the form, and the contact will be added to the list. You can also edit or delete an existing contact. Clicking on a contact's name will take you to the contact details page.
This page displays COVID-19 data for different countries. It includes a line graph showing the cases fluctuations over time and a map with markers that indicate the country name, total number of active, recovered cases, and deaths in that particular country as a popup.
- "/" for home page
- "/contact_form" to create contact
- "/edit/{id}" to edit contact
- "/dashboard" to view maps and chart
The app uses the following APIs to fetch data:
- 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
- ReactJS
- JavaScript
- TailwindCSS
- React Router v6
- React Query
- Redux
- Clone this repository: git clone https://github.com/alokmishra70/contact-management-app-maps-charts.git
- Install the dependencies: npm install
- Start the app: npm start
- The app should open in your default browser at http://localhost:3000/.