- Quick Overview – How I approached the task and the tools I used.
- Running the App – How to run the both the app and the test suites.
- Improvements – If I had more time, these are some improvements I'd make.
- Notes – A few thoughts after building this kata.
Further to the image, each feature was driven with an outer failing acceptance test. I then followed the usual TDD cycle and wrote failing unit tests at the componentand reducer level. Once each feature passes I know I can then refactor safely and move onto the next feature. I tried to make each test pass using "the simplest thing that works", and then refactored the code later.
Components are split up into smaller, reusable "atomic elements" using the Atomic Design methodology. This makes each smaller component easier to style (as styles are written for the component in isolation), and easier to test (as they're inherently smaller and less complex) and easier to reuse.
More information on Atomic Design
- React / Redux
- Styled Components
- Enzyme / Jest
- Stylelint, ESLint, Prettier
- Wallaby.js
Before running any command, you'll need to run npm i to install all the required packages.
Runs the app in development mode.
Open http://localhost:5000 to view it in the browser.
The page will automatically reload if you make changes to the code.
You will see the build errors and lint warnings in the console.
Builds the app for production to the dist folder.
Once you have run the build, you can run the app in production mode using npm start.
Runs the suite of unit tests using Jest.
All test results will be logged to the console.
You can also run wallaby.js while inside your editor to have the tests run live with instant feedback!
Opens the Cypress browser to run the acceptance tests.
You can leave Cypress open while you're writing tests and they will automatically run for you on save.
Make sure you have the app running locally (npm run dev) so Cypress has something to run the tests on!
Read all the features of Cypress
As I was building the app I thought of a few improvements that would improve the usability of the app and the quality of the production code:
- Add IE11 support
- Add icons and a hotel count next to each facility filter.
- Strip out
data-testattributes for production using a babel plugin. - Add react-axe to watch for a11y issues, and set up pa11y to audit the built app.
- Lazy load the images to reduce the initial page load time and payload.
- Optimise the production webpack build to reduce the bundle size.
- Render the app server-side to improve render times and to allow users without JS to see the app.
- Redux added far too much complexity for an app this size, and had there not been a restriction, I would have used Hooks instead. There is only a single piece of information in the state, and it only has a single consumer. The simplest thing that works in this case would have been to maintain the filters state in the page and add Redux once the state becomes more complex, or if we need to maintain the state across multiple pages.
- I spent more than the couple of hours suggested in the guidelines, but I got the initial tests passing quickly considering the time it took to setup up the Redux boilerplate code. I also didn't want to leave the app half finished, so I invested more time into making it look visually presentable too. I value quality, and aim to reflect that in everything I do.