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)
[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