This is a contact management app with charts and maps, built using React TypeScript, TailwindCSS, React Router v6, and other libraries. The app allows you to add new contacts, display a list of all added contacts, view contact details, edit and delete contacts. It also has a simple dashboard with a line graph showing the cases fluctuations and 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.
- A form for adding new contacts
- A form for adding new contacts
- A list of all added contacts
- A button to view the contact details
- The app is able to edit and delete contacts
- Redux is used to store the contact data
- A line graph showing the cases 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.
- World wide 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
- react-chartjs-2 for line chart
- react-leaflet and leaflet for world map
- react-redux for state management
- tailwind for styling
- TypeScript for type check
- Used React Hooks Functional Components.
- useState hooks used for state change in Charts and useHooks to update the UI when data being fetched.
I've used for deployement Vercel Click on the Description link to get preview.
- Clone the repository:
git clone https://github.com/your-username/your-repo-name.git
- Install dependencies:
yarn install
ornpm install
- Start the development server:
yarn start
ornpm start
- Open your browser and go to
http://localhost:3000
This app is a simple contact management app with charts and maps. It allows you to add, view, edit and delete contacts. It also has a dashboard with a line graph and a world map that shows the COVID-19 cases data. The app is built using ReactJS, TypeScript, TailwindCSS, React Router v6, and React Query aka TanstackQuery.