Обо мне Стек Резюме Работы Услуги FAQ Контакт
EN RU UZ
Главная / Портфолио / AquaCity Корпоративный сайт
E-Commerce · SSR · Мультиязычный

AquaCity — Корпоративный сайт-каталог

Обзор

Мультиязычный SSR-сайт для инженерного оборудования

Мультиязычный SSR-сайт-каталог, перестроенный с нуля для AquaCity — официального дистрибьютора европейского отопительного, водоснабжающего и инженерного сантехнического оборудования в Узбекистане (Kan-Therm, Hexonic, General Fittings, RunwilPools, OLI, Cavaletto). Сайт совмещает маркетинговую витрину и рабочий каталог товаров: посетители выбирают по категории, фильтруют по наличию, ищут по названию, сортируют по цене и открывают SSR-страницы товара с галереей и полными техническими характеристиками. Отдельный раздел реализованных проектов демонстрирует завершённые объекты, а форма обратной связи направляет инженерные запросы напрямую в команду.

Фронтенд построен на TanStack Start (файловая маршрутизация, SSR, server functions) и React 19, оформлен на Tailwind CSS v4 в тёмной дизайн-системе «corporate navy + electric blue» и анимирован Motion. Локаль-aware маршруты ($locale/catalog, $locale/product/$id, $locale/projects) обеспечивают переключение EN/RU/UZ, а route loaders предзагружают данные товаров и проектов через TanStack Query — каждая страница товара рендерится на сервере и мгновенно гидратируется на клиенте. В каталоге работают дебаунсный поиск, постраничные запросы и категорийный индекс — всё через отдельный бэкенд-API, к которому фронтенд обращается через Axios. HTML описаний товаров проходит санитизацию через DOMPurify перед рендером.

Ключевые особенности
TanStack Start SSR — рендеринг страниц товаров и проектов на сервере, мгновенная первая отрисовка
Живой каталог товаров с фильтром по категориям, наличию, дебаунсным поиском и сортировкой по цене
SSR-страницы товара с галереями изображений и санитизированными HTML-характеристиками
Полная мультиязычность: EN/RU/UZ через локаль-aware маршруты и словари переводов
Раздел реализованных проектов с постраничным выводом через бэкенд
Контактная форма — инженерные запросы напрямую доставляются в команду
О проекте
КатегорияE-Commerce
КлиентAquaCity Company
ДатаСентябрь 2025
Статус● Активен
Технологии
React TypeScript TanStack Start TanStack Router TanStack Query Tailwind v4 Motion Axios DOMPurify Linux / Nginx
Открыть сайт