https://github.com/ntonbala/redux-organizer
Personal project for Rudux intensive course from Lectrum
https://github.com/ntonbala/redux-organizer
Last synced: 2 months ago
JSON representation
Personal project for Rudux intensive course from Lectrum
- Host: GitHub
- URL: https://github.com/ntonbala/redux-organizer
- Owner: NtonBala
- Created: 2019-08-31T07:48:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-07T11:46:59.000Z (almost 3 years ago)
- Last Synced: 2025-01-26T07:42:43.935Z (4 months ago)
- Language: JavaScript
- Homepage: https://ntonbala.github.io/redux-organizer/
- Size: 2.31 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Интенсив по Redux: персональный проект
👋🏼 Добро пожаловать на интенсив!
🏎 Данный репозиторий — это стартовая точка твоего персонального проекта. Целью самостоятельного выполнения персонального проекта является закрепление полученных тобой знаний. Так что не медли. Клонируй репозиторий и начинай кодить! 🔥
👨🏽🔬 В этой инструкции ты узнаешь как настроить и использовать проект. Документация к API доступна по этой ссылке.
## 📜 Содержание
- [🚀 Для запуска проекта выполни следующие шаги](#-Для-запуска-проекта-выполни-следующие-шаги)
- [🤖 Краткий обзор команд для проекта](#-Краткий-обзор-команд-для-проекта)
- [🎨 Концептуальное задание](#-Концептуальное-задание)
- [👨🏼💻 Техническое задание](#-Техническое-задание)
- [🤔 FAQ](#-faq)
### 🚀 Для запуска проекта выполни следующие шаги
1. [Скачай и установи](https://nodejs.org/en/) последнюю LTS-версию Node.js.
2. Выполни в консоли `node -v` и убедись, что установлена последняя версия Node.js не ниже `v8.11.3`;
3. Введи в консоли `npm -v` и убедись, что установлена последняя версия npm не ниже `5.6.0`;
4. [Скачай и установи Git](https://git-scm.com/downloads), если его нет на компьютере;
5. Введи `git --version`, чтобы проверь версию установленного Git, должно быть не ниже `2.18.0`;
6. Склонируй и запусти этот проект: `git clone https://github.com/Lectrum/redux-personal-project.git`;
7. Чтобы перейти в директорию с проекта, после клонирования выполни команду `cd redux-personal-project`;
8. Чтобы установить зависимости проекта, выполни команду `npm install`;
9. Чтобы запустить проект в режиме разработки, самое время выполнить команду`npm start`;
10. Перейди в браузер и открой страничку [http://localhost:3000](http://localhost:3000/). Когда страничка загрузится, ты увидишь страницу с сообщением «Персональный проект: стартовая точка».
11. Открой 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.: Качество кода также является критерием в оценивании качества выполнения персонального проекта.
#### Легкий режим:
1. Суть задания: сделать хорошо работающий «Планировщик задач», основываясь на [предоставленном примере](https://lectrum.github.io/redux-personal-project/);
2. Все данные приложения должны проходить через полный redux flow (store, actions, reducers), локального состояния React в приложении быть не должно (в легком режиме можно оставить только состояние редактирования задачи);
3. Все данные, начиная с reducer'ов, должны быть иммутабельными. Реализация − [`immutable-js`](https://github.com/facebook/immutable-js/);
4. Добавлять задачи нужно через поле «Описание моей новой задачи», длинной не более `50 символов`;
5. При нажатии на кнопку «Добавить задачу» или "Enter" поле ввода должно стать пустым, а новая задача добавиться в начало списка задач;
6. Задачу с пустой строкой добавить нельзя;
7. Порядок отображения задач:
1. Приоритетные;
2. Обычные;
3. Выполненные.
8. Задачу можно отметить как приоритетную, нажав на звёздочку. А также — как не приоритетную при повторном нажатии:
1. При этом, приоритетная задача должна переместиться в самый верх списка (сперва приоритетные);
2. А не приоритетная — обратно в список не приоритетных.
9. Задачу можно отметить как выполненную, нажав на чекбокс слева, и как не выполненную при повторном нажатии:
1. При этом, задачи, отмеченные как выполненные должны перемещаться в конец списка;
2. При перемещении из выполненных в не выполненные задача должна располагаться после приоритетных — если задача не приоритетная, или вместе с остальными приоритетными — если задача приоритетная;
3. Главное — сохранять консистентность групп задач. Сохранять точное расположение задачи внутри группы не обязательно, но желательно!
10. Текст задачи можно редактировать, нажав на карандашик, максимальная длинна сообщение — `50 символов`:
1. При входе в режим редактирования ввод пользователя должен сфокусировать на элементе ``;
2. При повторном нажатии на клавишу `Enter`, новый текст задачи должен сохраниться в состоянии, а режим редактирования выключиться;
3. При нажатии на `Escape`, или при повторном нажатии на карандашик текст задачи должен вернуться в исходное состояние, до входа в режим редактирования, а режим редактирования должен выключиться.
11. Задачу можно удалить, нажав на крестик;
12. При нажатии на чекбокс «Все задачи выполнены», все задачи должны быть отмечены как выполненные (отмечать задачи как «все не выполненные» в обратную сторону не нужно);
13. При вводе сообщения в поле «Поиск», задачи должны фильтроваться:
1. Поиск должен быть синхронным, с мгновенным откликом;
2. API для поиска использовать не нужно.
#### Обычный режим:
1. Подключить к API все инфраструктурные операции приложения. Транспортное средство — [`redux-saga`](https://github.com/redux-saga/redux-saga/). `redux-thunk` использовать нельзя.
2. Показывать спиннер на каждую инфраструктурную операцию.
#### Режим «Рэмбо»:
1. Вынести состояние редактирования задачи в redux — на этом этапе 100% состояния приложения должно быть в redux;
2. Покрыть Redux-составляющую приложения тестами;
3. Aнимировать добавление и удаление задач;
3. Aнимировать перемещение задач в приоритетные, выполненные и обратно.
---
В директории `source/instruments` находится компонент высшего порядка `withSvg`: с его помощью можно использовать SVG-разметку в качестве React-компонентов. Декорированные компоненты-SVG находятся в директории `source/theme/assets`.
Пример использования:
---
### 🤔 FAQ
Ответы на часто задаваемые вопросы можно найти [здесь](https://github.com/Lectrum/FAQ#-faq).
