СантехникЪ — Интернет-магазин сантехники

Современный интернет-магазин сантехнической продукции с каталогом товаров, системой заказов и полной информацией о компании.

🚀 Обзор проекта

СантехникЪ — это полнофункциональный веб-сайт для продажи сантехнической продукции в Саратове. Проект включает в себя:

• 📦 Каталог товаров с древовидной структурой (Категории → Подкатегории → Группы товаров → Товары)
• 🔍 Поиск товаров с умными подсказками и фильтрацией
• 📱 Адаптивный дизайн для всех устройств
• 🏪 Информационные страницы (О магазине, Доставка и оплата, Контакты)
• 🛡️ SEO-оптимизация с geo-метками для местного поиска
• ⚡ Высокая производительность с оптимизацией изображений и кэшированием

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

Frontend

• React 18 — современная библиотека для создания пользовательских интерфейсов
• TypeScript — типобезопасный JavaScript для надежности кода
• Vite — быстрый сборщик и сервер разработки
• Tailwind CSS — утилитарный CSS-фреймворк для стилизации
• Shadcn/ui — компонентная библиотека на основе Radix UI
• React Router — клиентская маршрутизация
• React Query — управление состоянием и кэширование данных
• Lucide React — иконографический шрифт

Инструменты разработки

• ESLint — линтинг кода
• Prettier — форматирование кода
• TypeScript Compiler — компиляция TypeScript
• PostCSS — обработка CSS

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

src/
├── components/          # Переиспользуемые компоненты
│   ├── layout/         # Компоненты макета (Header, Footer)
│   ├── catalog/        # Компоненты каталога
│   ├── home/          # Компоненты главной страницы
│   └── ui/            # Базовые UI компоненты
├── pages/              # Страницы приложения
├── lib/               # Утилиты и helpers
├── hooks/             # Кастомные React хуки
├── types/             # TypeScript типы
├── data/              # Данные каталога
│   └── catalog/       # JSON файлы с товарами
└── assets/            # Статические ресурсы

🏗️ Архитектура

Каталог товаров

• Нормализованная структура данных через catalogMapper.ts
• Древовидная иерархия: Категории → Подкатегории → Группы товаров → Товары
• SEO-оптимизированные URL для каждой страницы
• Гибкая система фильтрации и поиска

Компоненты

• Layout — базовый макет с Header и Footer
• ProductGroupCard — карточки групп товаров с изображениями
• CategoryCard — карточки категорий
• SearchSuggestions — умный поиск с подсказками

Данные

• JSON-файлы каталога с полной информацией о товарах
• SEO-мета данные для каждой страницы
• Geo-метки для локального SEO
• Изображения товаров с оптимизацией

🎯 Основные функции

📦 Каталог товаров

• Просмотр категорий и подкатегорий
• Детальная информация о товарах
• Изображения товаров с lazy loading
• SEO-оптимизированные страницы

🔍 Поиск и навигация

• Умный поиск с подсказками
• Фильтрация по категориям
• Хлебные крошки для навигации
• Быстрый доступ к популярным товарам

📱 Адаптивность

• Мобильная версия с оптимизированным меню
• Плавные переходы между брейкпоинтами
• Touch-friendly интерфейс
• Оптимизированные размеры изображений

🛡️ SEO и производительность

• Meta-теги для всех страниц
• Open Graph разметка
• Geo-метки для местного поиска
• Оптимизация изображений
• Кэширование данных

🚀 Быстрый старт

Требования

• Node.js 18+
• npm или yarn

Установка

# Клонирование репозитория
git clone https://github.com/ignitione1/plumbing_store.git
cd plumbing_store

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

# Запуск в режиме разработки
npm run dev

# Сборка для продакшена
npm run build

# Предпросмотр продакшен-сборки
npm run preview

Переменные окружения

Создайте файл .env.local в корне проекта:

VITE_API_URL=http://localhost:3000
VITE_SITE_URL=https://your-domain.com

📊 Особенности реализации

🗂️ Управление каталогом

• JSON-основанная система для легкого обновления товаров
• Автоматическая нормализация данных при загрузке
• Гибкая структура для добавления новых категорий
• SEO-дружественные URL для всех страниц

🎨 Дизайн и UX

• Современный минималистичный дизайн
• Система цветов с поддержкой темной темы
• Анимации и переходы для улучшения UX
• Доступность (accessibility) для всех пользователей

⚡ Оптимизация

• Код-сплиттинг для быстрой загрузки
• Lazy loading изображений
• Кэширование запросов к данным
• Минификация CSS и JS в продакшене

🌐 Развертывание

Docker

# Сборка Docker образа
docker build -t plumbing-store .

# Запуск контейнера
docker run -p 3000:3000 plumbing-store

📈 Будущие улучшения

• 🛒 Корзина и оформление заказа
• 👤 Личный кабинет пользователя
• 💳 Интеграция платежных систем
• 📊 Панель администрирования
• 🤖 PWA для мобильных устройств
• 🌍 Мультиязычность
• 📱 Мобильное приложение

📞 Контакты

• 📧 Email: virado@bk.ru
• 📱 Телефон: 8 (8452) 477-477
• 📍 Адрес: г. Саратов, ул. Большая Горная, д. 290

---

СантехникЪ — Ваш надежный партнер в мире сантехники! 🚽