zubkovvladimir / test-app

Админ-панель. Реализована аутентификация, получение данных с сервера, создание/изменение/удаление элемента, поиск/пагинация.

test-app

Особенности

NODE: 16.13.0

Учетные данные

• Логин: [e-mail]
• Пароль: brunomailQ!1

Ссылка на рабочую страницу на Vercel https://test-app-five-theta.vercel.app/
Ссылка на сервер развернутый на Heroku: https://crudwithauth.herokuapp.com/
Ссылка исходный код сервера на GitHub: https://github.com/zubkovvladimir/crudwithauth

Скрипты

Установка зависимостей

yarn

Production сборка

yarn build

Запуск сервера для разработки

yarn dev

Запуск линтера

yarn lint

yarn lint:css

Запуск prettier для проекта

yarn format

Разработка

О сборке

• Управление состоянием - redux & redux-toolkit.
• Работа с формами - react-hook-form.

Структура

• public - статичный контент
• src - все исходники
  • api - cлой работы с api.
    • endpoints - эндпоинты апи.
    • methods - методы, которые используются потом в приложении.
  • assets - глобальные стили (scss), шрифты, изображения.
  • components - папка с группами компонентов.
    • features - компоненты отдельных страниц.
    • shared - переиспользуемые между страницами компоненты.
  • constants - константы.
  • hocs - компоненты высшего порядка - подключение провайдеров, модальных окон, etc.
  • interfaces - все переиспользуемые интерфейсы приложения.
  • layouts лейауты.
  • pages - страницы приложения.
  • routes - роуты.
  • store - всё, что относится к хранилищу.
  • utils - всё, что нельзя отнести в другие папки - модули, хелперы, etc.

Создание компонентов

• Допускается создание подпапок с другими компонентами в папках компонента
• Экспорты по умолчанию только для React.lazy, в остальных случаях только именованные экспорты

Работа со стором

• redux-toolkit

code style

• Для соблюдения единого стиля кода есть eslint, для форматирования - prettier
• Стоит pre-commit hook с валидацией и форматированием (убедитесь, что он включен в вашем редакторе кода)