/Nxt-Trendz-Products-Filters-Group-ReactJS

Primary LanguageJavaScript

In this project, let's build a Nxt Trendz - Products Filters Group app by applying the concepts we have learned till now.

Refer to the images below:


products filters group output

Failure View


products filters group failure output

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 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
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
component-breakdown-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
Colors
Hex: #f1f5f9
Hex: #0f172a
Hex: #12022f
Hex: #64748b
Hex: #475569
Hex: #0967d2
Hex: #ffffff
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.