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

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.