https://github.com/matfin/videogame-archive

Demonstrating generic components with Typescript and React
https://github.com/matfin/videogame-archive

craco jest react redux-toolkit styled-components typescript

Last synced: about 2 months ago
JSON representation

Demonstrating generic components with Typescript and React

• Host: GitHub
• URL: https://github.com/matfin/videogame-archive
• Owner: matfin
• Created: 2024-04-24T19:34:25.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-24T19:45:49.000Z (9 months ago)
• Last Synced: 2024-12-10T20:33:48.449Z (about 2 months ago)
• Topics: craco, jest, react, redux-toolkit, styled-components, typescript
• Language: TypeScript
• Homepage:
• Size: 221 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend code project

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](https://create-react-app.dev/) for initial set up.

- [Redux Toolkit](https://redux-toolkit.js.org/) for state management

- The [History WebAPI](https://developer.mozilla.org/en-US/docs/Web/API/History_API) and [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) to manage bookmarking.

- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [Jest](https://jestjs.io/) for testing.

- UI styling with [styled components](https://styled-components.com/)

- Import path aliasing for cleaner imports with [Craco](https://craco.js.org/) to facilitate this.

## Install and run

You will need [NodeJS](https://nodejs.org/en) (used 18.17.0 here) and [yarn](https://yarnpkg.com/).

- open the project root directory

- `$> yarn` to install dependencies.

- `$> yarn start` to boot the server and the client.

- `$> yarn test:ci` to run all tests just once.

- `$> tarn test:coverage` to run all tests with coverage.

- `$> yarn test` to run tests in watch mode.

- `$> yarn lint:style` to run the linter on all styles.

- `$> yarn checks` to run tests with coverage and then lint styles.

- `$> yarn nuke` to remove and reinstall all dependencies.

## What was learned

- 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](https://redux-toolkit.js.org/) which removes a lot of the boilerplate for setting up Redux.

### Improvements roadmap

- Implement [debouncing](https://davidwalsh.name/javascript-debounce-function) 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](https://lerna.js.org/) to run the client and server.

- Handle error scenarios such as a slow or non-existent connection. Right now it's the happy path.