Todo “Список контактов”

О проекте

Это тестовое задание — простое веб-приложение "Список контактов".
Приложение позволяет создавать, редактировать и удалять контакты и группы контактов с сохранением данных в localStorage.
Реализован кастомный дропдаун для выбора группы, валидация, маска ввода телефона, и уведомления (тостеры).

Основные возможности

• Создание, редактирование и удаление контактов с полями: имя, номер телефона, группа
• Создание и удаление групп контактов
• Данные хранятся в localStorage
• Маска для ввода номера телефона с использованием библиотеки IMask.js
• Кастомный дропдаун для выбора группы при добавлении/редактировании контакта
• Тостеры уведомлений о действиях (создание, изменение, удаление) toastify-js
• Запрет создания дублирующихся групп и контактов с одинаковыми номерами
• Подтверждение удаления группы с предупреждением о удалении всех связанных контактов
• Адаптивная верстка с использованием SASS/SCSS, БЭМ и CSS-переменных
• Локальное подключение шрифтов в формате woff2
• Анимации элементов

Технологии

• TypeScript
• Vite (сборщик)
• SASS/SCSS (препроцессор CSS)
• IMask.js (маска для ввода телефона)
• Toastify.js (тостеры уведомлений)
• БЭМ методология в CSS
• Локальное хранение данных через localStorage

Установка и запуск

1. Клонировать репозиторий

git clone https://github.com/FFrein/contact-book.git
cd contact-book

2. Установить зависимости

npm install

3. Запустить локальный сервер разработки

npm run dev

4. Для сборки готового билда

npm run build

5. Для предварительного просмотра билда

npm run preview