Problem Statement -
Design an online judge like Leetcode. The web applications should have the following sections
Problem listing with an option to sort.
Problem-solving with the solutions.
Discussion section to discuss interview questions & experience, seek
career guidance, etc with an option to filter.
Keeping these in mind, design a coding challenge web app for an authenticated user. Please be mindful of the performance of the application.
Let us tackle each point individually and then at the end, we will discuss the overall application performance.
Problem listing
The problem listing page will have all the metadata related to the problem like how many users have tried to solve the problem, what was the acceptance percentage, difficulty, and upvoting.
We can list the problems in a tabular format and display the important details like difficulties and provide an option to the user to filter the problem based on the metadata.
They can also search the problem using a search bar with the fuzzy search in the problem title and its description. All other options will be available for filter thus it would not be necessary to search on that.
There would also be an option to show which problem you have successfully solved so that you can filter them out.
Because a user won’t solve all the problems at once, we can add pagination to show only a specific number of problems at a time on the page and for the rest, the user will have to navigate, this will be a good performance measure.
Note – “Expect a follow-up question where you are asked to implement the problem listing page with search and filter options. The filters can be dynamic or static, aka DATA-TABLE“.
Problem-solving with solution
There is no point in repeating the wheel, thus we can use an open-source online judge or paid one depending upon the requirements for the core part of executing the coding and providing the result.
This page will be a two-section layout, where in one part questions along with sample test cases will be described and in the other section, the IDE will be integrated.
The question section can also have the solutions and the past results tabs in it.
There will be a pagination option to navigate to the next and previous questions.
Discussion section to discuss interview questions, and experiences, seek career guidance, etc with an option to filter.
This could be a multi-tab public forum, where registered users can ask and answer queries posted by them. There will be an option to tag the questions while asking and then filter based on these tags or using the search.
For posting the question we can have a WYSIWYG editor like CKEditor as the user may want to post the code samples.
For answers, we can have one level reply for simplicity. Where only a reply to the question will be given rather than another user’s reply.
Note – “Expect a follow-up question to code a simple question-and-answer web app”.
Architecture-
Micro-frontend architecture could help boost the overall performance of this application.
Each page/module of this application can be developed independently by a different team in any framework of choice and they can be bundled and hosted through the CDN individually.
We can then load each of them in the main application and ship it. Each bundle will be lazy-loaded.
This way the code will be split and being small bundles they will be faster to load. The state between each can be shared using the local storage.
As SEO would be an important factor, we can use the SSR frameworks using a hybrid rendering technique, where SEO-related stuff will be rendered on the server side and remain on the client side.
Happy Learning!!! Have a great weekend folks..........