[PW-11.6/ret] Add README.md file

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

Worth noting:
  - that this is a realization of the "Students Dashboard v2 CRM" app.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/README.md

@@ -0,0 +1,141 @@
+# Students-dashboard-CRM
+
+### Описание проекта
+
+Данный проект — это веб-приложение для управления данными о студентах. Приложение прошло две стадии реализации:
+
+1. Изначально работало на локальном сервере с JSON-файлом.
+2. Перешло на удалённый сервер **Render**, обеспечивая постоянное хранение/обновление данных.
+3. Добавилась поддержка Session storage, позволяющая сохранять данные на клиенте между обновлениями страницы (для тестирования функциональности приложения, каждому).
+
+Основной функционал включает в себя добавление, удаление, сортировку, фильтрацию и валидацию данных студентов.
+
+[🔗 Демо-версия на GitHub Pages](https://matowdev.github.io/fullstack-js-by-skillbox/core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/)
+
+---
+
+### Функциональность
+
+- **Добавление студентов** (через форму ввода с валидацией данных).
+- **Фильтрация студентов** (по Ф.И.О., факультету, году начала и окончания обучения).
+- **Сортировка студентов** по различным параметрам (Ф.И.О., факультет, дата рождения, годы обучения).
+- **Удаление студентов** (с подтверждением перед удалением).
+- **Динамическое обновление таблицы** (при изменениях в данных).
+- **Поддержка интерактивных тултипов** (для отображения информации).
+- **Отображение спиннера при загрузке данных с сервера** (спиннер при ожидании ответа сервера).
+- **Использование Session storage** для хранения данных (на клиенте).
+
+---
+
+### Внешний вид приложения
+
+![Students-dashboard-CRM]()
+
+---
+
+### Используемые технологии и библиотеки
+
+#### Front-end:
+
+- **HTML, CSS, JavaScript** – основные технологии проекта.
+- **Bootstrap 5.3.3** – стилизация элементов и адаптивность.
+- **jQuery 3.7.1** – вспомогательные манипуляции с DOM.
+- **Tippy.js 6.3.7** – всплывающие подсказки для элементов интерфейса.
+- **Session Storage** – сохранение данных на клиенте между обновлениями страницы.
+
+#### Back-end:
+
+- **Node.js** – серверная часть для обработки запросов.
+- **REST API** – используется для взаимодействия между клиентом и сервером.
+- **JSON** – формат хранения данных о клиентах.
+- **Render** – платформа для хостинга серверной части (сервер переходит в "спящий" режим при простое, поэтому первая загрузка может занять несколько секунд).
+
+---
+
+### Структура проекта
+
+#### Основные принципы кода:
+
+- **Одна функция – одно действие**: каждая функция выполняет строго одну задачу.
+- **Чистый код**: все переменные и функции имеют понятные названия.
+- **Модульность**: код разделён на логические блоки.
+
+#### Основные файлы и папки:
+
+```
+project-root/
+│── students-db-client/      # Клиентская часть:
+│   ├── css/                 # стили проекта
+│   ├── fonts/               # шрифты
+│   ├── images/              # изображения
+│   ├── js/                  # логика приложения
+│   ├── libs/                # подключенные библиотеки
+│   ├── index.html           # основная страница панели управления
+│── students-db-server/      # Серверная часть:
+│   ├── index.js             # основная логика сервера
+│   ├── package.json         # настройки и зависимости сервера
+│── README.md                # Описание проекта
+```
+
+---
+
+### Основные файлы и их назначение
+
+#### `index.html`
+
+- Основная страница с панелью управления студентами.
+- Включает таблицу данных, форму фильтрации и добавления.
+
+#### `index.js` (клиентская часть)
+
+- Управляет логикой работы приложения.
+- Обрабатывает ввод данных, сортировку, фильтрацию и валидацию.
+- Выполняет запросы к серверу на Render для получения, обновления данных (при первичной загрузке/перезагрузке страницы).
+- Отрабатывает логику Session storage для хранения данных (на клиенте).
+
+#### `index.js` (серверная часть)
+
+- Обрабатывает REST API-запросы.
+- Хранит данные студентов на удалённом сервере Render.
+- Поддерживает `GET`, `POST`, `PATCH`, `DELETE` методы для работы с данными студентов.
+
+#### Работа с API
+
+Система взаимодействует с сервером через REST API, развернутый на Render:
+
+- `GET https://students-dashboard-crm.onrender.com/api/students` – получение списка студентов.
+- `POST https://students-dashboard-crm.onrender.com/api/students` – добавление "нового" студента.
+- `DELETE https://students-dashboard-crm.onrender.com/api/students/{id}` – удаление студента.
+
+---
+
+### На что обратить внимание?
+
+1. **Валидация данных** – проверка корректности введённых данных (Ф.И.О., дата рождения, годы обучения).
+2. **Адаптивность** – дизайн подстраивается под разные экраны.
+3. **Интерактивные элементы** – всплывающие подсказки, анимации, плавные переходы.
+4. **Спиннер загрузки** – отображается при получении данных с удалённого сервера (при "просыпании" Render-сервера).
+
+---
+
+### Запуск проекта
+
+#### Клиентская часть:
+
+```sh
+cd students-db-client
+open index.html
+```
+
+#### Серверная часть:
+
+```sh
+cd students-db-server
+node index.js
+```
+
+---
+
+### Заключение
+
+**Students-dashboard-CRM** – это приложение, в котором реализована работа с динамическими таблицами, фильтрацией, сортировкой и взаимодействием с сервером через API. Перевод на **Render** позволил устранить необходимость локального сервера, обеспечив удобный доступ к данным из любой точки. Проект показывает практическое применение **async/await**, **fetch API** и базовой работы с Session storage/сервером в веб-приложениях.

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/css/spinner.css

@@ -12,8 +12,8 @@
 }
 
 .spinner {
-  width: 90px;
-  height: 90px;
+  width: 80px;
+  height: 80px;
   border: 15px solid var(--light-blue);
   border-top-color: var(--specific-blue);
   border-radius: 50%;

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/css/table.css

@@ -25,7 +25,7 @@
   width: 100%;
   height: 245px;
   font-weight: var(--medium);
-  font-size: 17px;
+  font-size: 18px;
   color: var(--bootstrap-red);
   text-align: center;
 }