Below is a detailed description from the developers on how they built the final working application.

—

Sorting the inventory
To tackle H&M’s extensive inventory, we looked at the brand’s “style concepts” (collections of items divided by style) and renamed and reorganized them into clear, brand-agnostic questions and answers. We strategically ordered the questions so that every combination of answers links to a specific style concept, and also added questions that would further filter items within each concept.

Launching the web application
We used React, Redux and Node.JS as our tech stack, and an API to retrieve the inventory data from H&M. We conducted API testing through Postman, and used Github for source control. Additionally, we wrote several queries in R to scrape data from the H&M API results to build the filtering algorithms. After we determined an effective way to query the data recommendations, we set out to develop the skeleton of the web app in React. From here, we implemented the middleware in Redux that would later connect the front end to the back-end API functions. We went through and created several lists of functions that summarized all functionality throughout the site, and then implemented the state management. Once this was done, we created a ‘StringBuilder’ in Node that would take the department, collection and item type from the survey and build a query request that would return a list of items that fit those requirements.

Building the style algorithm
After the items specified by the query string are returned to the client, the filtering for color and shirts/pants or women’s one-pieces or two-pieces is conducted in the recommendation component. This was done to optimize performance if the user chooses to go back and change their style selections. To build the filtering algorithm, we issued a query in Postman for all items in the men’s and women’s inventory, then used R to create lists of all unique item type string values and color string values for each department. Within the Github repository, we created a series of arrays containing all values associated with specific types of clothing or color. We then used for-loops to check each item in the corresponding arrays for item types against the specific array of string values corresponding to the option selected in the survey. Item types were filtered by type, then color, and then the filtered array of items was passed down to the recommendation component.

Testing
While writing the query string builder, testing the query strings with postman was essential for quickly writing and running different queries. Originally, we could only query about half of the collections correctly, but through iterative Postman testing, we were able to reach 100% functionality across all H&M clothing collections. Testing was also important for building the filtering algorithms. Because not all collections contained items that fit the options available in the survey, we iteratively tested the filtering with every possible collection, item type, and color option to determine which item arrays for each were filterable.