Contact manager

Демо: contacts.arhipov.me

Данные для входа: admin:admin

Небольшой менеджер контактов, созданный с использованием React. Для интерфейса использовал компоненты Material UI. При первом входе тестовые 10 контактов подгружаются с сервера mockApi, далее все изменения сохраняются в localStorage с помощью redux-persist. При выходе из аккаунта все локальные данные удаляются.

Сейчас делал упор именно на фронтэнд составляющую, поэтому авторизация происходит с помощью эмуляции запроса на сервер и измененные контакты на сервере не сохраняются. Проект, где реализован полноценный функционал авторизации и сохранения данных на сервер с использованием firebase, можно посмотреть здесь.

Какие технологии входят

• React
• Redux (redux-toolkit)
• Reduxjs-toolkit-persist
• TypeScript
• React-hook-form, yup
• eslint, prettier
• useDebounce
• Material UI
• mockApi

Функционал

• Адаптивная верстка
• Сохранение состояния в localStorage при перезагрузке и закрытии страницы
• Валидация данных формы входа, отображение предупреждений об ошибках валидации
• Поиск нужного контакта по его имени, email или телефону
• Поддерживает удаление, редактирование, добавление контактов
• Загрузка контактов с сервера

Процесс запуска

• копируем репозиторий
• устанавливаем пакеты командой npm i
• запускаем сборку командой npm start