🏷️ Проект «Smart Table»

Учебный фронтенд-проект, выполненный в рамках курса «Фронтенд-разработчик» от Яндекс Практикума.

---

📖 Описание проекта

Smart Table — это интерактивное веб-приложение для работы с табличными данными о продажах. Проект решает типичную задачу административных интерфейсов: удобную навигацию и обработку больших объемов данных без использования UI-фреймворков (на чистом JavaScript).

Приложение отображает информацию о дате операции, покупателе, продавце и сумме заказа. Пользователь может находить записи, фильтровать таблицу по продавцам, сортировать колонки и управлять пагинацией. Все изменения параметров приводят к формированию динамического API-запроса и перерисовке таблицы без перезагрузки страницы.

📌 Цели и задачи проекта

• Разработка модульного веб-приложения на нативном JavaScript (ES Modules) без фреймворков.
• Реализация динамического взаимодействия с внешним API с передачей query-параметров.
• Построение масштабируемой системы поиска, фильтрации, сортировки и пагинации.
• Использование HTML-шаблонов (<template>) и DOM API для эффективной перерисовки табличных данных.
• Настройка сборки проекта с помощью Vite.

🛠️ Стек технологий

• JavaScript (ES Modules / ES6+) — модульная архитектура логики
• Vite — бандлер, dev-сервер и production-сборка
• HTML5 & CSS3 — структура, шаблоны <template> и стилизация элементов
• Fetch API & URLSearchParams — получение данных и формирование динамических query-запросов
• DOM API — работы с деревом элементов и событиями формы
• GitHub Actions & Vercel — автоматическая проверка кода и деплой приложения

---

📦 Структура проекта

src/
├── assets/             # Статические ресурсы
├── components/         # Модули интерфейса
│   ├── filtering.js    # Фильтрация данных
│   ├── pagination.js   # Пагинация таблицы
│   ├── searching.js    # Поиск по данным
│   ├── sorting.js      # Сортировка таблицы
│   └── table.js        # Рендеринг таблицы
├── data/               # Данные и вспомогательные файлы
├── fonts/              # Шрифты проекта
├── lib/                # Утилиты и общая логика
│   ├── sort.js         # Компараторы и карта сортировки
│   └── utils.js        # Вспомогательные функции (DOM, шаблоны)
├── data.js             # Работа с API и подготовка данных
├── main.js             # Точка входа приложения
└── style.css           # Основные стили

---

💡 Выводы по результатам проекта

• Модульная архитектура: Научилась проектировать сложные интерфейсы на чистом JavaScript без UI-фреймворков, разделяя логику на независимые и переиспользуемые модули.
• Сетевые запросы и API: Освоила работу с Fetch API, кеширование ответов для оптимизации сетевого трафика и динамическое формирование параметров запроса с помощью URLSearchParams.
• Динамический DOM: Отработала клонирование HTML-шаблонов (), точечные манипуляции с DOM API и работу с объектами FormData.
• Сортировка и пагинация: Реализовала алгоритмы переключения направлений сортировки с автоматическим сбросом сторонних колонок, а также кастомную пагинацию с расчетом диапазонов.
• Инструменты разработки: Получила практический опыт работы с бандлером Vite, автоматическим деплоем на Vercel.

---

⚙️ Инструкция по развертыванию и запуск

Системные требования

• Установленный Node.js (версии 18.x или выше)
• Менеджер пакетов npm

Инструкция по локальному запуску

1. Клонируйте репозиторий на свой ПК:

git clone git@github.com:afanassk/smart-table.git

2. Перейдите в директорию проекта:

cd smart-table

3. Установите зависимости:

npm install

4. Запустите проект в режиме разработки:

npm run dev

Скрипты проекта

Команда	Назначение
npm run dev	Запускает локальный сервер разработки (Vite)
npm run build	Собирает оптимизированную production-версию проекта в папку dist
npm run preview	Запускает локальный предпросмотр готовой production-сборки