#Frontend Engineer Coding Task
❖ Please find the form: Behavioral Survey Create a contact management app with Charts and Maps using ReactJS, TypeScript, TailwindCSS, React Router v6 and React Query aka TanstackQuery. Please create a GitHub/GitLab repo and possibly deploy your app on free services like Vercel, Github Pages or Heroku etc
Objective Page Contacts: The app should have a form for adding new contacts The app should display a list of all added contacts Each contact should have a button to view the contacts details The app should be able to edit and delete contacts Make use of Redux to store the contact data
Objective Page Charts and Maps: Build a simple dashboard with:
- A line graph showing the cases fluctuations
- A react leaflet map with markers that indicates the country name, total number of active, recovered cases and deaths in that particular country as a popup.
Please use below APIs to fetch data and create dashboards.
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 Instructions: Use create-react-app with TypeScript to set up the basic structure of the app Use React Query to handle API calls and data management Use Tailwind to style the app Use TypeScript to type-check the code
The app should be responsive and should look good on desktop and mobile devices The app should be well-structured and easy to maintain.
Deliverable: A working contact management app with Maps and Charts Properly commented code A brief documentation on how to run the app, including information on the API endpoint used.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.