/projectShowCase

Primary LanguageJavaScript

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

failure view

Design Files

Click to view

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
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.