yaarusik/task-manager

project-management-app

Стек

React 18 + Typescript(!!!)

Redux (RTK) https://redux-toolkit.js.org/introduction/getting-started

UI библиотеки: MUI (Material UI) https://mui.com/material-ui/getting-started/installation/

styled-components https://styled-components.com/

Material Icons https://mui.com/material-ui/material-icons/

React Testing Library https://testing-library.com/docs/react-testing-library/intro/

Локализация: i18next https://www.i18next.com/overview/getting-started

drag-n-drop: react-dnd https://react-dnd.github.io/react-dnd/about

GITFLOW

FEATURE develop -> feature/...(task name) -> pull request(review) -> develop

BUGFIX develop -> bugfix/...(bug name) -> pull request(review) -> develop

task-manager's Issues

Роут с формой для edit profile

Кнопка Edit profile должна отправлять нас на роут с формой для edit profile. Требования к форме такие же как и ко всем формам в приложении. Должна быть кнопка удаления юзера. В случае этого действия => "Confirmation modal" => пользователя должно разлогинить и пользователь должен быть удалён из базы данных.

Создать Header

Создан компонент Header, в нем кнопка Logout, EditProfile, CreateNewBoard, добавлен логотип и название приложения

Welcome Page (route)

Прелоадеры между страницами

Drag-n-drop колонки

С помощью drag-n-drop мы можем менять колонки местами.

Валидация для логина

Борды - создание функционала

1.Добавить функционал для создания бордов
2. Борды должны отображаться списком
3. Борды отображаются с маленьким превью из доступной информации (title, description, etc).
4. По клику на элемент переходим на board item (Board route) - ПОКА ПРОСТО ЗАГЛУШКУ МОЖНО ПОСТАВИТЬ.
5. должна присутствовать кнопка для удаления борды.

Добавить значок редактирования title column

Welcome page (route)

Убрать кнопку create new board на роуте /board

Сделать компонент Кнопка

Сделать компонент кнопку из готовой библиотеки

Создать Confirmation modal

Сверстать компонент Confirmation modal

Создать Switch/Select для смены языка

Тут на своё усмотрение, компонент который будет или через toggle менять своё состояние или выбор селектом (если у нас может быть больше чем два языка)

Preloader

Создать прелоадер для переключения между страницами

Создать state managment для приложения

1. Используя Redux Toolkit сделать state managment для приложения

Создать task

1. Сверстать компонент Task, добавляемый в колонках (добавить кнопку удаления таска)
2. Сверстать модальное окно, всплывающее при добавлении каждой новой таски

Локализация

Сделать структуру для записи токена

Записать в cookie
Записать в store

Login and error hundler

1. Создать компонет-роут для логинизации
2. Обрабатывать Ошибки со стороны BE
3. Сохранять авторизованного пользователя в store

Анимация sticky header

Момент, когда он становится sticky (при наличии на странице скролла) должен быть анимирован: его цвет может потемнеть или высота слегка уменьшится.

Добавить функционал добавления новой таски

1. Добавить функционал добавления тасок в колонках

Cоздать навигацию с помощью location и history

создать правильную навигацию между страницами используя history и location вместо navigation

Распарсить токен и получить id

Валидация формы

1. Сделать валидацию для регистрации
2. Отправка данных на backend

Доп. функционал (глобальный поиск и т.д)

Деплой backend

1. Сделать деплой backend

Создать страницу Main page

Создать роут-main-page + базовая верстка без функционала

Сделать компонент AppRoutes

Создать компонент обёртку для всех роутов

Создать страницу Welcome page

1. На приветственной странице должны отображаться общие сведения о команде, проекте, курсе.

Создать страницу 404/ Not found

Создать компонент страницы и добавить в роут

Drag-n-drop таски в рамках колонки

Создать страницу Board page

1. Создать компонент Board page
2. Создать компонент Column
3. Создать компонент модального окна добавления Column
4. Сделать кнопку Назад

Добавить возможность менять таски

Реализовать возможность взаимодействия с таском таким образом, чтобы пользователь мог комфортно просматривать/изменять данные в таске. Учесть что 'click' может произойти после MouseUp при d-n-d.

Инициализация проекта

Создать из ветки main/master ветку develop и установить все библиотеки необходимые для разработки на данном этапе.

Удаление колонки

На колонке должна присутствовать кнопка для удаления колонки. По нажатию - Сonfirmation modal - при апруве - удаление.

Удаление таски

Реализовать возможность удаления таска. Кнопка Delete task должна быть расположена в удобном для пользователя месте. При нажатии: Confirmation modal -> удаление.

React 18 + suspense

Требуется сделать ленивую загрузку страниц и оборачивать в suspense компоненты требующие асинхронных данных

Кнопки log in, sign up

1. В верхнем правом углу должны быть доступны 2 кнопки log in и sign up.
2. Логин/log out есть на всех страницах

Добавить функционал добавления новой колонки

// Кнопка New column открывает модальное окно!!!

1. Запрограммировать кнопку Create new column
2. Добавить взаимодействие с Бэком при переходе от main rout к board rout (должны появляться все доступные пользователю колонки)

Добавить возможность изменения title колонок

Вверху колонки должен быть Title. При нажатии на него он из текста должен превращаться в input, слева от которого будут кнопки Submit и Cancel. После ввода текста в input и нажатия Submit - Title колонки должен поменяться.

Drag-n-drop таски в рамках всех колонок

Sign up(route)

Создать компонент-роут для регистрации +

• добавить форму с полями: Тname, login, password - ПОКА БЕЗ ФУНКЦИОНАЛА

Создать Navbar

Создать Footer

Компонент футер, который не содержит никакой логики, просто вёрстка

Поменять userId в тасках на имя/логин пользователя