This React application is listing some colors and shapes and allows filtering them.
The data is read from shapes.json file found under the public folder.
The items listed can be filtered by shape and color. The selected filters reflect to the grid title.:
Details:
Filters:
- All the filters are selected by default.
- Multiple filters can be selected, selected filter changes their color or
have a border.
- Deselecting the last filter, defaults to all selected.
Grid Title
The title reflects the changes based on the selected filters, please see examples below:
a) When all the colors and shapes are selected: “All items:”
b) When all the colors and a multiple shapes are selected: “Multiple items:”
c) When all the shapes and multiple colors are selected: “Multiple items:”
d) When all the shapes and a single color is selected: “All red items:”
e) When all the colors and single shape is selected: “All round items:”
f) When multiple the shapes and a single color is selected: “Multiple red items:”
g) When multiple the colors and single shape is selected: “Multiple round items:”
h) When a single color and single shape is selected: “Round red items:”
## Notes:
– The grid items ares painted with css only
– The application is responsive
– The listing of the items and filtering is done using redux
You need to have NodeJs installed first on your system. Please download this and follow the installation steps from Node JS Download Page
Once installed please clone this repo https://github.com/petrican/shapes-redux.git
Change the directory to shapes-redux
cd shapes-redux
Install the dependencies by running
npm install
After dependencies are installed you can run the app in dev mode with
npm start
You should be able to seee the app loaded on Local: http://localhost:3000/ so point your browser to that address if that does not open automatically.
Note: If you want to build for prod you'll need to run 'npm run build'