(01 / 06)  Home

Product · Front-End Build

A website builder
for restaurants

From onboarding to a live site in minutes. No code, no agency.

View live demo

My Role

Designed & built (solo)

Stack

React, TypeScript, Vite, Tailwind

Type

Concept · Working prototype

The Idea

Most restaurants still don't have a decent website.

Working in restaurant tech at Savyu, I kept seeing the same gap: owners are busy, agencies are slow and expensive, and generic builders still expect you to design from scratch. The menu, the one thing they already have, is trapped in a PDF or a photo.

So I built a guided builder that does the heavy lifting: pick a template, import the menu automatically, and tweak it live, no code required.

Prototype Demo

Try the prototype.

This is a working prototype — not a production product. It demonstrates the core flows: onboarding, OCR menu import, drag-and-drop editing, and live preview.

portfolio-website-builder.vercel.app
Open the demo in a new tab

The Decision

Why build this, and why this way?

OCR over manual input

The menu is the one asset every restaurant already has — as a photo or a PDF. Forcing owners to re-type it is where most builders lose them. Automating it with Tesseract.js + pdf.js removes the most painful step in onboarding.

Zustand over React Context

A drag-and-drop builder updates state constantly. Context re-renders the whole tree on every change, which kills performance when the user is actively editing. Zustand keeps updates scoped, so the preview stays instant.

Templates first, blank canvas never

A blank page is the enemy of completion. Owners need to see something real immediately — a template that already looks like their restaurant. The guided onboarding matches the template to their context, so they start from something, not nothing.

What I Built

The features that remove the friction.

01

Guided onboarding

A few questions about the restaurant, then the app matches a fitting template, so owners start from something real instead of a blank page.

02

Menu import via OCR

Upload a photo or PDF of the menu and it auto-extracts dishes and prices with OCR (Tesseract.js + pdf.js), turning the most tedious step into seconds.

03

Drag-and-drop editor

Re-order and edit sections by hand (dnd-kit), with state managed in Zustand so the builder stays fast and predictable.

04

Live preview

Every change renders instantly in a real preview, so what you build is exactly what you ship.

Under the Hood

Built modern, built to ship.

ReactTypeScriptViteTailwindZustanddnd-kitTesseract.jspdf.js

A solo build that let me own the whole loop: product thinking, UX, and front-end engineering. Proof I can ship, not just analyze.

Like what you see?

Let's talk about building and growing your product.

Get in Touch