If you wonder what this should do

see exercise description. You can check how application works on this video

If you want to know how I proceeded in this project

Whole project is in typescript - apart Jest unit tests and Cypress E2E tests; these uses pure js.

1. State management

   I used react ctx with custom made state management similar to 'redux' solution.

   Reasoning: I'm fully aware that for this example, simple prop passing would be an easier and cleaner solution. What I aimed to show was that I'm capable of implementing more complex state management without any 3rd party solution. In the real world, I'd use probably react-apollo and thus local cache queries for state management.

2. Storage

   Project uses localforage for a persistence of wishlisted books.

3. Components and accessibility

   All components are self-made and responsive - apart from loading SVG during data fetching and partially re-used search input. I applied techniques that should ensure that this app provides very good results regarding accessibility. During development I used react-axe for most precise guideline following with eslint plugin: jsx-a11y/recommended

4. Styling

   After some thinking, I've decided to use styled-components for styling. I've provided an example of the theme set-up with for typing support in typescript. To improve the power of css-in-js solution, I've decided to re-use some helpful ideas from sass world via package polished

5. Testing & Project Development tweaks

   Jest unit tests and Cypress E2E tests; yarn test:unit yarn test:e2e -- make sure app is running before e2e tests by yarn start I also uses rollbar for error reporting - and pre-commit hook doing linting + formatting running via husky and lint-staged

Bonus: There is small example of self-made hook and whole project uses FC based concept of writing.

Potential improvements

Project right now exceeds requirements from the exercise description. Though it doesn't mean there can't be improvement :)

1. usage of router for routing to separate page with wishlisted books
2. caching of requests to show immediate responses and provide possibility of optimistic updates
3. pagination or infinite loading -- I had to limit work on this project, so I didn't proceed with this solution, though I originally wanted.
4. better visuals + usage of motion for animations