akshaykumar0999 / travelguideapp Goto Github PK

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

• Download dependencies by running npm install
• Start up the app using npm start

When the app is opened initially,

• An HTTP GET request should be made to travelGuidePackagesApiUrl
• loader should be displayed while fetching the data
• If the HTTP GET request made is successful, the list of packages should be displayed

travelGuidePackagesApiUrl

API: https://apis.ccbp.in/tg/packages

Method: GET

Description:

Returns a response containing the list of packages

Response

{
    "packages":[
        {
        "id":1,
        "name":"Best of Paris in 7 days tour",
        "image_url":"https://assets.ccbp.in/frontend/react-js/travel-guide/paris-img.png",
        "description":"Paris, France capital, is a major European city and a global centre for art, fashion, gastronomy, and culture. Its 19th-century cityscape is crisscrossed by wide boulevards and the River Seine."
        },
        ...
   ],
}

The following instructions are required for the tests to pass

• The image in each package item should have the alt as the value of the key name from each package object in the packages list
• Wrap the Loader component with an HTML container element and add the data-testid attribute value as loader to it as shown below

<div data-testid="loader">
  <Loader type="TailSpin" color="#00BFFF" height={50} width={50} />
</div>

• Roboto