Обновление: Публичные ссылки не работают, так как компания не хочет, чтобы код задания был в общем доступе. К сожалению, репозиторий больше не может быть публичным. Спасибо всем за отзывы.
Недавно я создал проект на React.js для одной из MNC, в которой я прохожу собеседование, и они предоставили очень подробный отзыв о моем задании.
Делюсь кодовой базой и отзывом, предоставленным компанией, здесь, чтобы любой мог извлечь из этого пользу.
Требования: Создать приложение React.js для списка акций и нажатие на акцию приведет к странице с подробным описанием акций, которая содержит список котировок акций.
- Должна быть возможность фильтрации.
- Котировки акций могут быть отсортированы по дате.
- По истечении срока действия котировок получать новые котировки [опрос].
- Должно использоваться
React.js.
Представление: (сейчас это частная информация)
- GitHub: Sensible Stock Portfolio
- Live Url: Sensible-Stocks
📃 Подробная обратная связь
@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.
Не согласен.
- Что я не нашел полезного в этом отзыве, так это то, что в нем говорится, что код выглядит грязным, с чем я совершенно не согласен. Люди здесь могут дать свои отзывы об этом, и это будет очень полезно.
- Кроме того, в v18 в режиме dev реакт действительно отображает все 2 раза, поэтому API вызываются 2 раза, но в продакшене этого не происходит.
- Временная метка, получаемая API, должна быть в Unix timestamp или UTC, чтобы лучше выполнять операции с датами, у меня были трудности с преобразованием времени, которые я закончил с помощью
splitиreplace. Не хотелось использовать момент для этой единственной задачи. - функция фильтра будет выполняться всегда: то, что я должен сделать здесь, функция фильтра должна выполняться каждый раз, когда пользователь вводит что-либо в поле поиска s.
- использование границы ошибки не является рекомендуемым способом — что является рекомендуемым способом?
В конце концов, это был действительно хороший опыт и знакомство с новыми вещами.
Спасибо, что прочитали 🤓