cd /news/developer-tools/i-built-a-free-qr-menu-saas-with-lar… · home topics developer-tools article
[ARTICLE · art-77276] src=dev.to ↗ pub= topic=developer-tools verified=true sentiment=↑ positive

I Built a Free QR Menu SaaS with Laravel 12 & React — Here's What I Learned

A developer built a free QR Menu Builder SaaS using Laravel 12, React, Inertia.js, and Tailwind CSS to help restaurant owners manage menus online and generate QR codes. The project focused on a simple, modular database design, SVG QR codes, clean slug-based URLs, and mobile-first responsive layouts. The developer emphasized that fewer features can create a better product for restaurant owners who just need to update prices, add dishes, and print QR codes.

read4 min views1 publishedJul 28, 2026

A few weeks ago, I challenged myself to build another micro SaaS.

Instead of creating another AI-powered tool, I wanted to solve a simple, real-world problem.

Restaurant owners still spend time and money printing menus every time prices change or new dishes are added.

The solution seemed straightforward: build a QR Menu Builder that lets restaurants manage their menu online and generate a QR code for customers.

The idea was simple.

Building it wasn't.

In this article, I'll share some of the architectural decisions, challenges, and lessons I learned while building it with Laravel 12, React, Inertia.js, and Tailwind CSS.

The Tech Stack

I wanted a stack that I already trusted.

Laravel 12

PHP 8.4

MySQL

React

Inertia.js

Tailwind CSS

Vite

Laravel remains my first choice because it allows me to move quickly without sacrificing code organization.

React + Inertia gives me a modern SPA experience without maintaining separate frontend and backend applications.

For a solo developer building multiple micro SaaS products, this combination has been extremely productive.

Designing the Database

One mistake I've made in previous projects was coupling everything together.

This time I kept the database simple and modular.

restaurants

├── categories

│ └── menu_items

├── qr_codes

└── scans

The relationships are straightforward.

Restaurant

hasMany Categories

Category

hasMany MenuItems

Restaurant

hasMany Scans

Keeping the hierarchy shallow made queries easier and reduced unnecessary joins.

Why I Didn't Store Everything in JSON

It can be tempting to store the entire menu in a JSON column.

Something like this:

{

"categories": [

{

"name": "Starters",

"items": [...]

}

]

}

While this works for small applications, it quickly becomes difficult when you need:

search

analytics

ordering

filtering

reporting

Using proper relational tables makes future features much easier to implement.

Generating QR Codes

QR generation turned out to be one of the easiest parts.

Using Laravel packages, generating a QR code is surprisingly simple.

$url = route('restaurant.menu', $restaurant->slug);

QrCode::format('svg')

->size(300)

->generate($url);

I chose SVG instead of PNG because:

smaller file size

scales perfectly

looks sharper when printed

easier to embed

Routing the Public Menu

One decision I made early was separating the public menu from the dashboard.

Instead of URLs like

/restaurant/25/menu

I switched to

/menu/the-coffee-house

Using slugs provides cleaner URLs and is much better for SEO.

Laravel makes route model binding with slugs incredibly easy.

Route::get('/menu/{restaurant:slug}', ...);

Building the Dashboard

The dashboard only has a few sections.

Restaurant

Categories

Menu Items

QR Code

Settings

Analytics

I intentionally avoided adding dozens of menus and settings.

Restaurant owners don't want complicated software.

They just want to:

update prices

add dishes

hide unavailable items

print their QR code

Sometimes fewer features create a better product.

Mobile First

One lesson I've learned from previous SaaS projects:

Never treat mobile as an afterthought.

Restaurant owners often update their menu from their phones.

Every page was designed to work comfortably on smaller screens.

Tailwind CSS made responsive layouts much easier than my previous Bootstrap projects.

Performance Considerations

Even a simple menu can contain hundreds of items.

To keep fast, I:

eager loaded relationships

optimized database indexes

cached public menus

optimized images

lazy loaded admin components

The public menu should feel almost instant because customers scan it while sitting at a table.

SEO Matters More Than I Expected

Initially, I treated this like a typical SaaS landing page.

Then I realized most restaurant owners search for phrases like:

Free QR Menu

QR Menu Builder

Digital Restaurant Menu

Restaurant QR Code Menu

So I spent time improving:

semantic HTML

structured headings

FAQs

landing page content

internal linking

metadata

Good SEO takes longer than building features—but it's worth the investment.

What I'd Do Differently

If I started again, I'd probably build:

multi-language menus from day one

menu templates earlier

image optimization pipeline

analytics dashboard sooner

Building real software teaches you things that planning never will.

What's Next?

Some features I'm currently working on include:

📊 Scan analytics

📱 WhatsApp ordering

🍽️ Multiple menu templates

🌍 Multi-language support

📅 Pre-order menus

⭐ Featured dishes

I'm trying to keep the product simple while solving genuine problems for restaurant owners.

Final Thoughts

Building small SaaS products has become one of my favorite ways to learn.

Every project forces me to think about architecture, UX, SEO, performance, and deployment—not just writing code.

This QR Menu Builder started as a weekend idea and has grown into a practical project where I can experiment with Laravel, React, and product development.

If you're building your own micro SaaS, I'd love to hear how you structure your projects and what stack you're using.

You can also check out the project here:

👉 https://www.smarteyeapps.com/qr-menu

Tags:

── more in #developer-tools 4 stories · sorted by recency
── more on @laravel 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/i-built-a-free-qr-me…] indexed:0 read:4min 2026-07-28 ·