cbrgpl / ex-todo-app

Тестовое задание 'ex-todo-app'

О приложении

Приложение разрабатывалось как тестовое задание, в соответствии с данными требованиями.

В процессе выполнения задания я ставил перед собой задачу демонстрации собственных навыков в работе с окружением для разработки(Wepback, Stylelint, Eslint); анализе поставленной задачи; формировании отдельных логических элементов в соответствии с проанализированными задачами и их группировке.

Дополнительно - демонстрация умения обращения с tailwindCSS;

Компоненты были разделены на общие, и относящиеся к конкретной подсистеме(модулю). В идеале я бы использовал modular architecture для организации проекта.

Данные для авторизации находятся по пути src/utils/services/authService.js; Дублирую:

username: user1
password: password

Ссылка на сайт

P.S. Комментарии с пометками Т3 являются комментариями для просматривающего тестовое задание

Инициализация проекта

npm install

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

npm run serve

Сборка под продакшн

npm run build

Линт проекта

npm run lint

Для VSC

settings.json конфиг для проекта

{
    "stylelint.validate": [ "css", "scss", "vue" ],
    "css.validate": false,
    "scss.validate": false,
}

Структура дирректорий

• src/
  • assets/
    • icons/
    • images/
    • scss/
      • libs/ - для подключения и конфигурации библиотек
      • utils/ - дирректория для scss функционала
        • _global.scss
        • _null.scss
        • _predefined.scss - импортируется в main.js
      • _predefined.scss - подключается в main.js
  • components/
    • auth/ - дирректория для подсистемы админ-панели
      • atomic/ - компоненты несостоящие из других комонентов
      • composite/ - сложные компоненты, составляются из других компонентов
    • general/ - общие компоненты проекта
      • ...
    • todo/
      • ...
  • enums/ - дирректория для статичным структур данных
    • nav/
    • const.js - константы
  • router/
    • utils/
  • store/
    • _utils/
    • modules/
  • utils/
    • errors/ - кастомные ошибки
    • functions/
    • js_utils/ - набор утилит для разных типов данных
    • mixins/
    • modules/ - самописные модули, используемые на проекте
    • services/ - сервисы для общения по АПИ
    • validators/ - прокси-файл для указания перевода валидаторам
  • views/

Компоненты

Именование

Для именования компонентов используются следующие префиксы:

• The - компонент встречается на странице один раз
• P - компонент является часть другого компонента и не используется на клиенте
• Z - префикс для компонентов, которые используются на клиенте(не является внутренней частью какого-либо другого)

В случае, если компонент состоит из других компонентов(являющихся только его частью), необходимо оборачивать его в следующую структуру:

• ComponentName/
  • partials/
    • ComponentName.vue
  • ComponentName.vue

В случае, если для компонента дополнительно необходим другой компонент, и последний может использоваться в остальном приложении, то они оборачиваются в следующую структуру:

• ComponentName/
  • ComponentName.vue
  • ComponentPartial.vue - отличие от первого случая в том, что ComponetnPartial не сокрывается внутри основного компонента