[PRAC/compl] Add description to README.md

Adding functional, structural description for this proj (what/how).

Worth noting:
  - that it was part of the practicum tasks.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/README.md

@@ -0,0 +1,120 @@
+# Skillbus-CRM, система для управления клиентами
+
+### Описание проекта
+
+Данный проект представляет собой веб-приложение CRM для управления клиентами. Система позволяет добавлять, редактировать, удалять клиентов, а также управлять их контактными данными. Вся информация хранится на сервере, а клиентская часть динамически обновляется.
+
+---
+
+### Функциональность
+
+- Добавление клиентов (с динамическим управлением контактными данными).
+- Редактирование информации о клиентах (с обновлением данных в реальном времени).
+- Удаление клиентов (с подтверждением).
+- Использование модальных окон для управления клиентами (для добавления, редактирования и удаления).
+- Валидация введённых данных (с учетом типов контактов).
+- Сортировка клиентов и фильтрация по ФИО.
+- Поддержка интерактивных тултипов (для отображения информации).
+
+---
+
+### Используемые технологии и библиотеки
+
+#### Front-end:
+
+- **HTML, CSS, JavaScript** – основные технологии для создания интерфейса.
+- **Bootstrap v5.3.3** – используется для стилизации интерфейса и адаптивного дизайна.
+- **Bootstrap Icons v1.11.3** – для отображения иконок в интерфейсе.
+- **jQuery v3.7.1** – для вспомогательных манипуляций с DOM.
+- **Tippy.js v6.3.7** – для реализации всплывающих подсказок.
+
+#### Back-end:
+
+- **Node.js с Express.js** – серверная часть для обработки запросов (была уже реализована).
+- **REST API** – используется для взаимодействия между клиентом и сервером.
+- **JSON** – формат хранения данных о клиентах.
+
+---
+
+### Структура кода
+
+#### Основные принципы кода:
+
+- **Одна функция – одно действие**: каждая функция выполняет строго одну задачу.
+- **Чистый код**: все переменные и функции имеют понятные названия.
+- **Модульность**: код разделён на логические блоки.
+
+#### Основные файлы и папки:
+
+```
+project-root/
+│── sb-crm-client/        # Клиентская часть:
+│   ├── css/              # стили
+│   ├── fonts/            # шрифты
+│   ├── images/           # изображения
+│   ├── js/               # логика работы клиентской части
+│   ├── libs/             # подключаемые библиотеки
+│   ├── index.html        # главная страница
+│── sb-crm-server/        # Серверная часть:
+│   ├── index.js          # основной серверный файл
+│── README.md             # Описание проекта
+```
+
+---
+
+### Основные модули
+
+#### Файл `index.js`
+
+В этом файле содержится логика управления клиентами, включая:
+
+- Создание и рендеринг таблицы клиентов.
+- Добавление и редактирование клиентов через модальные окна.
+- Взаимодействие с сервером (GET, POST, PATCH, DELETE запросы).
+- Валидация введённых данных.
+- Обновление интерфейса при изменении данных.
+
+#### Работа с API
+
+Система взаимодействует с сервером через REST API:
+
+- `GET /api/clients` – получение списка клиентов.
+- `POST /api/clients` – добавление нового клиента.
+- `PATCH /api/clients/:id` – обновление данных клиента.
+- `DELETE /api/clients/:id` – удаление клиента.
+
+---
+
+### На что обратить внимание?
+
+1. **Динамическое управление контактами** – контакты можно добавлять/редактировать и удалять через модальные окна.
+2. **Валидация данных** – проверка ввода для различных типов контактов (телефон, email, соцсети).
+3. **Адаптивность** – дизайн подстраивается под разные экраны.
+4. **Интерактивные элементы** – тултипы, анимации, плавные переходы.
+
+---
+
+### Запуск проекта
+
+#### Клиентская часть:
+
+```sh
+cd sb-crm-client
+open index.html
+```
+
+#### Серверная часть:
+
+```sh
+cd sb-crm-server
+node index.js
+```
+
+---
+
+### Заключение
+
+Этот проект - "практикум" по завершению обучающего блока по JavaScript "Basic Level". Работа над CRM-системой была долгой и кропотливой, но она позволила значительно углубить понимание JavaScript, принципов работы с DOM, REST API и клиент-серверного взаимодействия.
+
+- Процесс разработки дал ценный опыт в написании чистого и структурированного кода, улучшил навыки работы с асинхронными запросами и манипуляциями с интерфейсом.
+- Проект демонстрирует не только технические навыки, но и умение продумывать архитектуру приложения, писать поддерживаемый код и учитывать пользовательский опыт.