Frontend system design of BookMyshow !! Concurrent seat booking, dynamic seating layout etc explained in detail
BookMyshow is India’s biggest event booking application. I’m sure there will be equivalent to other countries too. BookMyShow has solved many interesting frontend problems in very simple ways. I will be discussing all of them in detail in this video.
Disclaimer: After studying their system, these are all my solutions that I think can solve the problems. Putting another way if I have to build BookMyShow today this is how I will be solving it.
As it is not very easy to explain all system design concepts in an article, I have created a video that explains all of it in detail. It’s less than 30 mins and the link is below. If you’re interested in reading, you can continue reading.
Problem 1: Concurrent seat booking
Multiple users can try to book the same seat at the same time, how does bookmyshow solve this problem ??
Possible solutions:
- Optimistic Approach: Allow all users to pick a seat and redirect them to the payment page. Whoever pays first allot seat for them.
- Pessimistic Approach: Lock the seat for the first user who goes to the payment screen and show an error message for the other, asking them to pick another seat.
Here BookMyshow uses a Pessimistic approach, where seats are locked for one user for about 15 mins (I think it is configurable depending on the movie’s ticket demand), within that time if the user completes the payment then a seat is allocated for them. If payment is failed or not made then the seat will be unlocked for everybody else to pick.
Problem 2: Dynamic Seating layout
As you very well know, theatre layouts are extremely dynamic. Number of seats, the direction where the screen is present, the path for walking etc. How does BookMyShow render such different layouts on the screen ?
Possible solutions
- Backend sending rows and column information: In this approach the backend will just send a number of rows and columns and the client will generate the entire layout based on that. But this approach is not feasible, considering dynamic layouts, dynamic space between seats etc.
- Backend sending complete layout information with availability of each seat: Though this approach seems data intensive, there is no other option. Backend should send information about the number of rows, columns, different sections inside the theatre and availability of each seat. Even space between the seats are represented by some specific values. (I have clearly explained it in my Youtube Video please take a look for detailed understanding).
Problem 3: Dynamic Stadium layout
Like theatres even the stadiums layouts are dynamic in nature. But, unlike theatre, in stadium booking happens on the zone basis instead of per ticket basis. So we need to show different zones with different colours and book the ticket inside the zones accordingly.
This problem can be easily solved using HTML-Canvas. The Canvas information is shared by the backend and the client is just responsible to render it.
Thank you for reading catch you in the next article. In case you have not already followed me on Medium then please follow, you can follow me on Linked here. Do not forget to subscribe to my YouTube Channel UncommonGeeks.
Feel free to add your feedback in the comment section.
In case if you want to talk to me personally for mock interview, tips and tricks to clear interview or resume review, you can book a session here:
If you’re preparing for a frontend developer interview, please watch the below series of mine:
If your a reactJS developer and looking for interview preparation, watch my complete interview preparation guide here:
