Challenges Review

Challenges Review

Diana Kucherenko


✅ Задача: Blog Challenge
✅ Решение: Blog Challenge React SPA by DmitryHniezdilov

✅ Feedback by expert Andrey Kucherenko:


Functionality & Usability

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

Code

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

React

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

  • В приложении используются callbacks в JSX, это приводит к лишним перерендеривания в процессе работы приложения [5], для того, чтобы избежать такого поведения, стоит использовать `useCallback` hook.
  • Для упрощение работы с redux можно использовать библиотеку `redux-toolkit`.

Tests

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

Так же для этой задачи можно сделать e2e тестирование с использованием puppeteer[11] или cypress[12].

Other

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


Functionality: 

🟢🟢🟢🟢⚪️

Usability: 

🟢🟢🟢⚪️⚪️

Code quality: 

🟢🟢🟢⚪️⚪️

Maintainability: 

🟢🟢🟢🟢⚪️ 

Documentation: 

🟢⚪️⚪️⚪️⚪️

Development tools:

🟢🟢⚪️⚪️⚪️

CI/CD: 

⚪️⚪️⚪️⚪️⚪️

Deployment:

⚪️⚪️⚪️⚪️⚪️

Tests: 

⚪️⚪️⚪️⚪️⚪️


Links:


[1] SOLID (объектно-ориентированное программирование)

[2] Material-UI 

[3] Visual primitives for the component age

[4] Практическое руководство по использованию CSS Modules в React приложениях

[5] Работа с callbacks в React

[6] Использование хука состояния

[7] About React Hook (lessons video)

[8]Соглашение о коммитах

[9] GitHub Actions

[10] Проверка типов с помощью PropTypes

[11] React-end-to-end-testing-jest-puppeteer

[12]Getting Started with Cypress Component Testing (React)

[13] NextAuth.js

[14] Next SEO


Report Page