Skip to content

vikaskumaryadav13/Tech-Era-ReactJS-imt-1C.2

Repository files navigation

The goal of this coding exam is to quickly get you off the ground with Fetching and Routing.

Refer to the images below:

Success View

success view

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, Home Route should be displayed

  • Home Route

    • When the Home Route is opened,
      • An HTTP GET request should be made to the coursesApiUrl
        • The loader should be displayed while the HTTP request is fetching the data
        • If the HTTP GET request made is successful, then the list of courses received in response should be displayed
        • If the HTTP GET request made is unsuccessful, then the Failure view should be displayed
          • When the Retry button is clicked, then an HTTP GET request should be made to coursesApiUrl
    • When a course is clicked, then the page should be navigated to the Course Item Details Route
  • Course Item Details Route

    • When the Course Item Details Route is opened,
      • An HTTP GET request should be made to the courseDetailsApiUrl with the id as path parameter
        • The loader should be displayed while the HTTP request is fetching the data
        • If the HTTP GET request made is successful, then the course details received in response should be displayed
        • If the HTTP GET request made is unsuccessful, then the Failure view should be displayed
          • When the Retry button is clicked, then an HTTP GET request should be made to courseDetailsApiUrl
  • Not Found Route

    • When a random path is provided in the URL, then the page should be navigated to the Not Found Route
  • When the website logo image is clicked, then the page should be navigated to the Home Route

API Requests & Responses

coursesApiUrl

API: https://apis.ccbp.in/te/courses

Method: GET

Description:

Returns a response containing the list of all courses

Response:

{
  "courses": [
      {
        "id": "736d1108-d98b-482f-bfd6-234498c3571f",
        "name": "HTML",
        "logo_url": "https://assets.ccbp.in/frontend/react-js/tech-era/html-logo-img.png"
      },
       ...
  ],
  "total": 16
}

courseDetailsApiUrl

API: https://apis.ccbp.in/te/courses/:id

Method: GET

Description:

Returns a response containing details of the course

Response:

{
  "course_details": {
    "id": "736d1108-d98b-482f-bfd6-234498c3571f",
    "name": "HTML",
    "image_url": "https://assets.ccbp.in/frontend/react-js/tech-era/html-img.png",
    "description": "The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML documents from a web server or local storage and render the documents into multimedia web pages."
  }
}

Important Note

Click to view

The following instructions are required for the tests to pass

  • Home Route should consist of / in the URL path
  • Course Item Details Route should consist of /courses/:id in the URL path
  • No need to use the BrowserRouter in App.js as we have already included in the index.js file
  • Wrap the Loader component with an HTML container element and add the data-testid attribute value as loader to it
  • Each course logo image in the Home Route should have the alt as the value of the key "name" from each course object in the courses list
  • Each course image in the Course Item Details Route should have the alt as the value of the key "name" in the course details object

Resources

Image URLs
Colors
Hex: #f1f5f9
Hex: #1e293b
Hex: #475569
Hex: #ffffff
Hex: #4656a1
Hex: #64748b
Hex: #e8e8e8
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.
  • 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.