Данное приложение является менеджером задач, в котором реализован следующий функционал:
- Календарь с возможностью переключения месяцев, отображением текущего дня, выведением списка задач на каждый день.
- Боковая панель, на которой содержится более подробная информация о задачах (их тип и промежуток времени).
- Каждая задача имеет свой тип (цвет), который может определить для себя каждый пользователь, при создании задачи.
- Каждая задача имеет свой промежуток времени, который пользователь выбирает при создании задачи.
- Есть возможность добавлять задачи как из календаря, так и из боковой панели.
- Задачи можно редактировать (тип задачи, текст, промежуток времени).
- Добавление и редактирование задач происходит через модальные окна.
- Также, задачи можно перетаскивать из одного дня, в другой (drag and drop).
- Сами задачи сортируются по времени, поэтому они всегда упорядочены (при добавлении новой задачи, итоговый список будет отсортирован).
- Данные сохраняются в localStorage, поэтому даже после прекращения сессии, все данные сохраняются.
- Есть выбор тем - темная и светлая.
- Присутствуют анимации добавления/удаления задач, изменения темы.
- Redux store, а также компоненты, в которых он используется, покрыты unit-тестами.
- При создании задачи без выбора даты, задаче будет присвоена дата текущего дня по местному времени.
- Присутствует валидация выбора времени для задач.
- Приложение оптимизировано благодаря мемоизации компонентов.
- В приложении есть регистрация и авторизация, в качестве токена используется jwt.
- Реализован роутинг для не- и авторизованных пользователей.
- Для приложения написан свой небольшой сервер на express (https://github.com/Redditask/Task-Manager_Server).
- Взаимодействие с сервером (http запросы) реализовано при помощи Redux Thunk и Axios.
Используемые технологии и библиотеки:
- TypeScript, HTML и CSS(SASS/SCSS)
- React
- Redux Toolkit
- Redux Thunk
- Axios
- jwt-decode
- Redux-persist
- React-transition-group
- React Router
- React-icons
- Jest
Команды:
- Запуск приложения: "run start"
- Создание продакшн-сборки: "run build"
- Запуск тестов: "run test"
(Для работы приложения, в корневой папке необходимо создать файл .env с переменной REACT_APP_API_URL в которой будет url сервера)