myRetail is a vertical slice of an online retail store. This consists of a product detail page with the ability to add the product to the user's cart.
Run npm install
in both client
and server
directories
Run npm start
in the server
directory
Run npm build:prd
in client
then go to localhost:3000
. The app will redirect to a product detail page (PDP) with a hard-coded product id to simulate a PDP url.
Proposed CI flow:
Run npm start
in client
. This will start a webpack-dev-server
server instance and automatically open a new browser window.
Stack:
- React
- Redux
- Styled-Components
- Jest + Enzyme and WebdriverIO for testing
Since the focus of this app is on the front-end, the Express server is very minimal. Some basic APIs are available such as addToCart
, but as far as persistence goes, it's all in-memory and simply serves to enable the front-end to function realistically.
I chose Redux since I don't have as much experience with it as I would like given its popularity and utility, but for a small, self-contained project like this I think Redux is unnecessary and overcomplicates things. However it can lay the foundation for future features - and in our pretend case-study this is intended to be a jumping off point future enhancements. A simpler and easier to understand approach might be to use React's context API its own inside containers. The selectors, however, are still handy given the gnarly structure of the dummy json response. Another improvement would be to do as much data processing on the server as possible, such as parsing dates and rearranging the data how the UI most easily consume it.
npm test
for unit tests and npm run e2e
for end-to-end tests. Be sure to start the node server and stop the webpack-dev-server before running e2e
.
- Improve responsiveness implementation.
- Increase test coverage :)
- Production webpack config could be more optimized (for this demo especially, the library overhead is pretty high even though its intentional)
- The "ceremony" in handling the state from
WithProduct
is a bit much, especially with duplication of props fromProductContainer
toProductDetail
. One quick solution would be to remove ProductContainer and useWithProduct
withProductDetail
- Selector complexity can be reduced by pre-processing the response data on the server. Reselect could be used as well to help some potential memoization.
- One of the the weakest parts of the app functionality-wise is the error handling.
- Even though the design mockup doesn't have a visible indicator of how many items are in the cart, I think its necessary.
- Add accessability affordances (bring in react-a11y to assess)
- Adopting TypeScript for static typing. I'd prefer it over Flow simply due to stronger overall support
- For a real app, the structure would need to be rearranged so ProductContainer isn't the core, but just another page. We could also use React-Router if we wanted this to be an single page app.
- Hooks ;)