Submission URL - https://talentql-color-filter.oluwasetemi.dev/
Project instructions Build a grid app that renders items from a json file. The items would be filtered by shapes and colors. All items would be selected by default, and the grid title should reflect the active filters.
Filters:
-
All should be selected initially
-
Multiple filters can be selected (differentiate the states)
-
Deselecting the last filter should select all filters
Grid title: Title should changed based on the active filters
-
When all the colors and shapes are selected: “All items:”
-
When all the colors and a multiple shapes or all the shapes and multiple colors are selected: “Multiple items:”
-
When all the shapes and a single color is selected: “All red items:”
-
When all the colors and single shape is selected: “All oval items:”
-
When multiple the shapes and a single color is selected: “Multiple red
items:”
- When multiple the colors and single shape is selected: “Multiple oval
items:”
7: When a single color and single shape is selected: “Round oval items:”
Requirements:
- Style with s(css) or styled components
- checked: Make it responsive
- checked: Have authentication (hardcode the credentials)
- checked: Use redux or context API
- checked: Build in Typescript
- checked: Write tests with jest
