npm run dev - запустить проект
https://todo-liga-internship.vercel.app/
- Языки/фреймворки/библиотеки: Typescript, React, React-router-dom, Redux
- API: Axios, Swagger, Postman
- Работа с формами: React Hook Form, Yup
- Сборка: Webpack
- Code-style: Eslint, Prettier
.
├── .vscode # конфигурация под vs-code
├── dist # папка для билда (появится после npm run build)
├── config
│ ├── constants.js # константные пути к файлам и папкам
│ ├── css.modules.config.js # конфигурация css modules
│ ├── jest.config.js # конфигурация jest
│ ├── postcss.config.js # конфигурация postcss
│ ├── svgo.config.js # конфигурация обработки svg
│ ├── test.config.js # конфигурация окружения Jest, React Testing Library
│ ├── webpack.config.cache.js # конфигурация кеширования окружения webpack
│ ├── webpack.config.dev.js # конфигурация dev окружения webpack
│ ├── webpack.config.env.js # парсинг .env и проброс переменных в webpack
│ ├── webpack.config.https.js # конфигурация dev сервера с https
│ ├── webpack.config.js # базовый конфиг webpack
│ ├── webpack.config.modules.js # обработка путей к папкам из tsconfig для webpack
│ ├── webpack.config.prod.js # конфигурация сборки
│ └── webpack.config.styles.js # конфигурация обработчиков css
├── src
| ├── api # папка для работы с сетью, создаются файлы под каждую сущность
│ ├── app # основные компоненты с бизнес-логикой
│ ├── taskList # например, папка taskList, в которой содержится компонент страницы списка задач
│ ├── components # внутренние компоненты
│ ├── integration # файлы для redux
| ├── task-list.tsx # корневой файл компонента
| ├── TaskList.types.ts # типы для компонента, например интерфейс пропсов TaskListProps
│ ├── components # папка для компонентов без бизнес-логики (dumb components)
│ ├── constants # общие константы разбитые по файлам
│ ├── mocks # папка для всех моков
│ ├── types # интерфейсы для сущностей, например для Task
│ ├── utils # вспомогательные функции, также разбиваем по файлам. Например, delay.ts
│ ├── index.html # корневой html
│ ├── index.tsx # точка входа в приложение для webpack
│ ├── App.tsx # точка входа в приложение, роутер
│ ├── react-app-env.d.ts # декларация модулей и переменных
├── .browserlistsrc # список браузеров для autoprefixer
├── .editorconfig # настройки для редакторов
├── .eslintignore # игнорирование eslint
├── .eslintrc # Конфиг Eslint
├── .gitignore # Игнор файл для гита
├── .prettierrc # Конфиг prettier
├── package.json
├── tsconfig.json # Конфиг тайпскрипта
└── README.md
- Один файл – один компонент
- Импорты должны быть абсолютными
- Типы (types), константы (constants), вспомогательные функции (utils), редьюсеры (reducers), экшены (actions) в отдельных файлах
- Чистота кода (сильно строго судить не будем, но хотя бы без явной жести)
- Не должно быть никаких дизейблов линтеров
- Все пути импортов должны быть абсолютными
- Все типизировано, вообще все! (если тип подтягивается автоматически, тоже считается). Расшифровка: если мы увидим где-то тип any или unknown, критерий не засчитывается
- Добавлены и сверстаны три страницы: список задач, добавление задачи, редактирование задачи (не обязательно три страницы, главное чтобы была реализована функциональность)
- На странице списка задач без ошибок (в интерфейсе и консоли) отображается список задач
- На странице списка задач есть корректно работающие поиск по имени задачи и фильтр по признакам важности и готовности задач
- На странице редактировании задачи id задачи передается через параметр роута
- Работает основная функциональность добавления и редактирования задачи, есть возможность пометить задачу готовой и важной
- В redux добавлена миддлвара для логирования
- У всех запросов есть обработка ошибок и загрузки и они отображаются в интерфейсе
- Запросы типизированы с помощью openapi-typescript
- Запросы реализованы с помощью redux-thunk и axios
- Формы сделаны с использованием react-hook-forms и yap (формы поиска, редактирования и добавления задач)
- На формах есть валидация (все поля обязательные, чекбоксы не обязательны, на форме редактирования нельзя выбрать чекбокс important, если выбран чекбокс completed)
Критерии со звездочкой:
- Приятный дизайн
- Реализована пагинация на фронте
- Добавлять параметры поиска и фильтра в роут (учитывая один нюанс)
- Правильно использованная мемоизация
- Структура проекта (тут не четкий критерий, но засчитаем, если не будет сильных недочетов)
- Прохождение «проверки на дурака»
- Использование MUI по правилам из презентации