This is a business inventory front end, built using React components and Redux state management. It enables a business owner to view all existing stock items and add new items to the inventory.
The project is simply a front end implementation (non-persistent), but the addition of redux-thunk and async actions would enable it to persist and hydrate with a remote server.
The form enforces simple validation to prevent invalid items from being added:
The project is styled using flexbox and is responsive at small screen sizes using a simple @media query:
The component hierarchy is as follows:
App (wrapped in `Provider`)
|
|
StockItemsContainer (`connect`ed to `store` using `react-redux`)
|
|
|---------------------------|
StockItemsForm StockItemsList
StockItemsContainer takes stockItems and actions props (see PropTypes), and StockItemsForm takes an addItem callback function as its only prop. StockItemsList is a functional stateless component that takes an array of items and renders it as a list.
Clone this repository and run npm install, then run npm run start. For the production build, run npm run build.
This project is fully tested (only exception is internal onChange functions of the StockItemsForm component) using Jest, Enzyme, and Sinon:
Component acceptance tests are available for StockItemsList and StockItemsForm:
Future improvements include:
- More robust form validation (coerce price string to number)
- Cross-browser testing (e.g., working date widget in Firefox)
- 100% test coverage (test internal change handlers for
StockItemsForm) - Table sorting/filtering by column and value
- ...