Building a source-backed restaurant nutrition calculator with Next.js

Tristan — Tue, 04 Aug 2026 11:24:56 +0000

Restaurant nutrition tools look simple: choose an item, add the numbers, and show a total. The difficult part is making the result trustworthy.

I built EatWise to explore that problem. It currently provides free calculators for restaurant menus such as Chick-fil-A, Arby's, and Starbucks. The main goal is not to invent nutrition data, but to make published information easier to combine and understand.

1. Keep the source next to every menu item

A calculator becomes fragile when nutrition values are copied into anonymous rows. For EatWise, each normalized item keeps its nutrition facts together with the source URL. When a restaurant publishes a PDF or nutrition page, that source remains visible in the product instead of disappearing inside the data pipeline.

The normalized shape is deliberately boring: item name, category, calories, protein, carbohydrates, fat, sodium, serving information, and source metadata. Generated TypeScript data lets the calculator render quickly without waiting for a database request, while repeatable refresh scripts make future updates less error-prone.

2. Treat totals as estimates, not medical truth

Adding menu items is deterministic, but the real meal may not be. Portions vary, recipes change, and customizations can be prepared differently between locations.

That means the UI needs to explain its limits. EatWise shows estimate disclosures and source links near the calculator experience. This is more useful than hiding caveats in a footer, because the user sees them while making a decision.

3. Keep calculator state plain

The calculation layer does not need a complicated abstraction. Each selected item has a quantity, and the total is a reduction across the selected rows. Keeping that model simple makes it easier to verify calories and macros independently.

The same principle applies to the interface: visible labels, clear selected states, keyboard-accessible controls, and tap targets that work on mobile. Nutrition data is already dense, so the interaction should not add more cognitive load.

4. Make evidence part of the product

A source-backed tool should answer three questions without making users hunt:

Where did this number come from?
When was the source updated?
What can make the real value different?

Those questions shaped the page design more than decorative features did. Source links and estimate language are not legal afterthoughts; they are core product features.

5. Test the rendered result

The current stack uses Next.js 16, React 19, and TypeScript. The test workflow builds the production site and checks rendered HTML for important content, metadata, and source disclosures. I also check desktop and mobile layouts because calculator controls that work with a mouse can still fail on a phone.

What I learned

The most important lesson is that data tools earn trust through traceability. A perfectly styled total is not very useful if nobody can tell where it came from.

My next steps are to improve freshness checks, expand customization support, and keep simplifying the mobile flow.

You can try the live calculator at EatWise. I would especially appreciate feedback on source visibility, mobile usability, and which restaurant calculator would be most useful next.

EatWise is an independent tool and is not affiliated with the restaurant brands it covers. Nutrition values are estimates based on published information and can change.