Кейс · Сайт · TypeScript

bike-workshop-react: «Ось», концепт сайта веломастерской

Концепт многостраничного сайта вымышленной веломастерской на React 19 с пререндером каждой страницы в статический HTML: услуги, прайс-демо с калькулятором, запись с расписанием, журнал из трёх статей. Мастерской, клиентов и реальных цен не существует, форма записи работает в браузере и ничего не отправляет.

React 19
React Router
TypeScript
Vite
Prerender
CSP
axe
Cloudflare Pages
GitHub Actions

Открыть живой сайт ewsirdev-bike.pages.dev Код по запросу в Telegram

01 · Как выглядит

Скриншоты

Скриншот проекта «bike-workshop-react: «Ось», концепт сайта веломастерской» на экране 1280 пикселей — Десктоп, 1280 px

Скриншот проекта «bike-workshop-react: «Ось», концепт сайта веломастерской» на экране телефона, 390 пикселей — Телефон, 390 px

02 · О проекте

Что это и зачем

Ограничения

Концепт: бэкенда нет, записи не сохраняются.

Расписание считается от текущей даты в браузере.

Английской версии нет; Lighthouse не запускался.

Что внутри

React 19 + React Router + Vite, каждая страница пререндерится в плоский .html (адреса без слэша без редиректа на Pages)
CSP script-src 'self' и style-src 'self' без unsafe-inline: check:security проваливает сборку при inline-коде
Фирменные приёмы: линейка как разделитель, бирка с отрывным корешком для смет и записи
Firefox 390, 768, 1280, 1920: axe 0, CLS 0, горизонтального скролла и ошибок консоли нет

03 · Как запустить

Запуск одной командой

git clone <репозиторий по запросу> bike-workshop-react
cd bike-workshop-react
npm ci
npm run dev

04 · Код

Репозиторий приватный

Исходники лежат в приватном репозитории. Напишите в Telegram, открою доступ.

Запросить код