Toy front-end project displaying a list of games
Run the app:
npm install
npm start
Run the test suite:
npm test
This project uses these great open-source tools:
| Category | Tools |
|---|---|
| Bundling | parcel-bundler |
| UI | react |
| Routing | react-router-dom |
| Styling | styled-components |
| Testing | jest, react-testing-library |
| Formatting | prettier |
- automated tests
- unit tests
- snapshots
- header with logo and title
- gaming platform filter
- game card grid
- game cards
- automatic layout
- game details
- in-app routing
- link to details on game card
- link to catalog in header
- platform name in catalog header
- read me
- external font
- game card grid
- responsive blank space
- responsive card size
- mobile version
- margins
- element reflow
- proper container sizing/background during image load
- favicon
- spinner when loading images
- fade in/out animations
- manual tests
- multiple resolutions
- other browsers than chrome
- other devices than my laptop
- visual regression testing (screenshot comparison)
- server-side rendering
- fetch game data from a server
- fetch the JSON files? (redux+thunk/saga?)
- call a real API to avoid loading all descriptions at once? (graphql?)
- share typography and margin values instead of duplicating them
- enable code splitting for catalog/details routes
- i18n
- a11y