Skip to content

Latest commit

 

History

History
61 lines (47 loc) · 4.04 KB

README.md

File metadata and controls

61 lines (47 loc) · 4.04 KB

To-do list - 'My TodoS'

Link: https://todo-list-lake-ten-38.vercel.app/

Web-application includes:

  • Adding, deleting, editing todos
  • Filtering by date (start date, end date), completion (completed or not)
  • Search by name

Technology stack:

Typescript, React 18, Redux, React Rourer v6, Webpack

Installation

  1. npm install
  2. npm run build
  3. npm start

Приложение для создания списка дел 'My TodoS'

Ссылка: https://todo-list-lake-ten-38.vercel.app/

Функционал

  • Добавление, удаление, редактирование дел
  • Фильтрация по дате(дате начала, дате окончания), выполнению (выполнено или нет)
  • Поиск по названию

Технологический стек:

Typescript, React 18, Redux, React Rourer v6, Webpack

Установка

  1. Необходимо клонировать этот репозиторий
  2. npm install
  3. npm run build
  4. npm start

Комментарий о выполненной работе

  1. Что сделано:
    • даты выводятся в формате “5 фев 2022 г.” (библиотека moment.js);
    • задачи добавляются сверху списка с пагинацией (на странице не более 15 дел, количество страниц рассчитывается в зависимости от для ну списка;
    • реализована фильтрация по дате (сверху отображаются ранние задачи) и выполнению;
    • сделан поиск по названию; добавление и редактирование происходит на отдельной странице;
    • при нажатии на кнопку "удалить" вызывается confirm (библиотека sweetalert);
    • сохраняются в LocalStorage и загружаются оттуда при открытии приложения; все страницы адаптивно сверстаны на flex
    • удаленные задачи выводятся на странице корзины; реализована очистка корзины
  2. Особенности реализации, что, почему и как сделано: логика приложения хранится в Redux, при создании задачи она добавляется в начало основного списка. Синхронизация в Local Storage реализована с использованием redux-persist. Компонент задачи (Item) переиспользуемый. Часть данных при отрисовке компонентов берется из роутинга (отображение меню, формы создания/редактирования задачи)
  3. Особенности работы приложения, баги: при загрузке приложения вылезает ошибка в консоли (скорее всего, связана с конфигами), больше багов не обнаружено (но наверняка они есть). Адаптивная верстка сделана достаточно грубо, в идеале можно улучшить. Также требуется добавление прелоадера, error boundary и обработка ошибок в пользовательских событиях
  4. Изученное в ходе разработки: работа с датами (ввод, вывод в нужном формате, сравнение), синхронизация Redux с Local Storage, реализация пагинации (и то, как это делается в случае получения данных по API) и фильтрации