---
# System prepended metadata

title: Тестовое задание Front-End (Тензор)

---

# Тестовое задание Front-End (Тензор)

Необходимо реализовать простой редактор заметок на React (альтернативно Vue или Angular) с функционалом создания, удаления, редактирования, поиска и сортировки заметок.

Приложение представляет из себя двухколоночную раскладку, где слева показан список заметок, а справа контент выбранной в списке заметки. Схематично приложение должно выглядеть так:
![](https://i.imgur.com/vUGaXBq.png)

Выбор варианта сортировки:
![](https://i.imgur.com/H9cr02A.png)


---


### Функциональные требования
Список заметок:
+ Поиск но названию заметки. При вводе в поле ввода в списке заметок остаются только заметки подходящие по названию.
+ Сортировка по убыванию и по возрастанию даты. По клику на "по возрастанию" появляется выпадающее окошко "по месту" с выбором варианта сортировки (см. 2 скриншот).
+ Удаление заметок. Кнопка удаления должна появляться по наведению мышки на заметку в списке.
+ При выборе заметки в списки, справа отображается ее содержание.


Панель просмотра заметки:
+ Редактирование заметки. Должен быть реализован функционал редактирования "по-месту". При клике на кнопку "редактировать" заметка переходит в режим редактирования и на месте текста появляются поля ввода. Желательно сделать, чтобы в режиме редактирования и режиме просмотра заметка выглядела одинаково. 
+ В панели заметки должна быть реализована кнопка удаления заметки.
+ Создание новой заметки может быть реализовано аналогично редактированию уже созданной заметки или любым другим способом (на свое усмотрение).

### Технические требования

+ Интерфейс должен быть написан на React, Vue или Angular. Не стоит использовать дополнительные сторонние библиотеки.
+ Элементы интерфейса должны быть реализованы в виде отдельных компонентов, которые потом могли бы быть переиспользованы в других интерфейсах. При разработки компонентов стоит придерживаться принципов SOLID и постараться избежать дублирования кода.
+ Весь функционал должен быть реализован в рамках одной страницы (все действия должны осуществляться без перезагрузки страницы).
+ Серверную часть реализовывать не нужно. Хранение данных можно организовать через Local Storage или любым другим способом.
+ Для разработки приложения нельзя использовать Bootstrap или аналогичные библиотеки. CSS должен быть написан вручную с использованием Flexbox. Плюсом будем если классы будут названы согласно БЭМ-методологии (https://ru.bem.info/methodology/).
+ Реализация на TypeScript будет плюсом, но не обязательна.  

### Заключение

Следует обратить внимание на ситуации, когда данных слишком много или слишком мало. И не стоит забывать, что пользователь системы может совершать ошибки и выполнять действия не так как вы задумывали.  

К внешнему виду приложения требований нет, все на усмотрение на разработчика.

Если в задании что-то не было оговорено, вы можете сделать как считаете нужным.

Итоговую работу необходимо выложить на GitHub и в README написать инструкцию по запуску приложения.

Удачи!
