Nxt Trendz

Refer to the images below:

Failure View

Design Files

Click to view

• Extra Small (Size < 576px) and Small (Size >= 576px) - Products
• Extra Small (Size < 576px) and Small (Size >= 576px) - No Products
• Extra Small (Size < 576px) and Small (Size >= 576px) - Failure View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Products
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No Products
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Failure View

Set Up Instructions

Click to view

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

Completion Instructions

API Requests & Responses

productsApiUrl

API: https://apis.ccbp.in/products

Example: https://apis.ccbp.in/products?sort_by=PRICE_HIGH&category=4&title_search=machine&rating=4

Method: GET

Description:

Returns a response containing the list of Products

Success Response

{
  "products": [
    {
      "title": "Front Load Machine",
      "brand": "Samsung",
      "price": 22490,
      "id": 24,
      "image_url": "https://assets.ccbp.in/frontend/react-js/ecommerce/appliances-washing-machine.png",
      "rating": 4.5,
    },
      ....
  ]
}

Components Structure

Implementation Files

Use these files to complete the implementation:

• src/components/AllProductsSection/index.js
• src/components/AllProductsSection/index.css
• src/components/FiltersGroup/index.js
• src/components/FiltersGroup/index.css

Important Note

Click to view

The following instructions are required for the tests to pass

• Home Route should consist of / in the URL path

• Login Route should consist of /login in the URL path

• Products Route should consist of /products in the URL path

• Cart Route should consist of /cart in the URL path

• No need to use the BrowserRouter in App.js as we have already included in index.js

• User credentials

   username: raja
   password: raja@2021
  

• The rating stars images in the route should have the alt attribute value as rating {ratingId}

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/nxt-trendz/nxt-trendz-no-products-view.png alt should be no products
• https://assets.ccbp.in/frontend/react-js/nxt-trendz/nxt-trendz-products-error-view.png alt should be products failure