🏎 Данный репозиторий — это стартовая точка твоего персонального проекта. Целью самостоятельного выполнения персонального проекта является закрепление полученных тобой знаний. Так что не медли. Клонируй репозиторий и начинай кодить! 🔥 👨🏽🔬 В этой инструкции ты узнаешь как настроить и использовать проект. Документация к API доступна по этой ссылке. |
- 🚀 Для запуска проекта выполни следующие шаги
- 🤖 Краткий обзор команд для проекта
- 🎨 Концептуальное задание
- 👨🏼💻 Техническое задание
- 🤔 FAQ
- Скачай и установи последнюю LTS-версию Node.js.
- Выполни в консоли
node -v
и убедись, что установлена последняя версия Node.js не нижеv8.11.3
; - Введи в консоли
npm -v
и убедись, что установлена последняя версия npm не ниже5.6.0
; - Скачай и установи Git, если его нет на компьютере;
- Введи
git --version
, чтобы проверь версию установленного Git, должно быть не ниже2.18.0
; - Склонируй и запусти этот проект:
git clone https://github.com/Lectrum/redux-personal-project.git
; - Чтобы перейти в директорию с проекта, после клонирования выполни команду
cd redux-personal-project
; - Чтобы установить зависимости проекта, выполни команду
npm install
; - Чтобы запустить проект в режиме разработки, самое время выполнить команду
npm start
; - Перейди в браузер и открой страничку http://localhost:3000. Когда страничка загрузится, ты увидишь страницу с сообщением «Персональный проект: стартовая точка».
- Открой Chrome Dev Tools и перейди на вкладку Console, там не должно быть каких-либо ошибок.
Заметка: запускать через
yarn «имя команды»
илиnpm run «имя команды»
.
Команда | Описание |
---|---|
start |
запустить проект для разработки |
build:prod |
запустить сборку проекта |
build:analyze |
запустить сборку проекта и запустить режим детального анализа результата сборки |
lint:javascript |
провести анализ исходного JavaScript-кода на стилистические ошибки |
lint:css |
провести анализ исходного CSS-кода на стилистические ошибки |
lint |
провести анализ всего исходного кода на стилистические ошибки |
test |
запустить тесты |
test:watch |
запустить тесты в watch-режиме |
test:debug |
запустить тесты в debug-режиме |
soundcheck |
запустить все линтеры и тесты |
prettier |
отформатировать исходный код с помощью prettier |
deploy |
задеплоить приложение на свой Github Pages |
Заметка: после деплоя на Github Pages приложение будет доступно по адресу:
https://имя-твоего-пользователя-гитхаб
.github.io/имя-твоего-репозитория-с-приложением
Для успешного выполнения персонального проекта нужно удовлетворить следующие критерии:
- Приложение должно уметь выполнять следующие операции с задачами:
- ✅ Создавать новую задачу;
- ✅ Получать все задачи;
- ✅ Удалять задачу;
- ✅ Редактировать текст задачи;
- ✅ Отметить задачу как выполненную;
- ✅ Отметить задачу как приоритетную;
- ✅ Отметить все задачи как выполненные.
- ✅ Все операции с задачами нужно подключить к API;
- ✅ Нужно сделать фильтр по задачам;
- ✅ При входе в режим редактирования, фокус ввода должен сместиться в поле с текстом задачи;
- ✅ Завершить редактирование задачи можно нажатием на клавишу Enter;
- ✅ Отменить редактирование задачи можно нажатием на клавишу Escape;
- ✅ Длина сообщения новой и редактируемой задачи не должна превышать 50 символов;
- ✅ Задачи должны сортироваться: сперва — приоритетные, затем — обычные, и в конце — выполненные.
Чтобы получить наивысшую оценку нужно правильно выполнить все технические требования. Для удобства техническое задание разделено на несколько уровней сложности.
P.S.: Качество кода также является критерием в оценивании качества выполнения персонального проекта.
- Суть задания: сделать хорошо работающий «Планировщик задач», основываясь на предоставленном примере;
- Все данные приложения должны проходить через полный redux flow (store, actions, reducers), локального состояния React в приложении быть не должно (в легком режиме можно оставить только состояние редактирования задачи);
- Все данные, начиная с reducer'ов, должны быть иммутабельными. Реализация −
immutable-js
; - Добавлять задачи нужно через поле «Описание моей новой задачи», длинной не более
50 символов
; - При нажатии на кнопку «Добавить задачу» или "Enter" поле ввода должно стать пустым, а новая задача добавиться в начало списка задач;
- Задачу с пустой строкой добавить нельзя;
- Порядок отображения задач:
- Приоритетные;
- Обычные;
- Выполненные.
- Задачу можно отметить как приоритетную, нажав на звёздочку. А также — как не приоритетную при повторном нажатии:
- При этом, приоритетная задача должна переместиться в самый верх списка (сперва приоритетные);
- А не приоритетная — обратно в список не приоритетных.
- Задачу можно отметить как выполненную, нажав на чекбокс слева, и как не выполненную при повторном нажатии:
- При этом, задачи, отмеченные как выполненные должны перемещаться в конец списка;
- При перемещении из выполненных в не выполненные задача должна располагаться после приоритетных — если задача не приоритетная, или вместе с остальными приоритетными — если задача приоритетная;
- Главное — сохранять консистентность групп задач. Сохранять точное расположение задачи внутри группы не обязательно, но желательно!
- Текст задачи можно редактировать, нажав на карандашик, максимальная длинна сообщение —
50 символов
:- При входе в режим редактирования ввод пользователя должен сфокусировать на элементе
<input />
; - При повторном нажатии на клавишу
Enter
, новый текст задачи должен сохраниться в состоянии, а режим редактирования выключиться; - При нажатии на
Escape
, или при повторном нажатии на карандашик текст задачи должен вернуться в исходное состояние, до входа в режим редактирования, а режим редактирования должен выключиться.
- При входе в режим редактирования ввод пользователя должен сфокусировать на элементе
- Задачу можно удалить, нажав на крестик;
- При нажатии на чекбокс «Все задачи выполнены», все задачи должны быть отмечены как выполненные (отмечать задачи как «все не выполненные» в обратную сторону не нужно);
- При вводе сообщения в поле «Поиск», задачи должны фильтроваться:
- Поиск должен быть синхронным, с мгновенным откликом;
- API для поиска использовать не нужно.
- Подключить к API все инфраструктурные операции приложения. Транспортное средство —
redux-saga
.redux-thunk
использовать нельзя. - Показывать спиннер на каждую инфраструктурную операцию.
- Вынести состояние редактирования задачи в redux — на этом этапе 100% состояния приложения должно быть в redux;
- Покрыть Redux-составляющую приложения тестами;
- Aнимировать добавление и удаление задач;
- Aнимировать перемещение задач в приоритетные, выполненные и обратно.
В директории source/instruments
находится компонент высшего порядка withSvg
: с его помощью можно использовать SVG-разметку в качестве React-компонентов. Декорированные компоненты-SVG находятся в директории source/theme/assets
.
Пример использования:
Ответы на часто задаваемые вопросы можно найти здесь.