Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nagababunarise/covid19-dashboard-miniproject
Covid19/DashBoard
https://github.com/nagababunarise/covid19-dashboard-miniproject
api browserrouter compontents css js link react-router-dom reactjs
Last synced: about 8 hours ago
JSON representation
Covid19/DashBoard
- Host: GitHub
- URL: https://github.com/nagababunarise/covid19-dashboard-miniproject
- Owner: nagababunarise
- Created: 2024-02-29T06:08:25.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-29T06:13:12.000Z (11 months ago)
- Last Synced: 2024-04-17T05:11:36.830Z (9 months ago)
- Topics: api, browserrouter, compontents, css, js, link, react-router-dom, reactjs
- Language: JavaScript
- Homepage: https://covinnn.ccbp.tech
- Size: 213 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
In this project let's build a **Covid19 Dashboard** by applying the concepts we have learned till now. This project allows you to practice the concepts and techniques learned till React Course and apply them in a concrete project.
You will demonstrate your skills by creating an app that will fetch data from an internal server using a **class component**, displaying that data, using **component lifecycle** methods, **routing** concepts and adding responsiveness to the website.
This is an individual assessment. All work must be your own.
### Prerequisites
#### UI Prerequisites
Click to view
- What is Figma?
- Figma is a vector graphics editor and prototyping tool which is primarily web-based. You can check more info on the Website
- Create a Free account in Figma
- Kindly follow the instructions as shown in this video to create a Free Figma account. Watch the video upto **00:55**
- How to Check CSS in Figma?
- Kindly follow the instructions as shown in this video to check CSS in the Figma screen. Watch the video upto **02:45**
- Export Images in Figma screen
- Kindly follow the instructions as shown in this video to export images from the Figma screen
- Click on the Export button to get Export options as shown in the below image
- Upload your exported images from Figma to Cloudinary and get image URLs from Cloudinary. Refer this session for better understanding
#### Design Files
Click to view
- You can check the **Design Files** for different devices here
### Set Up Instructions
Click to view
- Download dependencies by running `npm install`
- Start up the app using `npm start`
### Completion Instructions
Functionality to be added
The app must have the following functionalities
- Users should be able to navigate to Home, About routes using links in Navbar
- The website should be responsive in mobile view, tablet view as well (Use Media Queries to achieve the responsive website)
- **Home Route**
- An HTTP GET request should be made to the Home Route API URL
- **_Loader_** should be displayed while fetching the data
- After the data is fetched successfully,
- Stats of **Confirmed**, **Active**, **Recovered**, **Deceased** cases of **India** should be equal to the respective data received from the response
- List of State/UT should be displayed with corresponding **Confirmed**, **Active**, **Recovered**, **Deceased** cases count
- When the **Ascending Icon** (**FcGenericSortingAsc** react-icon) is clicked, then the list of State/UT should be sorted with **Ascending Order** based on State/UT name
- When the **Descending Icon** (**FcGenericSortingDesc** react-icon) is clicked, then the list of State/UT should be sorted with **Descending Order** based on State/UT name
- Footer should be displayed as shown in the Figma
- **Search Functionality**
- Search should be case **insensitive**. This means Searching for `AN` or `an` or `An` should give the same search results
- When the State/UT is searched by using the State/UT name, then the list of State/UT names matched with the search text should be displayed
- When the Specific State/UT is clicked in the searched State/UT, then the page should be navigated to the Specific State/UT
- **State-Specific Route**
- An HTTP GET request should be made to the State-Specific Route API URL
- **_Loader_** should be displayed while fetching the data
- After the data is fetched successfully,
- State name and last updated date should be equal to the State name received from the response
- Stats of **Confirmed**, **Active**, **Recovered**, **Deceased** cases of specific state should be equal to the respective data received from the response
- Tested count should be equal to the tested count received from the response
- Initially districts with Descending order of their **Confirmed Cases** should be displayed in the Top Districts
- When the **Active Cases** card is clicked, then the Top Districts and **Bar Graph** should be changed to **Descending order** by their **Active Cases** count
- When the **Confirmed Cases** card is clicked, then the Top Districts and **Bar Graph** should be changed to **Descending order** by their **Confirmed Cases** count
- When the **Recovered Cases** card is clicked, then the Top Districts and **Bar Graph** should be changed to **Descending order** by their **Recovered Cases** count
- When the **Deceased Cases** card is clicked, then the Top Districts and **Bar Graph** should be changed to **Descending order** by their **Deceased Cases** count
- **Bar Graph** should be displayed with the last 10 days of Covid19 cases data
- Initially for Spread Trends, **Daily Data** should be displayed
- Footer should be displayed as shown in the Figma
- **Not Found Route**
- When a random path is provided in the URL, then the page should be navigated to the Not Found Route
- **About Route**
- An HTTP GET request should be made to the About Route API URL
- **_Loader_** should be displayed while fetching the data
- After the data is fetched successfully, the response received should be displayed
- List of **faqs** should be displayed
- Footer should be displayed as shown in the Figma
- **Header**
- When the **COVID19INDIA** heading element in the Header is clicked, then the page should be navigated to the Home Route
- When the **Home** link in the Header is clicked, then the page should be navigated to the Home Route
- When the **About** link in the Header is clicked, then the page should be navigated to the My About Route
### Quick Tips
Click to view
- Conversion of Object items to Array Items CodeSandbox
- Use React Charts package to implement given charts
- React charts Documentation.
- Line chart and Bar Chart implementation CodeSandbox
- Multi area chart implementation CodeSandbox
- Implement Select fields using this package
- React select Documentation
- React select implementation CodeSandbox
- Usage of extracting date wise stats CodeSandbox
### Important Note
**Below Instructions are needed to pass the test cases.**
Click to view
- **Note:**
- Don't use any third-party packages other than packages mentioned in the **Quick Tips**
- For Mini Projects, you have to use normal HTML elements to style the React Components. Usage of `styled-components` (CSS in JS) to style React components are not supported in Mini Projects. Test cases won't be passed, if you use styled-components
- Refer to the below Example for the usage of `testid` in the HTML elements
- Example: `
`
- Get all states data from the response of Get Countrywide covid19 cases API by mapping the state's list that we have provided you in the App.js file
- If you receive any type of covid19 cases count of a state as undefined from the API call, store that value as 0
- Example:- You have received the confirmed cases count, population for the State Goa as undefined so instead of storing undefined store confirmed cases of Goa as 0. Like this for all states and districts store 0 if you receive any count as undefined
- Your code will contain a `Counter` Component in the path `src/components` you can modify the component based on your use case or you can ignore it
- Formulae for active cases `activeCases = confirmedCases-(recoveredCases+deceasedCases)`
- Adding individual states Covid19 data will give you national wide Covid19 data
- **Don't wrap** the `Bar Chart` or `Line Chart` with `ResponsiveContainer`
- Routes:
- The Home Route should contain the pathname as `/`
- The State-specific Route should contain the pathname as `/state/:stateCode`
- **Note:** use the particular state code in place of id
- The About Route should contain the pathname as `/about`
- Header:
- Your code should contain a `Header` Component in the path `src/components`
- Footer:
- Your code should contain a `Footer` Component in the path `src/components`
- The Footer component should consist of all social icons from the `react-icons` third-party library
- The Footer component should consist of the `VscGithubAlt` react icon
- The Footer component should consist of the `FiInstagram` react icon
- The Footer component should consist of the `FaTwitter` react icon
- Home Route:
- The Loader container should contain the test id with value as `homeRouteLoader`
- The States Search results unordered list should contain the test id with value as `searchResultsUnorderedList`
- The Search bar should contain the `BsSearch` react icon
- The State Search results list item should contain a `BiChevronRightSquare` react icon
- The Confirmed cases card should contain the test id with value as `countryWideConfirmedCases`
- The Confirmed cases image in the Confirmed cases container should contain the alt text as `country wide confirmed cases pic`
- The Recovered cases card should contain the test id with value as `countryWideRecoveredCases`
- The Recovered cases image in the Recovered cases container should contain the alt text as `country wide recovered cases pic`
- The Active cases card should contain the test id with value as `countryWideActiveCases`
- The Active cases image in the Active cases container should contain the alt text as `country wide active cases pic`
- The Deceased cases card should contain the test id with value as `countryWideDeceasedCases`
- The Deceased cases image in the Deceased cases container should contain the alt text as `country wide deceased cases pic`
- The Statewise covid19 data table should contain the test id with value as `stateWiseCovidDataTable`
- The `FcGenericSortingAsc` react icon should be wrapped with an HTML button element and the Button should contain the test id value as `ascendingSort`
- The `FcGenericSortingDesc` react icon should be wrapped with an HTML button element and the Button should contain the test id value as `descendingSort`
- Example:
```html
```
- Place the ascending sort icon and descending sort icon in an HTML container element with the test id attribute value `stateWiseCovidDataTable`
- Place the total countrywide confirmed cases count, the text `Confirmed` and the image of the confirmed case inside of the HTML container element with the test id attribute value `countryWideConfirmedCases`
- Place the total countrywide active cases count, the text `Active` and the image of the active case inside of the HTML container element with the test id attribute value `countryWideActiveCases`
- Place the total countrywide recovered cases count, the text `Recovered` and the image of the recovered case inside of the HTML container element with the test id attribute value `countryWideRecoveredCases`
- Place the total countrywide deceased cases count, the text `Deceased` and the image of the deceased case inside of the HTML container element with the test id attribute value `countryWideDeceasedCases`
- Wrap all the list items of the HTML unordered list element with the test id attribute value `searchResultsUnorderedList` with Link from `react-router-dom`
- State-specific Route
- **NOTE:** Wrap all the Line charts with an HTML container element and assign test id attribute value as `lineChartsContainer` to that HTML container element
- The GET State details API Loader container should contain the test id with value as `stateDetailsLoader`
- The GET Timeline details API Loader container should contain the test id with value as `timelinesDataLoader`
- The State-specific Confirmed cases card should contain the test id value as `stateSpecificConfirmedCasesContainer`
- The State-specific confirmed cases image should contain the alt text as `state specific confirmed cases pic`
- The State-specific Active cases card should contain the test id value as `stateSpecificActiveCasesContainer`
- The State-specific confirmed cases image should contain the alt text as `state specific active cases pic`
- The State-specific Recovered cases card should contain the test id value as `stateSpecificRecoveredCasesContainer`
- The State-specific confirmed cases image should contain the alt text as `state specific recovered cases pic`
- The State-specific Deceased cases card should contain the test id value as `stateSpecificDeceasedCasesContainer`
- The State-specific confirmed cases image should contain the alt text as `state specific deceased cases pic`
- Place the total State-specific confirmed cases count, the text `Confirmed` and the image of the confirmed case inside of the HTML container element with the test id attribute value `stateSpecificConfirmedCasesContainer`
- Place the total State-specific active cases count, the text `Active` and the image of the active case inside of the HTML container element with the test id attribute value `stateSpecificActiveCasesContainer`
- Place the total State-specific recovered cases count, the text `Recovered` and the image of the recovered case inside of the HTML container element with the test id attribute value `stateSpecificRecoveredCasesContainer`
- Place the total State-specific deceased cases count, the text `Deceased` and the image of the deceased case inside of the HTML container element with the test id attribute value `stateSpecificDeceasedCasesContainer`
- The Top Districts unordered list should contain the test id attribute with value as `topDistrictsUnorderedList`
- About Route
- The Loader container should contain the test id value as `aboutRouteLoader`
- The Faqs unordered list should contain the test id value as `faqsUnorderedList`
### Resources
Data fetch URLs
- Home Route:
- Get stats of confirmed, active, recovered, deceased cases state wise (sum of state wise data will give you national wise data) :
```js
'https://apis.ccbp.in/covid19-state-wise-data'
```
- State-Specific Route:
- Get tested count, last updated date and stats of confirmed, active,recovered, deceased cases in specific states:
```js
'https://apis.ccbp.in/covid19-state-wise-data'
//(the response contains stats of all the States, you can use a state code (Ex:- "AP") to get specific state stats.)
```
- Get districts (sort to show Top Districts):
```js
'https://apis.ccbp.in/covid19-state-wise-data'
//(the response contains stats of all the States, you can use a state code (Ex:- "AP") to get specific state stats.)
```
- Sample Response for the API Url `https://apis.ccbp.in/covid19-state-wise-data`:
```json
{
"AP":{
"districts":{
"Anantapur":{
"total":{
"confirmed":157823,
"deceased":1093,
"recovered":156679,
"tested":787085,
"vaccinated1":2659813,
"vaccinated2":1556657
}
}
},
"meta":{
"date":"2021-10-28",
"last_updated":"2021-10-28T20:20:18+05:30",
"population":397000,
"tested":{
"date":"2021-10-27",
"source":"https://dhs.andaman.gov.in/NewEvents/847.pdf"
}
},
"total":{
"confirmed":7651,
"deceased":129,
"recovered":7516,
"tested":592748,
"vaccinated1":293644,
"vaccinated2":195689
}
}
{...}
}
```
- Get timelines to show spread trends (use timelines data for rendering Bar chart, Line chart and other recharts by date-wise):
```js
'https://apis.ccbp.in/covid19-timelines-data/AP'
//(change state code in URL for other states)
//(or)
'https://apis.ccbp.in/covid19-timelines-data'
//(the response contains stats of all the States, you can use a state code (Ex:- "AP") to get specific state stats.)
```
- Sample Response
```json
{
"AN": {
"dates": {
"2021-09-09": {
"total": {
"confirmed": 7577,
"deceased": 129,
"recovered": 7441,
"tested": 508157,
"vaccinated1": 267126,
"vaccinated2": 112124
}
},
"2021-09-09": {...}
}
}
}
```
- About Route:
- Get faqs:
```js
'https://apis.ccbp.in/covid19-faqs'
```
- Sample Response
```json
{
"faq": [
{
"answer": "No.",
"category": "General",
"qno": "1",
"question": "Are you official?"
}
]
}
```
### Stretch Goals
If you complete the main features of the project you can try out the below features as well
**Note:** Just a reminder the additional functionality is just extra practice using the tools we have learned. These are not required. If you do not reach the stretch goals, don't worry
Additional Functionality to be added
- Users should be able to see Themes (Light & Dark) in Navbar
- **State-Specific Route**
- India Map with Specific State should be highlighted
- **Vaccination Details Route**
- An HTTP GET request should be made to the **Vaccination Details API URL**
- **_Loader_** should be displayed while fetching the data
- After the data is fetched successfully, the response received should be displayed
- Page should contain the dropdowns to select state and district
- Page should contain the sites Conducting Vaccination, total Registrations, Total Vaccination Doses sections
- Page should contain the Vaccination Trends for both by **Doses** and **Ages** section
- **Data Fetch URLs**
- **Vaccination Details Route:**
- Get states data:
```js
'https://apis.ccbp.in/covid19-state-ids'
```
- Get Districts data (state specific):
```js
'https://apis.ccbp.in/covid19-districts-data/2'
//(change state id in URL)
```
- Get sites conducting vaccination, total registrations, total vaccination, vaccination trends, vaccination - category, vaccination by age Details:
```js
'https://apis.ccbp.in/covid19-vaccination-data'
//(change date in URL)
```
### Project Submission Instructions
- For Mini Projects, you can submit the test cases at your own pace. But we suggest you to submit the code to know the percentage of completion through test cases and that score will be considered for your interviews
- Also it's important to publish your code frequently using `Step - 4` in the Instructions tab
> ### _Things to Keep in Mind_
>
> - All components you implement should go in the `src/components` directory.
> - **Do not remove the pre-filled code**
> - Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.