Challenges Review

Diana Kucherenko

✅ Задача: The Weather App Challenge

✅ Решение: The weather app (Getting weather by geolocation, search. Technologies used: React, PropTypes, Redux, React Router, React-materialize, Fetch API, Geolocation API.) by DmitryHniezdilov.

✅ Feedback by expert Andrey Kucherenko:

1) Functionality & Usability

Приложение для получения информации о погоде по геолокации выполнено на хорошем уровне, есть возможность получить текущее местоположение по информации из браузера. Верстка недостаточно адаптирована для мобильного, в мобильной версии занято около 30% полезной площади браузера.

2) Code

Код является читаемым, имена методов и компонент понятны и логичны. Для постоянного контроля качества кода и следования стилям рекомендовано использовать линтеры, например eslint.

3) React

С точки зрения React приложения есть несколько моментов, на которые стоит обратить внимание:

Использование стилей, в текущей реализации есть вероятность переопределения стилей, например если будут два компонента с одинаковыми классами, для того чтобы избежать подобного поведения можно использовать makeStyles[2], styled components[3] или css modules[4]
В приложении используются callbacks в JSX, это приводит к лишним перерендеривания в процессе работы приложения [5], для того, чтобы избежать такого поведения, стоит использовать `useCallback` hook.
Для упрощение работы с redux можно использовать библиотеку `redux-toolkit`.

4) Development tools

По коду можно увидеть, что он проект создан при помощи create-react-app и содержит нужные инструменты для ведения разработки. В тоже время в репозитории добавлены `yarn.lock` и `package-lock.json`, что говорит о использовании разных инструментов для выполнения одних и тех же задач.

5) Security

Api Key не должен храниться в git.

6) Tests

В приложении нет тестов, для работы с тестами рекомендую ознакомится с фреймворком `jest` для тестирования и библиотекой `testing-library`.

7) Other

Для работы с git стоит использовать соглашение о коммитах, чтобы повысить читаемость истории изменений в проекте [8]
Для ведения разработки в условиях реального проекта необходима непрерывная интеграция и автоматизация выгрузки [9]
Документация - хорошей практикой является написание шагов для развертывания проекта в readme файле проекта.

Functionality:

🟢🟢🟢🟢⚪️

Usability:

🟢🟢🟢⚪️⚪️

Code quality:

🟢🟢🟢⚪️⚪️

Maintainability:

🟢🟢🟢⚪️⚪️

Documentation:

🟢⚪️⚪️⚪️⚪️

Development tools:

🟢🟢⚪️⚪️⚪️