An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
July 25, 2022 05:50 pm GMT
Original Link: https://dev.to/rajeshroyal/reactjs-interview-technical-submission-and-detailed-feedback-2pk7
React.js Interview - technical submission and detailed 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:
- 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 functionsInstruments page- implemented searchQuotes page- implemented sortWe 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.
At the end It was a really nice experience and get to know new things.
Thank you for reading
Original Link: https://dev.to/rajeshroyal/reactjs-interview-technical-submission-and-detailed-feedback-2pk7
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To