This is a React project designed to show a list of games with their publishers and platforms.
It shows a list of video games that are filtered by the names of their publishers and the platforms they feature on.
Typing a publisher name or selecting a platform updates the query string parameters in the address bar, which is bookmarkable.
Filtering logic is applied to the view when the page is reloaded and can be updated in real time.
This project makes use of the following:
- create-react-app for initial set up.
- Redux Toolkit for state management
- The History WebAPI and URLSearchParams to manage bookmarking.
- React Testing Library and Jest for testing.
- UI styling with styled components
- Import path aliasing for cleaner imports with Craco to facilitate this.
You will need NodeJS (used 18.17.0 here) and yarn.
- open the project root directory
$> yarnto install dependencies.$> yarn startto boot the server and the client.$> yarn test:cito run all tests just once.$> tarn test:coverageto run all tests with coverage.$> yarn testto run tests in watch mode.$> yarn lint:styleto run the linter on all styles.$> yarn checksto run tests with coverage and then lint styles.$> yarn nuketo remove and reinstall all dependencies.
- Created generic components to render lists and list items without the need to repeat logic and hamper scalability.
- Abstracted mapping and filtering functionality and improved separation of concerns.
- Redux Toolkit which removes a lot of the boilerplate for setting up Redux.
- Implement debouncing for when filtering is applied by typing.
- Add tests for the search service and state and reach full test coverage.
- Responsive styling for the UI.
- Pass filtering logic to the server with query string parameters. This is all done client-side for now.
- Use a tool like Lerna to run the client and server.
- Handle error scenarios such as a slow or non-existent connection. Right now it's the happy path.