The Orchard Bar.React website design & build for an Edinburgh restaurant
Solo: design, build & maintenance · 2020 to present
A dated WordPress site rebuilt as a fast, bespoke React site: online booking, self-updating menus, and a design that finally matches the venue.
The Orchard Bar is a neighbourhood restaurant and bar in Canonmills, Edinburgh, a few minutes from the Royal Botanic Garden. Owners Lorraine and Chris were my first client contract in 2020; I've designed, built and maintained the site since, including the 2026 React rebuild documented here.
Outcomes
Before & after
The original site was a homemade WordPress build on an off-the-shelf theme: dated, desktop-first, and unable to do the two jobs a hospitality site exists to do: take bookings and show the menus.
- Booking: phone-only TableSense reservations on the page
- Menus: a list of bare links readable, self-updating menus
- Layout: desktop theme mobile-first bespoke build
The React build
I designed the site in Figma first, warm and characterful to fit a neighbourhood pub, but clean and legible, with space for the menus and photography to do the work. The build is a React site where all content lives as typed data: menus, prices, hours and promotions are edited as data, not JSX. Every layout is hand-written CSS Modules over one design-token system, with no framework and no UI library.
Typed menu engine
Menus are modelled as a small schema (menu, sub-menu, category, item) carrying prices, dietary flags and a featured flag. The tabs, switchers, legend and featured cards all build from that one source, so nothing drifts out of sync.
Online booking
An embedded TableSense reservation widget with a branded loading state, alongside address, map link and contact details, replacing the old phone-only flow.
Time-aware promotions
Event banners carry start and end dates; only the active promo shows, opening to a full-screen overlay. Getting it above a z-indexed nav was a stacking-context problem, not a bigger-number problem.
Also in the build: scraper-resistant contact details, one design-token scale driving all type and spacing, and prefers-reduced-motion support throughout.
Results & the client's words
- A site that finally fits the venue: modern, fast and mobile-first.
- Menus stay current: updates are a quick data edit, not a fight with a CMS.
“If you need a website and don't have the technical skills to make one yourself, then I strongly suggest you choose Victor. He constructed one for the Orchard Bar, our business, and is now working on one for my individual ventures. He takes the time to hear the details and investigates what your business requires. Easy to communicate with, a very professional service. Thank you Victor.”
Lorraine, The Orchard Bar
Reflection
What worked
- Modelling content as types paid off: publishing a change is editing data, and nothing falls out of sync.
- One token scale beat per-component media queries.
What I'd improve
- SEO/meta pass: real titles, Open Graph and LocalBusiness JSON-LD.
- Test coverage: a smoke test per section.
More work
A designer's portfolio built as a gallery
Three rooms instead of pages, a career archive walked one scroll per year, and a hero of canvas particles that scatter under the cursor.
Orders Made Simple · HubSpotA SaaS marketing site that got its identity back
A B2B site that had drifted into looking like everyone else, rebuilt as a 39-token design system in hand-written code inside HubSpot.
L.M. Douglas · Vue 3A two-book site grown into an author platform
An interactive realm map, a status-tagged catalogue and a free-novella funnel, built in Vue 3 for a fantasy saga.
Need something similar?
See the live site, read the code, or get in touch about a project.
← Back to all work