waseem496 / ecommerce-website-reactjs Goto Github PK

• 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

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

The app must have the following functionalities

• When an authenticated user opens the Products Route,

  • An HTTP GET request should be made to productsApiUrl with jwt_token in the Cookies and query parameters title_search, category, and rating with initial values as empty strings

    • loader should be displayed while fetching the data
    • After the data is fetched successfully, display the products list received in the response
    • If the HTTP GET request made is unsuccessful, then the Failure view should be displayed

  • When a non-empty value is provided in the Search Input and the Enter button is clicked

    • Make an HTTP GET request to the productsApiUrl with jwt_token in the Cookies and query parameter title_search with value as the text provided in the Search Input
    • loader should be displayed while fetching the data
    • After the data is fetched successfully, display the products list received in the response

  • When a Category is clicked

    • Make an HTTP GET request to the URL productsApiUrl with jwt_token in the Cookies and query parameter category with value as the id of the category clicked
    • loader should be displayed while fetching the data
    • After the data is fetched successfully, display the products list received in the response

  • When a Rating is clicked

    • Make an HTTP GET request to the URL productsApiUrl with jwt_token in the Cookies and query parameter rating with value as the id of the rating clicked
    • loader should be displayed while fetching the data
    • After the data is fetched successfully, display the products list received in the response

  • When the Clear Filters button is clicked

    • All the filters applied should be reset to initial values
    • Make an HTTP GET request to the URL productsApiUrl withjwt_token in the Cookies and without any filters
    • loader should be displayed while fetching the data
    • After the data is fetched successfully, display the products list received in the response

  • When multiple filters are applied, then the HTTP GET request should be made with all the filters that are applied

  • For example: When the Electronics Category is clicked and rating 4 and above is clicked the productsApiUrl will be as follows

  const apiUrl = 'https://apis.ccbp.in/products?sort_by=PRICE_HIGH&category=2&title_search=&rating=4'

  • If the HTTP GET request returns empty products list, then No Products View should be displayed.

  • If the HTTP GET request made is unsuccessful, then the Failure view should be displayed

  • The AllProductsSection component will consist categoryOptions. It consists of a list of category option objects with the following properties in each category option object

  Key	Data Type
  categoryId	String
  name	String

  • The AllProductsSection component will consist ratingOption. It consists of a list of category rating option objects with the following properties in each rating option object

  Key	Data Type
  ratingId	String
  imageUrl	String

productsApiUrl

Returns a response containing the list of Products

{
  "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,
    },
      ....
  ]
}

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

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}

• 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

• Roboto