https://github.com/imransilvake/bayes-challenge
A React, Hooks and Redux (RTK) based application coding challenge from Bayes Esports.
https://github.com/imransilvake/bayes-challenge
bootstrap hooks moment react redux-toolkit rest-api
Last synced: 2 months ago
JSON representation
A React, Hooks and Redux (RTK) based application coding challenge from Bayes Esports.
- Host: GitHub
- URL: https://github.com/imransilvake/bayes-challenge
- Owner: imransilvake
- License: mit
- Created: 2020-09-09T18:18:56.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-10T10:18:12.000Z (almost 6 years ago)
- Last Synced: 2025-03-26T15:54:25.784Z (about 1 year ago)
- Topics: bootstrap, hooks, moment, react, redux-toolkit, rest-api
- Language: TypeScript
- Homepage:
- Size: 408 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bayes Challenge
A React, Hooks and Redux (RTK) based application coding challenge from Bayes Esports.
## Content
1. **Sign in**: Use the Fetch API to make a `POST` request to `http://localhost:8080/api/sign-in` to receive a token.
- The `POST` body should look like `{ "email": "anything@anything.com", "password": "anything" }`.
- _(bonus)_ This token expires in 30 seconds. When the API returns `401 - Unauthorized`, a modal should pop up allowing the user to sign in again.
2. **Load data**: Use the token to send a `GET` request for e-sport match data from `http://localhost:8080/api/matches?page=0`.
- The token should be put in the `Authorization` header with a value of: `Bearer `.
- Put the data into the Redux store.
3. **Display data**: Create a new page to show the matches available from the Redux store.
- When a user arrives on the new page, the matches should be cleared from the Redux store and loaded again from the API
- The API response is paginated, not all matches are returned in a single request, add a "load more" button unless no more matches can be loaded.
- While loading data, display a loading symbol in the application.
- _(bonus)_ Filter the matches based on game title, add checkboxes to the interface to let users decide what they want to see.
- _(bonus)_ Load more matches when the user scrolls to the bottom of the screen, a.k.a. infinite scroll.
4. **Save changes**: Send JSON data of a match in the body of a `POST` request to `http://localhost:8080/api/match`.
- Allow users to archive matches.
## Libraries and Frameworks
#### External
- [X] [TypeScript](https://www.typescriptlang.org/)
- [X] [Redux Toolkit](https://redux-toolkit.js.org/)
- [X] [Redux Devtools Extension](https://github.com/zalmoxisus/redux-devtools-extension)
- [X] [Bootstrap](https://react-bootstrap.github.io/)
- [X] [FontAwesome](https://fontawesome.com/)
## Information
1. Execute `npm run server` to host the API on http://localhost:8080.
2. Execute `npm install` in the root folder of the challenge.
3. Execute `npm start` to host the React application on http://localhost:3000.