ReactJS ToDoList

ReactJS-ToDoList

Введение

В этом проекте реализован интерфейс для простого веб-приложения списка дел с использованием библиотеки React JS, а также стилевых компонентов, заменяющих чистый CSS.
Он включает в себя страницу входа и общий пользовательский интерфейс приложения.
Логика аутентификации входа и база данных задач для каждого пользователя не реализованы, поскольку этот проект предназначен только для исследования Front-End.

Демонстрация

демо.mp4

Вдохновение

Дизайн страницы входа был вдохновлен Джорданом Хьюзом. Дизайн домашней страницы был вдохновлен Миком Скузой.

Функции

• Страница входа, включая кнопку «Войти», которая перенаправляет в основное приложение;
• Пользовательский интерфейс приложения с боковой панелью навигации и областью для списка дел;
• Добавить новую задачу, задав имя и свойства категории;
• Удалить задачу с модальным подтверждением действия;
• Отметьте выполнение задачи с помощью флажка;
• Фильтровать задачи, отображаемые в списке дел, по «выполнено», «не выполнено» или «все»;
• Фильтровать задачи, отображаемые в списке дел, по категориям, выбирая их на боковой панели;
• Авторизация: пользователь не может получить доступ к домашней странице до входа в систему, а также к странице входа после входа в систему.

Набл.: в настоящее время функции «редактировать задачу», а также добавлять или удалять категории не реализованы, поскольку я считал, что это не будет способствовать моему личному обучению и потребует очень много времени. Возможно, я реализую это позже.

Использование

Если вы хотите попробовать этот проект самостоятельно:

1. Установите Node на свой компьютер через https://nodejs.org/en/.
2. Установите Yarn на свой компьютер с помощью команды терминала: sudo npm install -g yarn
3. Установите Git на свой компьютер через https://git-scm.com/downloads.
4. Клонируйте этот репозиторий на свой компьютер. (подробнее о том, как это сделать здесь)
5. Запустите yarn install на терминале внутри папки, в которую вы загрузили проект, чтобы установить все используемые зависимости.
6. Запустите yarn start , чтобы запустить проект в браузере.