The goal of this coding exam is to quickly get you off the ground with setState Callback Function.

Refer to the video and image below:

Failure View

Design Files

Click to view

Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Success
Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Failure

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

When the app is opened initially,
- An HTTP GET request should be made to projectsApiUrl with query parameter as category and its initial value as ALL
- The loader should be displayed while fetching the data
- After the data is fetched successfully, display the projects list received in the API response
When a category option is selected,
- An HTTP GET request should be made to the projectsApiUrl with the query parameter as category and its value as the id of the active category option
- The loader should be displayed while fetching the data
- After the data is fetched successfully, display the projects list received in the API response
The App component is provided with categoriesList. It consists of a list of category objects with the following properties in each category object

Key Data Type

id String

displayText String

Key	Data Type
id	String
displayText	String

API Requests & Responses

projectsApiUrl

API: `https://apis.ccbp.in/ps/projects`

Example: `https://apis.ccbp.in/ps/projects?category=ALL`

Method: `GET`

Description:

Returns a response containing the list of all projects

Response:

{
  "projects": [
      {
        "id": "f680c5fb-a4d0-4f43-b356-785d920208df",
        "name": "Music Page",
        "image_url": "https://assets.ccbp.in/frontend/react-js/projects-showcase/music-page-img.png"
      },
       ...
  ],
  "total": 34
}

Important Note

Click to view

The following instructions are required for the tests to pass

Each category option in the HTML select element should have the value attribute as the value of key id and text content as the value of the key displayText from the categoriesList provided
Wrap the Loader component with an HTML container element and add the data-testid attribute value as loader to it
The project image in each project item should have the alt as the value of the key name from each project object in the projects API response

Resources

Image URLs

https://assets.ccbp.in/frontend/react-js/projects-showcase/website-logo-img.png alt should be website logo
https://assets.ccbp.in/frontend/react-js/projects-showcase/failure-img.png alt should be failure view

Colors

Hex: #f1f5f9

Hex: #cbd5e1

Hex: #475569

Hex: #ffffff

Hex: #328af2

Hex: #e2e8f0

Hex: #e6e9ec

Font-families

Roboto

Things to Keep in Mind

All components you implement should go in the src/components directory.

Don't change the component folder names as those are the files being imported into the tests.

React-Js_Project-46_Projects_Showcase

nandhakumar055 / react-js_project-46_projects_showcase Goto Github PK