Case · Site · TypeScript

bike-workshop-react: "Os", a bike workshop site concept

A concept for a multi-page site of a fictional bike workshop on React 19, with every page prerendered to static HTML: services, a demo price list with a calculator, booking with a schedule, a three-article journal. The workshop, clients and real prices do not exist; the booking form works in the browser and sends nothing.

  • React 19
  • React Router
  • TypeScript
  • Vite
  • Prerender
  • CSP
  • axe
  • Cloudflare Pages
  • GitHub Actions
Open the live site ewsirdev-bike.pages.devCode on request via Telegram

01 · How it looks

Screenshots

Screenshot of the project "bike-workshop-react: "Os", a bike workshop site concept" at 1280 pixels wide
Desktop, 1280 px
Screenshot of the project "bike-workshop-react: "Os", a bike workshop site concept" on a phone screen, 390 pixels wide
Phone, 390 px

02 · About

What it is and why

A concept for a multi-page site of a fictional bike workshop on React 19, with every page prerendered to static HTML: services, a demo price list with a calculator, booking with a schedule, a three-article journal. The workshop, clients and real prices do not exist; the booking form works in the browser and sends nothing.

Limitations

A concept: no backend, bookings are not saved.

The schedule is computed from the current date in the browser.

There is no English version; Lighthouse was not run.

What is inside

  • React 19 + React Router + Vite, every page prerendered to a flat .html (slash-less URLs without a redirect on Pages)
  • CSP script-src 'self' and style-src 'self' with no unsafe-inline: check:security fails the build on inline code
  • Signature devices: a ruler as a divider, a tag with a tear-off stub for estimates and bookings
  • Firefox at 390, 768, 1280, 1920: axe 0, CLS 0, no horizontal scroll and no console errors

03 · How to run

Run it locally

git clone <repository on request> bike-workshop-react
cd bike-workshop-react
npm ci
npm run dev

04 · Code

The repository is private

The source is in a private repository. Message me on Telegram and I will open access.

Request the code