This content originally appeared on DEV Community and was authored by Rajesh Royal
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:
- 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
split
andreplace
. 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 🤓
This content originally appeared on DEV Community and was authored by Rajesh Royal

Rajesh Royal | Sciencx (2022-07-25T17:50:00+00:00) React.js Interview – technical submission and detailed feedback. Retrieved from https://www.scien.cx/2022/07/25/react-js-interview-technical-submission-and-detailed-feedback/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.