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 та інші заголовки безпеки задаються на рівні хостингу.