---
# System prepended metadata

title: Apricode

---

### Дизайн

Оформление приложения исходя из [схематичного примера](https://www.figma.com/file/9ptzO19xMujbgo0YVG6KTB/%D1%82%D0%B5%D1%81%D1%82?type=design&node-id=0-1&t=SQIDI8pmIiJsGxfe-0).  

Стилизация компонентов на ваше усмотрение, мы рекомендуем использовать [Radix UI](https://www.radix-ui.com/primitives/docs/overview/getting-started)

### Обязательно к выполнению

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

- При клике на задачу справа должен отображаться ее полный текст.
- Для любой задачи можно создавать подзадачи (и для любой подзадачи тоже, бесконечная вложенность).
- Список подзадач должен быть сворачиваемым.
- Слева от каждой задачи должен быть чекбокс. При его нажатии должна выделяться сама задача и все ее подзадачи.
- При выделении всех подзадач также выделяется родительская задача.
- Возможность удаления задач.
- Возможность редактирования заголовка/текста задачи.
- Хранение данных в localStorage.

### Возможные доп. фичи

- Строка поиска (задачи / подзадачи).

- Возможность настройки внешнего вида (темная тема / светлая / системная).
- Реализация правого блока (задача / текст) через «вложенный» роутинг.
- Если используете модальные окна, использовать порталы.
- Написать тесты на mobx-стор, в котором основная логика.
- Создание проекта через фреймворк nx standalone.

### Стек

- React ( можете использовать фреймворк nextjs)
- сборщик на ваше усмотрение (наши проекты используют vite )
- TypeScript
- Mobx (использовать современный подход `makeAutoObservable`).  
  ! Основная логика должна быть в сторах, минимально использовать хуки.
- Scss модули (можно использовать Tailwind).

### Оформление:

- Выполненное тестовое задание можно передать публикацией на гитхаб. Чтобы были видны этапы разработки, приложение не должно быть опубликовано одним коммитом.

- Развернуть приложение на GitHub Pages.
- В файле README.md следует предоставить инструкции по запуску проекта.
- Максимальный срок выполнения: календарная неделя с момента получения задания.