{"id":28566818,"url":"https://github.com/salsify/condition-editor-coding-exercise","last_synced_at":"2025-06-10T15:39:18.833Z","repository":{"id":32924565,"uuid":"36520186","full_name":"salsify/condition-editor-coding-exercise","owner":"salsify","description":"A Coding Exercise for UI Developers","archived":false,"fork":false,"pushed_at":"2021-01-25T18:50:00.000Z","size":331,"stargazers_count":0,"open_issues_count":0,"forks_count":4,"subscribers_count":36,"default_branch":"master","last_synced_at":"2024-04-08T15:40:27.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salsify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-29T17:52:04.000Z","updated_at":"2024-04-08T15:40:27.373Z","dependencies_parsed_at":"2022-07-17T20:41:38.221Z","dependency_job_id":null,"html_url":"https://github.com/salsify/condition-editor-coding-exercise","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salsify%2Fcondition-editor-coding-exercise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salsify%2Fcondition-editor-coding-exercise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salsify%2Fcondition-editor-coding-exercise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salsify%2Fcondition-editor-coding-exercise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salsify","download_url":"https://codeload.github.com/salsify/condition-editor-coding-exercise/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salsify%2Fcondition-editor-coding-exercise/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259104095,"owners_count":22805808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-10T15:39:11.076Z","updated_at":"2025-06-10T15:39:18.825Z","avatar_url":"https://github.com/salsify.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Product Filtering Condition Editor UI\nA Coding Exercise for UI Developers\n\n# Introduction\n\nMany capabilities of Salsify are built around filtered sets of products. Products at Salsify consist of properties and their values. Properties have a datatype.\n\nIn order to create filtered sets of products in Salsify we created a condition editor. This editor is used to build a filter that Salsify applies to the full set of products. The resulting set of products, presented as a list, is updated as filters are added or changed.\n\nIn order to create a filter users must choose a property, an operator, and one or more values. Due to the differences in property datatypes, not all operators apply to all properties.\n\nTo complete this exercise please build a user interface to create a filter and update a list of products to reflect the results. Use the exercise to demonstrate not only a solution to the problem but your approach to software design and testing.\n\nProvide us with an archive containing the results of your work and a README file with a guided tour of your work, notes on your development process, how long you spent on the exercise, what assumptions you made, etc.  If you wish, this may also be presented as a live site.  In that case simply provide a link to the site and the README file mentioned above.\n\n# Specification\n\nThis repository contains a mock `datastore` which includes sample products, property definitions including data types, and the complete set of filter operator. Using this datastore please create a web user interface with the following behavior:\n\n* A user can create a single filter\n* Filters have the form `[property] [operator] [property value]`\n* Creating or updating a filter causes the the list of products to update\n* A user can clear the filter to see all products\n\nIncluded are [wireframes](http://salsify.github.io/condition-editor-coding-exercise/docs/wireframe.pdf) to illustrate a potential implementation. Feel free to approach this solution in the manner you see fit, but keep in mind we will evaluate your submission more on software design than user experience.\n\n# Tips and Recommendations\n- No other Operators or data types will be introduced; they are static.\n- Properties and Products vary from customer to customer, you cannot depend on having the same properties or products available each time this application loads\n\n## Properties Types/Operators\n\nOperators define the relationship between properties and property values. Certain operators are only valid for certain property types. The behavior of each operator and the valid operators for each property type are defined as follows:\n\n| Operator | Description |\n-----------|--------------\n| Equals   | Value exactly matches |\n| Is greater than | Value is greater than |\n| Is less than  | Value is less than |\n| Has any value | Value is present |\n| Has no value  | Value is absent  |\n| Is any of     | Value exactly matches one of several values |\n| Contains      | Value contains the specified text |\n\n\n| Property Type | Valid Operators |\n---------------- | ----------------\n| string | Equals |\n| | Has any value |\n| | Has no value |\n| | Is any of |\n| | Contains |\n| number | Equals |\n| | Is greater than |\n| | Is less than |\n| | Has any value |\n| | Has no value |\n| | Is any of |\n| enumerated | equals |\n| | Has any value |\n| | Has no value |\n| | Is any of |\n\n### Examples\n\nHere are some example property \u0026 input combinations and a description of their expected output. This table is meant to further clarify the expected behavior of the aforementioned operators.\n\n| Operator | Example Property | Example Value | Expected Output |\n| -------- | ---------------- | ------------------- | --------------- |\n| Equals | `Name` | `Headphones` | Products where `Name` is exactly `Headphones` |\n| Is greater than | `Price` | `20` | Products where the `Price` \u003e `20` |\n| Is less than | `Price` | `20` | Products where `Price` \u003c `20` |\n| Has any value | `Description` | --- | Products where `Description` is defined/is NOT null |\n| Has no value | `Description` | --- | Products where the `Description` is not defined/IS null |\n| Is any of | `Name` | `Headphones, Keys` | Products where the Name is either exactly `Headphones` OR exactly `Keys` |\n| Contains | `Name` | `phone` | Products where the Name string CONTAINS `phone` (e.g. `Headphones`, `Telephone`, `Cell Phone`, `Phone`) |\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalsify%2Fcondition-editor-coding-exercise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalsify%2Fcondition-editor-coding-exercise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalsify%2Fcondition-editor-coding-exercise/lists"}