This take-home project is called the Condition Builder. This tool allows you to load an array of data and layer in and/or conditions to filter the data.  

• User can load array of data from an URL. Example URL: https://data.nasa.gov/resource/y77d-th95.json
• User can build or conditions concatenated with and conditions.
  • For an example, any c{n} resolved to be a boolean (ex. name equals to "something"), then the condition can be formed as (c1 || c2 || c3) && (c4 || c5).
• User can add or condition by pressing the plus button at the end of each row.
• User can add and condition by pressing the and button below each card container.
• User can see the list of loaded data on the bottom of the page.
• User can see the filtered data list when valid conditions are built.
• Visual feedback on where new or condition will be inserted when user hover over plus button (optional)
• Input validations
  • For comparison operators (Greater Than, Less Than), the entered value must be number.

• Dev Enviroment/Build Tool
  • Vite
• UI Framework/Language
  • React / TypeScript
• Design System
  • Material UI (MUI)
• Unit Testing
  • Jest

If this application was intended for production/at scale, I would include the following:

• 🔛 Add E2E cypress tests.
• 📈 Add code-coverage checks to build process to ensure coverage remains at/above a pre-determined level (That said, more unit tests 😃)
• ✅ Implement/expand validation using joi or yup.
• 🌎 Support language localization using react-intl.
  • ✂️ Extract language strings to centralized location.
• 📦 Semantic versioning
• 🐉💧 Allow drag/drop of conditions to change order/sequence.
• ☁️ Allow user to save/load conditions to either localStorage or in the cloud.
• 📚 Refactor theme/styles into a lib
• ❌ Improve error handling/checking e.g:
  • 🚩 when user enters a bad url
  • 🚩 the request for a valid url fails
  • 🚩 the response from the url is not a valid key/value pair

• node >= v14.21.3

First, clone the repository locally, then run the following:

$ npm install # Install dependencies (required for every step hereafter)
$ npm run dev # Start the development server

$ npm run build # Required for preview task below

$ npm run preview

$ npm run unit-test

$ npm run lint