The task is to create a wiki of Chess Grandmasters as defined by Chess.com. We are open to different layouts and styles.
- This exercise should be done in React with Typescript.
- We do not expect production-ready code. However, we do expect the candidate to point out sub-optimal compromises taken to complete the task
📖 Documentation for chess.com's API can be found here: https://www.chess.com/news/view/published-data-api#pubapi-endpoint-games-archive
Using the chess.com API, create a page that lists all the Grandmasters.
API endpoint: https://api.chess.com/pub/titled/GM
Extend the page that you created for the previous step so that if you click on a listed grandmaster, it should take you to a profile page displaying the information from the player endpoint.
API endpoint for player: https://api.chess.com/pub/player/{username}
On the profile page for a grandmaster that you created in step 2, add a clock that displays the amount of time since they were last online. The time since the user was active should be displayed as HH:MM:SS, and it should update every second.
To resolve the exercise we use some 3rd party libraries
- Typescript
- React
- Tackstack router
- Shadcn
- Radix
- Tailwind
- React country flag
- javascript-time-ago
- Vite
- Playwright
- [Prettier]
- [Eslint]
git clone [email protected]:javierlopezdeancos/fe-technical-challenge.git
To run the exercise you should have installed nodejs v22.x and npm package manadgement.
In the directory fe-technical-challenge root
npm i
npm run dev
I choice a set of little example of tests that run with playwright. To run this simple example suite you should run:
npm run test
Note
You can run a reporter with the last tests reports run running the command npm run reports