FICTIONAL BUSINESS DEMO / SCREEN + PRINT DESIGN
Maple
& Main.
A menu for the phone.
A card for the table.
A fictional diner with a phone-first menu and a table-card route designed for print.
& MAIN.
starts here.
ONE DESTINATION
SCREEN → PRINT
- My contribution
- Design, development
& deployment
- Context
- Demo · Fictional diner
July 2026 account
- Built with
- React · TypeScript · Vite
Tailwind CSS · Static Worker
01 / THE BUILDStart at the table
Maple & Main is a fictional classic diner. I treated its phone menu as the main product: a guest should be able to browse food and prices without navigating a page that was laid out for a large sheet of paper.
The documented menu has 24 items across six categories, sticky category navigation, and weekly specials. Hours, contact details, menu items, and specials come from a shared data.ts module.
This is a demonstration of the interface and content structure. The business, menu, and customer experience are not presented as a live restaurant engagement or measured result.
03 / THE BUILDGive the printed card a place in the site
The original table card is a route with a print stylesheet, not a separate design document. It points people toward the deployed demo and is described as a 4×6-inch card.
That connects two presentations: the small physical prompt at the table and the menu opened on a phone. The companion article includes a new printable example to explore the idea. Its CSS is labeled separately because the published original excerpt is missing numeric values.
The sample's QR code points to the published fictional demo. It does not open this local preview, identify a table, or add scan analytics.
04 / THE BUILDOne content source, with an editing tradeoff
I built the site with React 19, TypeScript, Vite, Tailwind CSS v4, and a static Cloudflare Worker deployment. The original design uses a cream background, a maple-amber accent, and Playfair Display for its wordmark.
Keeping business information in data.ts means there is one authored place to change a menu price. It also means the owner does not yet have a content editor. A CMS or sheet-backed source is a proposed improvement in the original write-up, not an integration demonstrated here.
05 / THE BUILDWhat the project shows
The main work is the connection between the content, the phone layout, and the printed entry point. Each has a different job, but they belong to the same experience.
For an actual diner, I would still need approved menu data, reliable editing and publishing, and a print check on the intended paper and printer. The reference makes the idea tangible without claiming those operational steps are already done.
Source, dates, and what this page verifies
This rewrite is based on the supplied fictional-business project and article originally published July 17, 2026. Original dates and source addresses are retained. The original repository and live application were not audited.
The public articles were checked again on September 29, 2026: the unusual Huron shadow class and missing Maple print-CSS numbers remained visible. Both original excerpts are preserved, not silently repaired.
New phone/menu illustrations, sample menu data, category/search controls and print-card composition are labeled teaching examples. No photographs, client results, reviews, delivery or production feature claims are invented. The fixed sample QR points at the published Maple demo; no table ID or analytics are added.
Read docs/batch-5/SOURCE-REVIEW.md for sample CSS choices, retained code, external documentation and publication work. Print-media checks do not replace a physical printer/scan check.