🏎📸 Данный репозиторий — это стартовая точка твоего персонального проекта. Целью самостоятельного выполнения персонального проекта является закрепление полученных тобой знаний. Так что не медли. Клонируй репозиторий, и начинай кодить! 🔥 👨🏽🔬 В этой инструкции ты узнаешь как настроить и использовать проект. Документация к 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/react-personal-project.git
; - Чтобы перейти в директорию с проекта, после клонирования выполни команду
cd react-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 символов;
- ✅ Задачи должны сортироваться: сперва — приоритетные, затем — обычные, и в конце — выполненные.
Чтобы получить наивысшую оценку нужно правильно выполнить все требования тестов, которыми покрыт персональный проект. Максимальная оценка за все 137 тестов — 30 баллов. Это означает, что за каждый выполненный тест ты получишь ~0.21 балла. А за 10 тестов — 2.1 балла. Дробные части баллов мы округляем в большую сторону.
Тесты можно запустить выполнив команду npm run test
.
❗️ Тесты внутри проекта менять нельзя.
Для удобства выполнения тестов, мы добавляем ещё детальное описание нужного поведения приложения. Описание разделено на несколько уровней сложности.
P.S.: Качество кода также является критерием в оценивании качества выполнения персонального проекта.
- Суть задания: сделать хорошо работающий «Планировщик задач», основываясь на предоставленном примере;
- Добавлять задачи нужно через поле «Описание моей новой задачи», длинной не более
50 символов
; - При нажатии на кнопку «Добавить задачу» или "Enter" поле ввода должно стать пустым, а новая задача добавиться в начало списка задач;
- Задачу с пустой строкой добавить нельзя;
- Порядок отображения задач:
- Приоритетные;
- Обычные;
- Выполненные.
- Задачу можно отметить как приоритетную, нажав на звёздочку. А также — как не приоритетную при повторном нажатии:
- При этом, приоритетная задача должна переместиться в самый верх списка (сперва приоритетные);
- А не приоритетная — обратно в список не приоритетных.
- Задачу можно отметить как выполненную, нажав на чекбокс слева, и как не выполненную при повторном нажатии:
- При этом, задачи, отмеченные как выполненные должны перемещаться в конец списка;
- При перемещении из выполненных в не выполненные задача должна располагаться после приоритетных — если задача не приоритетная, или вместе с остальными приоритетными — если задача приоритетная;
- Главное — сохранять консистентность групп задач. Сохранять точное расположение задачи внутри группы не обязательно, но желательно!
- Текст задачи можно редактировать, нажав на карандашик, максимальная длинна сообщение —
50 символов
:- При входе в режим редактирования ввод пользователя должен сфокусировать на элементе
<input />
; - При повторном нажатии на клавишу
Enter
, новый текст задачи должен сохраниться в состоянии, а режим редактирования выключиться; - При нажатии на
Escape
, или при повторном нажатии на карандашик текст задачи должен вернуться в исходное состояние, до входа в режим редактирования, а режим редактирования должен выключиться.
- При входе в режим редактирования ввод пользователя должен сфокусировать на элементе
- Задачу можно удалить, нажав на крестик;
- При нажатии на чекбокс «Все задачи выполнены», все задачи должны быть отмечены как выполненные (отмечать задачи как «все не выполненные» в обратную сторону не нужно);
- При вводе сообщения в поле «Поиск», задачи должны фильтроваться:
- Поиск должен быть синхронным, с мгновенным откликом;
- API для поиска использовать не нужно.
- Подключить к API все инфраструктурные операции приложения;
- Показывать спиннер на каждую инфраструктурную операцию.
- Aнимировать добавление и удаление задач;
- Aнимировать перемещение задач в приоритетные, выполненные и обратно.
В директории source/instruments
находится компонент высшего порядка withSvg
: с его помощью можно использовать SVG-разметку в качестве React-компонентов. Декорированные компоненты-SVG находятся в директории source/theme/assets
.
Пример использования:
Ответы на часто задаваемые вопросы можно найти здесь.