The Volleyball Federation has decided to use an online selling platform for the next season and our company has been chosen for implementing that. This project represents a small version of this system.
This project uses 'MSW' as a mock server. msw will start when the project starts on development mode automatically. to make sure if it has started check the console, this message will show its start in console [MSW] Mocking enabled.
1. clone the project
git clone https://github.com/mhsamie/frontend-ticket-challenge.git
2. go to the repository
cd frontend-ticket-challenge
3. install the requirments
npm install
4. run the server on dev mode
npm run dev
Technologies used in the project:
- react.js
- vite
- typescript
- msw
- jest
- husky
The Volleyball Federation has decided to use an online selling platform for the next season, and our company has been chosen for implementing that.
In this challenge, you are going to develop a responsive web application to display stadium seats randomly to the user. Users can select a seat and buy a ticket. After buying the ticket, you should redirect to another page that shows the ticket ID to the user.
Response body sample: ['m213', 'm654', 'm63', 'm6888']
Get the list of map IDs. Use this endpoint to get the list and choose one of the stadium maps randomly.
Get map details and display seats.
Response body sample:
[
[0, 0, 1, 0],
[0, 1, 0, 0],
[1, 1, 1, 1],
[1, 1, 1, 1]
]In the response, 1 means reserved, and 0 means the seat is available to buy.
Request body sample:
{
"x": 2,
"y": 1
}Buy tickets. x and y are seat coordinates in the request.
Suppose the backend APIs are concurrently in the development process. So mock APIs in some way to continue your work.
Try to write your code as reusable and readable as possible. Also, don't forget to document your code and provide clear reasons for all your decisions in the code.
It is more valuable to us that the project comes with unit tests.
Please don't use any CSS framework (like Bootstrap, Material, ...).
Don't forget that many stadium seats are available (around 100k), so try to implement your code in a way that could display it smoothly. If your solution does not sample enough for implementing fast, you can just describe it in your documents.
Please fork this repository and add your code to that. Don't forget that your commits are important, so be sure that you're committing your code often with a proper commit message.