Products Table

SPA-приложение для просмотра и поиска товаров с поддержкой:

• серверной пагинации
• серверной сортировки
• поиска
• оптимистичного UX при загрузке данных

Деплой проекта

Данные загружаются через API и отображаются в табличном виде

Проект реализован с использованием современного frontend-стека:

• React — UI
• TypeScript — типизация
• Vite — сборка
• React Router — маршрутизация
• TanStack Query — управление серверным состоянием
• Axios — HTTP-запросы -SCSS + CSS Modules — стили

Функциональность

Поиск товаров

Выполняется через API и обновляет таблицу

Пагинация

Таблица поддерживает серверную пагинацию. Количество элементов на странице фиксировано. Переключение страниц не вызывает мерцания благодаря keepPreviousData

Сортировка

Состояние сортировки цикличное: без сортировки → asc → desc → без сортировки

Skeleton-загрузка

При первой загрузке отображается skeleton-таблица

Индикатор загрузки

Во время запроса отображается progress-bar

Архитектура проекта

Структура проекта построена по принципам feature-based архитектуры

src
├── app
│ └── router
│
├── pages
│ └── auth
│ └── products
│
├── features
│ ├── search
│ └── add-product
│
├── entities
│ └── product
│
├── shared
│ ├── api
│ ├── config
│ ├── ui
│ └── assets

Управление данными

Для управления серверным состоянием используется TanStack Query

Основные преимущества:

• кэширование запросов
• автоматическая синхронизация данных
• контроль загрузки
• минимизация лишних запросов

Установка зависимостей
pnpm install

Запуск dev-сервера
pnpm start

Сборка проекта
pnpm build