React.js Interview - technical submission and detailed feedback
Rajesh Royal
Posted on July 25, 2022
Update: The public links are down due to the company didn't wanted to have the assignment code shared. Sorry to say but the repo cannot be public anymore. Thanks for the everyone's feedback.
I have recently created a React.js project for one of the MNC I'm interviewing at and they provided a really detailed feedback of my assignment submission.
Sharing the codebase and the Feedback given by company here so anyone can benefit from it.
Requirement: Create a React.js app to list stocks and clicking on a stock will take to stock detail page which have stock quotes listing.
- Should be filtrable.
- Stock Quotes can be sorted by date.
- Once the Quotes expires fetch new quotes [polling].
- Should use
React.js.
Submission: (its private now)
- GitHub: Sensible Stock Portfolio
- Live Url: Sensible-Stocks
📃 Detailed Feedback
@Negatives
- code look messy and unnecessarily made complicated
- created a common http get service around axois, the implementation is not proper
- unnecessary component wrappers, just for using some CSS classes
- usage of error boundary is not in the recommended way
- unnecessarily added new functionality rather than concentrating on the complete solution
- unnecessarily suppressing lint rules
- not handling mobile responsiveness
@Instruments page / stock listing
- api call twice on page mount
- using 2 different state for search results and default view
- filter function will always runs
@Quotes page / stock detail page
- api call twice on page mount
- polling is implemented but the implementation is messy and won't work
implementation details
- spawn a web worker and listen for post message, inside this if the quotes list length is 0 make an api call to update the quotes
- providing the user a control to update the interval (1,2,3,5,10 ms) for checking expired quotes
- there's a set interval run on this interval (1..10 ms) inside this posting a web worker message
- web worker will run the loop for checking the quote's expiry and the expired leg is removed from the list
- once all items have been removed from the list, initiate the api call to fetch new quotes, this time frontend will hit the server at least 100-300 times (sometimes more than 1800 requests) reasons for this the web worker will receive a message every 1-10ms and hit the server
- not properly clearing set interval, leads to calling the previous apis as well, now the loop will hit the server more than 5k times
- Use string split and replace T and Z to convert the timezone for comparing the time
- timestamp not converted to IST in the table listing
@Positives
- Using typescript
- Using error boundaries
- segregating code by spliting components and util functions
Instruments page
- implemented search
Quotes page
- implemented sort
We thank you for the time, energy, and effort you invested in our process and we wish you the very best in your future endeavours.
Â
Disagree Points.
- What I didn't found helpful in this feedback is that it says the code looks messy, which I totally don't agree. Folks here can give their feedback about this and this will be super helpful.
- Also The react does render everything 2 times in dev mode in v18, that's why APIs get called two times, but in production it doesn't happen.
- The timestamp which is received by API must be in Unix timestamp or UTC to do date operations better, I had tough time doing that time conversion which I end up doing with
splitandreplace. Didn't wanted to use moment for this 1 task. - filter function will always run: what I'm suppose to do here, the filter function should run every time user type anything in the s search field.
- usage of error boundary is not in the recommended way - what is the recommended way ?
At the end It was a really nice experience and get to know new things.
Thank you for reading 🤓
💖 💪 🙅 🚩
Rajesh Royal
Posted on July 25, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related