Фронтенд сайта "УралТехДеталь" ⚙️

Веб-приложение, которое рассказывает о производстве запчастей, услугах металлообработки и сервисах компании "УралТехДеталь", помогая быстро связаться с отделом продаж и получить прайс-лист.

✨ Ключевая функциональность

• Главная и страница "О компании" рассказывают о производстве запчастей, металлообработке и капитальном ремонте, подчёркивают конкурентные преимущества и ведут к актуальному прайс-листу на Google Drive.
• Модальные формы "Отправить заявку" и "Заказать звонок" из шапки, главной и футера собирают имя, контакты, комментарий и файл заявки, отправляют данные на бэкенд для уведомления менеджерам.
• Раздел "Доставка" подробно описывает сроки комплектации, бесплатную доставку по Миассу, список транспортных компаний с калькуляторами, способы оплаты и пошаговый процесс от заявки до отгрузки со ссылкой на реквизиты.
• Блок "Гарантии и возврат" фиксирует порядок претензионной работы, перечень необходимых документов и предоставляет ссылку на скачивание образца акта рекламации.
• Раздел "Сотрудничество" адресован поставщикам и посредникам: подчёркивает складской остаток, скорость отгрузки, финансовые условия и содержит прямые контакты менеджеров.
• Страница "Контакты" объединяет телефоны, e-mail'ы, адреса и график работы и дополняется динамически подгружаемой картой с указанием местонахождения офиса.
• Страницы "Реквизиты" и "Политика конфиденциальности" закрывают юридические и комплаенс-требования: публикуют полные банковские данные компании и раскрывают обработку персональных данных по 152-ФЗ.

🛠️ Технологический стек

• Языки и библиотеки: TypeScript, React.
• Роутинг: React Router.
• Сборка: Vite.
• Состояние: React State.
• Стилизация: CSS с применением БЭМ.
• Инструменты разработки: ESLint, Stylelint, Prettier, NPM Scripts.

🚀 Установка и запуск

1. Установите Node.js версии 22 или новее.

2. Склонируйте репозиторий и перейдите в директорию проекта:

   git clone https://github.com/IrinaRyazanskaya/utd-frontend.git
   cd utd-frontend

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

   npm install

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

   npm run dev

   Приложение откроется по адресу http://localhost:3000.

5. Дополнительные команды для поддержания качества кода:

   npm run build-check           # Проверка корректности типов
   npm run format                # Автоформатирование с помощью Prettier
   npm run format-check          # Проверка правильности форматирования с помощью Prettier
   npm run lint                  # Комплексная проверка линтерами
   npm run lint:ts               # Проверка кода линтером ESLint
   npm run lint:styles           # Проверка стилей линтером Stylelint
   npm run lint-fix              # Автоматическое исправление ошибок линтинга
   npm run lint-fix:ts           # Автоисправление замечаний ESLint
   npm run lint-fix:styles       # Автоисправление замечаний Stylelint

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

utd-frontend/
├── src/
│   ├── api/                   # Функции и типы для работы с API
│   ├── application/           # Корневой компонент с маршрутизацией
│   ├── components/            # Переиспользуемые компоненты (модалки, карта, шапки, скролл)
│   ├── pages/                 # Отдельные разделы сайта (home, delivery, contacts и др.)
│   ├── entry-client.tsx       # Клиентская точка входа в приложение
│   ├── entry-server.tsx       # Серверная точка входа в приложение
│   └── global-styles.css      # Глобальные стили и CSS-переменные
├── public/                    # HTML шаблон и другие статические ресурсы
├── index.js                   # HTTP-сервер для серверного рендеринга
├── package.json               # Скрипты, зависимости и метаданные проекта
├── vite.config.ts             # Настройки сборщика Vite
├── tsconfig.json              # Настройки TypeScript
├── tsconfig.app.json          # Настройки TypeScript для фронтенда
├── tsconfig.node.json         # Настройки TypeScript для конфигов
├── eslint.config.js           # Правила линтинга JS/TS
├── .editorconfig              # Единые правила оформления кода
├── .gitignore                 # Игнорируемые Git-ом файлы
├── .prettierignore            # Исключения для Prettier
├── .prettierrc.json           # Конфигурация Prettier
├── .stylelintrc.json          # Правила линтинга стилей
└── .prettierrc.json           # Настройки автоформатирования

💡 Что реализовано / изучено

• Применён SSR для SEO: сервер собирает HTML, выполняет код приложения и отдаёт готовую разметку.
• Сделаны две формы взаимодействия с клиентами с обработкой ошибок и визуальными состояниями.
• Интегрирован Leaflet для отрисовки карт с отложенной загрузкой и кастомизацией маркеров.

🧩 Решённые задачи и технические челленджи

• Быстрый первый рендер: SSR улучшает пользовательский опыт и видимость сайта в поиске.
• Оптимизация карт: Leaflet и стили подключаются динамически чтобы уменьшить размер приложения.
• Адаптивная навигация: разделение навигации на desktop и mobile-компоненты избавило от сложных ветвлений и упростило поддержку вёрстки.