Case study
Thunder Road Bar & Grill
Custom Website and Admin System
Thunder Road Bar & Grill required a modern website that could clearly present its menu, load quickly on mobile, and be fully controlled by the business without relying on subscription platforms.
I rebuilt the site from the ground up, delivering a fast public-facing experience paired with a purpose-built admin panel for managing menu items and weekly specials. The system replaces a vendor-controlled template with a fully owned React and PHP platform deployed on shared hosting.
The admin interface is designed around real restaurant workflows, allowing non-technical staff to update specials in minutes while preventing common errors. Layout stability, image delivery, and mobile performance were treated as first-class concerns throughout the build.
The result is a clear, fast, maintainable system the owners can manage without outside help.
Within the first week of launch, the team published new specials, menu updates, and job listings without outside help.
Stack: React, PHP, MySQLLaunch: November 2025
Project Overview
Thunder Road Bar & Grill is a locally owned bar and restaurant in Midway, North Carolina. The business required a modern website that could clearly present its menu, reflect its identity, and allow staff to manage frequent updates without relying on third-party vendors or subscription platforms. I rebuilt the entire site from scratch, replacing a restrictive vendor solution with a fully owned React and PHP system deployed on shared hosting. The result is a fast public site paired with a purpose-built admin panel designed around real operational workflows.
Client
Thunder Road Bar & Grill, Midway, NC
Project Type
Custom restaurant website and admin system
Timeline
Late 2025
Launch
November 2025
Screenshots
What The System Handles
Screenshots covering the public menu, reservation and careers flows, and mobile layouts. Authenticated admin workflows are summarized without public screenshots.
Lighthouse / PageSpeed evidence
Measured against trbgmidway.com on 3 June 2026. Scores vary between runs; treat them as a range rather than a fixed figure.
Desktop
FCP
0.4 s
LCP
1.3 s
CLS
0.007
TBT
0 ms
Mobile
FCP
3.3 s
LCP
8.2 s
CLS
0.001
TBT
10 ms
Before and after the rebuild
Measured 13 December 2025, then again 28 December 2025.
| Category | Desktop | Mobile |
|---|---|---|
| Performance | 64improved to99 | 50improved to76 |
| Accessibility | 92improved to100 | 92improved to100 |
| Best practices | 100improved to100 | 100improved to100 |
| SEO | 85improved to92 | 85improved to92 |
Customer-facing menu, reservations, and hiring flows that reflect the bar’s identity while keeping information clear.
Current live homepage capture showing the restaurant brand, hero calls to action, and menu-first browsing path.
Technical note
Current capture uses the live public homepage and excludes authenticated admin tooling.
Current live menu capture showing category navigation and image-backed menu sections.
Technical note
Current capture uses the public menu section only. Menu management screens are intentionally omitted from the public case study.
Current live reservation capture showing the public request form without exposing submitted guest records.
Technical note
Current capture shows the public reservation form before submission. Guest records and staff review screens are intentionally omitted.
Current live careers capture showing the public application flow without exposing applicant records.
Technical note
Current capture shows the public application form before submission. Applicant records and staff review screens are intentionally omitted.
Public homepage presenting the venue brand, navigation, and primary calls to action.
Technical note
Homepage layout uses a deterministic structure with optimized media to ensure consistent rendering across devices.
Public menu view with category-based navigation and image-backed sections.
Technical note
Menu content is organized by category with image-backed sections to balance clarity and visual presentation.
Reservation form allowing guests to submit booking requests with date, time, and party size.
Technical note
Reservation form submits structured booking data to the backend for staff review and confirmation.
Public careers page displaying open positions and an application form for prospective staff.
Technical note
Careers page shares the same submission pipeline as other forms, ensuring consistent validation and handling.
The Challenge
The previous website was controlled by a vendor platform with recurring fees and limited flexibility. Key issues included:
- •Slow load times, especially on mobile
- •Rigid templates that did not reflect the restaurant’s brand
- •Menu organization that was difficult for customers to scan
- •Weekly specials that required cumbersome updates
- •No true ownership of code or data
The site had become a bottleneck rather than a tool.
Objectives
- •Improve menu clarity and readability
- •Reduce weekly update time for specials
- •Optimize mobile performance for primary traffic
- •Reflect the restaurant’s red and black rustic bar identity
- •Deliver full ownership of code, data, and hosting
- •Ensure the system could be maintained by non-technical staff
Approach
Workflow-First Design: The owner’s actual weekly workflow was mapped before any UI decisions were made. The admin system was designed to support how updates really happen, not how a generic CMS assumes they should happen. This led to a minimal admin interface that prevents errors and reduces time spent per update.
User-First Navigation: The public site was restructured around the information restaurant customers look for first: menus, hours, location, reservations, and hiring. The result is fewer decisions, clearer sections, and a simpler mobile path to the information people actually need.
Low-Maintenance Architecture: The technology stack was selected for durability and clarity rather than novelty. React handles the public experience, PHP and MySQL keep content management straightforward, and the deployment avoids unnecessary external dependencies so the system stays easier to maintain. The system avoids unnecessary abstractions and favors explicit behavior.
Friction Removal: Every feature was reviewed for the effort it adds to both staff and customers. That led to faster menu access, simpler weekly updates, fewer clicks, and clearer visual hierarchy across the public site and admin workflow.
The Solution
Design System
- •Minimal layout using TRBG’s red and black palette
- •Typography tuned for low-light environments and quick scanning
- •Clear spacing and section dividers
- •Strong hierarchy for menu categories and prices
Site Structure
- •Home page with hero, hours, address, and calls to action
- •Menu section organized into clear, scannable categories
- •Weekly specials integrated into the menu workflow
- •Contact information with map and hours
- •Mobile-first navigation
Technical Implementation
- •Custom React frontend
- •PHP and MySQL backend for editable content
- •Purpose-built admin panel
- •Static hero assets for fast first paint
- •Responsive image variants with explicit sizing
- •Layout stability safeguards to prevent CLS
- •Mobile-first performance tuning
- •Basic SEO and structured metadata
- •Accessibility-aligned markup and contrast
Admin Capabilities
- •Menu category and item management
- •Weekly specials updates
- •Media uploads with enforced image variants
- •Live previews that match the public site
- •Clear save flows with visual confirmation
Results
Measured Results
- •Load time reduced from several seconds to approximately 1.5 seconds on mobile
- •Menu clarity improved through structure and spacing
- •Admin update time reduced dramatically
- •Owners gained full control of their digital presence
Before
- •Vendor-controlled platform
- •Slow performance
- •Confusing menu layout
- •Time-consuming updates
- •Ongoing subscription costs
After
- •Fully custom owned system
- •Fast load times on mobile
- •Clear, scannable menu
- •Five-minute weekly update workflow
- •No vendor lock-in
Key Takeaways
- •Shared hosting constrained certain caching strategies
- •Image optimization required strict pipeline enforcement
- •Layout stability relied on deliberate sizing and measurement logic
- •Performance tooling is primarily used during development rather than production
Want the full technical breakdown?
Detailed notes on how the public site and owner tools were built and tested are available on request.