Websites · Nº 003
The Odd SpoonDemo
A site for a city café with the whole menu as a proper web page, every allergen on every dish, and a filter that hides what you can’t eat.
Most cafés post a blurry photo of the menu on Instagram. This one reads on a phone, turns up in Google, and answers the allergy question before anyone has to ask.
I made this one to show what a site like this looks like and what it costs. It is not a paying customer's site.
The problem
A lot of cafés rely on an Instagram page and a photo of the menu. It's hard to read on a phone, Google can't read it at all, it goes out of date the first time a price changes, and the allergen information the law requires is in a folder behind the counter.
What I built
Four pages for a made-up café by the English Market in Cork:
- A home page with the food in it. The headline has small photos of the coffee, the eggs and the cakes set into the words, then the plates with their prices, what's on the counter this morning, gift vouchers and a grid for the café's Instagram posts.
- Open now, or when it opens next, on every page and worked out in Irish time, so it's right for a visitor in any time zone and across the clock change. It knows the weekend hours and the days the café is closed, and says "closing at 4pm" in the last half hour.
- Visit us: a street map that opens Google Maps directions, the hours, what's nearby, buses, parking and access.
- Book a table: only days the café is open, and only times it's serving.
The menu
Every dish lists which of the 14 allergens it contains, the ones every food business in Ireland has to declare, down to which cereal and which nut. Tick the ones you need to avoid and every dish containing them disappears, with a count of what's left. The filter is saved in the link, so "the menu without nuts" is something you can send to a friend.
Dishes are marked vegetarian, vegan, or made without gluten. I've used "made without gluten" rather than "gluten-free" on purpose: a café that bakes with flour every morning can't promise there are no traces, and the menu says so.
The allergens on this demo are placeholders. A real café's come from its own recipes and its suppliers' labels, and get checked every time either changes. The menu is written once and used for both the page and the filter, so updating a dish updates both.
Under the hood
- Plain web pages, built with Astro. The filter, the open-now sign and the forms are small scripts, and the full menu with every allergen is there even if they never run.
- The map is drawn from OpenStreetMap once, when the site is built, rather than loading a map service on every visit.
- Google gets the details it looks for: a café listing with the opening hours, a link to the menu and that it takes bookings.
- The food photos are free stock photos from Unsplash. I checked every cup, bottle and plate for logos, and each dish on the menu is described from what's actually in its photo.
- Lighthouse on a phone: 96 to 100 for performance, 100 for accessibility and best practices.
What a site like this costs
From €500. Hosting and small updates, like a new dish or new opening hours, are from €20 a month.
Want one like it?
I'm in Cork, Ireland. Send me an email and I'll reply the same day. If it's easier to talk it through, we'll pick a time for a call. Or write out what you need.