Golden State Windows — из фронтенд-прототипа в быстрый и индексируемый сайт в Bay Area

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

Golden State Windows меняет окна, ставит двери и сайдинг по всей области залива Сан-Франциско из своего офиса в Дейли-Сити. Клиент пришёл с фронтенд-прототипом, который выглядел готовым, но рабочим сайтом для бизнеса ещё не был.

Форма связи никуда ничего не отправляла: каждая заявка исчезала после сообщения «спасибо». Данные компании противоречили друг другу — два разных года основания и регалии, которые никто не подтверждал. У всех страниц был один общий title, и поисковики с AI-краулерами видели пустое одностраничное приложение. Моя задача — превратить этот прототип в продакшн-сайт, под которым компания может поставить своё имя и номер телефона.

Моя роль в проекте

Я лично провёл проект от передачи кода до запуска на goldenstatewindows.com. Направления, которые я вёл и выполнял непосредственно:

• Аудит переданного кода и пересборка на Vite, React и TypeScript с чистым репозиторием и деплоем в Vercel из git
• Приём заявок на Supabase с уведомлением на почту через Resend
• Реальные данные компании в одном месте — и всё, что компания не могла подтвердить, убрано с сайта
• SEO для одностраничного приложения: метаданные каждой страницы, структурированные данные и пререндер, чтобы каждый маршрут отдавался настоящим HTML
• Страницы городов, страница отзывов и портфолио из собственных фото клиента
• Скорость, доступность, заголовки безопасности и баннер cookies, связанный с согласием в Google Analytics

Что я сделал: заявки и данные

• Форма проверяет каждое поле и прячет ловушку для спам-ботов; каждая заявка записывается в таблицу базы данных, куда посетители могут только добавлять строки, но никогда не читать
• Триггер базы вызывает edge-функцию, которая отправляет письмо о каждом новом лиде в офис, — а если письмо однажды не уйдёт, форма всё равно сохранит заявку
• Страница благодарности после отправки и Google Analytics 4 с Consent Mode, связанным с баннером cookies
• Один источник правды для адреса, телефона, часов работы, зон обслуживания и номера лицензии подрядчика штата — он стоит на каждой странице, как Калифорния требует для рекламы подрядчиков
• Честные тексты: утверждения, которые клиент не мог подтвердить, вроде пожизненной гарантии или тройного остекления, убраны со страниц, из метаданных и из структурированных данных

Что я сделал: SEO и страницы

• У каждого маршрута свои title, description, canonical и структурированные данные: компания с лицензией и часами работы, её услуги, хлебные крошки и FAQ на страницах городов
• Шаг пререндера после каждой сборки открывает все 16 страниц в headless Chromium и сохраняет их полным HTML, так что Google и AI-краулеры читают контент без JavaScript; несуществующие адреса отдают настоящий 404
• Хаб зон обслуживания и шесть страниц городов — Пасифика, Дейли-Сити, Южный Сан-Франциско, Сан-Матео, Сан-Бруно и Берлингейм — с собственным текстом и FAQ
• Страница отзывов с видеоотзывами клиентов, отзывами из Google и рейтингом компании на Yelp; виджет отзывов подключён в React-приложение вручную, потому что его стандартный код вставки не работает в одностраничном приложении, — и без разметки рейтинга «о себе», которую Google не разрешает
• Портфолио из 30 реальных фото объектов с подписями, страницы политики конфиденциальности, условий и cookies, анимированные 404 и страница благодарности
• Файл llms.txt и статичные структурированные данные для AI-поиска

Стек и скорость

React 18 и TypeScript на Vite, Tailwind CSS и компоненты shadcn/ui; Supabase — Postgres с row-level security и Edge Functions; Resend для писем; хостинг Vercel. Изображения отдаются в AVIF и WebP адаптивных размеров (hero похудел со 155 КБ до 41 КБ и меньше), шрифт Outfit подключён с собственного сервера, маршруты грузятся отдельными чанками. Lighthouse на десктопе даёт 95 по скорости при нулевом сдвиге вёрстки и 100 по SEO и best practices; Content Security Policy, HSTS и остальные заголовки безопасности задаются на уровне хостинга.