{"slug": "i-built-a-free-qr-menu-saas-with-laravel-12-react-here-s-what-i-learned", "title": "I Built a Free QR Menu SaaS with Laravel 12 & React — Here's What I Learned", "summary": "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.", "body_md": "A few weeks ago, I challenged myself to build another micro SaaS.\n\nInstead of creating another AI-powered tool, I wanted to solve a simple, real-world problem.\n\nRestaurant owners still spend time and money printing menus every time prices change or new dishes are added.\n\nThe solution seemed straightforward: build a QR Menu Builder that lets restaurants manage their menu online and generate a QR code for customers.\n\nThe idea was simple.\n\nBuilding it wasn't.\n\nIn 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.\n\nThe Tech Stack\n\nI wanted a stack that I already trusted.\n\nLaravel 12\n\nPHP 8.4\n\nMySQL\n\nReact\n\nInertia.js\n\nTailwind CSS\n\nVite\n\nLaravel remains my first choice because it allows me to move quickly without sacrificing code organization.\n\nReact + Inertia gives me a modern SPA experience without maintaining separate frontend and backend applications.\n\nFor a solo developer building multiple micro SaaS products, this combination has been extremely productive.\n\nDesigning the Database\n\nOne mistake I've made in previous projects was coupling everything together.\n\nThis time I kept the database simple and modular.\n\nrestaurants\n\n├── categories\n\n│ └── menu_items\n\n│\n\n├── qr_codes\n\n│\n\n└── scans\n\nThe relationships are straightforward.\n\nRestaurant\n\n```\nhasMany Categories\n```\n\nCategory\n\n```\nhasMany MenuItems\n```\n\nRestaurant\n\n```\nhasMany Scans\n```\n\nKeeping the hierarchy shallow made queries easier and reduced unnecessary joins.\n\nWhy I Didn't Store Everything in JSON\n\nIt can be tempting to store the entire menu in a JSON column.\n\nSomething like this:\n\n{\n\n\"categories\": [\n\n{\n\n\"name\": \"Starters\",\n\n\"items\": [...]\n\n}\n\n]\n\n}\n\nWhile this works for small applications, it quickly becomes difficult when you need:\n\nsearch\n\nanalytics\n\nordering\n\nfiltering\n\nreporting\n\nUsing proper relational tables makes future features much easier to implement.\n\nGenerating QR Codes\n\nQR generation turned out to be one of the easiest parts.\n\nUsing Laravel packages, generating a QR code is surprisingly simple.\n\n$url = route('restaurant.menu', $restaurant->slug);\n\nQrCode::format('svg')\n\n->size(300)\n\n->generate($url);\n\nI chose SVG instead of PNG because:\n\nsmaller file size\n\nscales perfectly\n\nlooks sharper when printed\n\neasier to embed\n\nRouting the Public Menu\n\nOne decision I made early was separating the public menu from the dashboard.\n\nInstead of URLs like\n\n/restaurant/25/menu\n\nI switched to\n\n/menu/the-coffee-house\n\nUsing slugs provides cleaner URLs and is much better for SEO.\n\nLaravel makes route model binding with slugs incredibly easy.\n\nRoute::get('/menu/{restaurant:slug}', ...);\n\nBuilding the Dashboard\n\nThe dashboard only has a few sections.\n\nRestaurant\n\nCategories\n\nMenu Items\n\nQR Code\n\nSettings\n\nAnalytics\n\nI intentionally avoided adding dozens of menus and settings.\n\nRestaurant owners don't want complicated software.\n\nThey just want to:\n\nupdate prices\n\nadd dishes\n\nhide unavailable items\n\nprint their QR code\n\nSometimes fewer features create a better product.\n\nMobile First\n\nOne lesson I've learned from previous SaaS projects:\n\nNever treat mobile as an afterthought.\n\nRestaurant owners often update their menu from their phones.\n\nEvery page was designed to work comfortably on smaller screens.\n\nTailwind CSS made responsive layouts much easier than my previous Bootstrap projects.\n\nPerformance Considerations\n\nEven a simple menu can contain hundreds of items.\n\nTo keep loading fast, I:\n\neager loaded relationships\n\noptimized database indexes\n\ncached public menus\n\noptimized images\n\nlazy loaded admin components\n\nThe public menu should feel almost instant because customers scan it while sitting at a table.\n\nSEO Matters More Than I Expected\n\nInitially, I treated this like a typical SaaS landing page.\n\nThen I realized most restaurant owners search for phrases like:\n\nFree QR Menu\n\nQR Menu Builder\n\nDigital Restaurant Menu\n\nRestaurant QR Code Menu\n\nSo I spent time improving:\n\nsemantic HTML\n\nstructured headings\n\nFAQs\n\nlanding page content\n\ninternal linking\n\nmetadata\n\nGood SEO takes longer than building features—but it's worth the investment.\n\nWhat I'd Do Differently\n\nIf I started again, I'd probably build:\n\nmulti-language menus from day one\n\nmenu templates earlier\n\nimage optimization pipeline\n\nanalytics dashboard sooner\n\nBuilding real software teaches you things that planning never will.\n\nWhat's Next?\n\nSome features I'm currently working on include:\n\n📊 Scan analytics\n\n📱 WhatsApp ordering\n\n🍽️ Multiple menu templates\n\n🌍 Multi-language support\n\n📅 Pre-order menus\n\n⭐ Featured dishes\n\nI'm trying to keep the product simple while solving genuine problems for restaurant owners.\n\nFinal Thoughts\n\nBuilding small SaaS products has become one of my favorite ways to learn.\n\nEvery project forces me to think about architecture, UX, SEO, performance, and deployment—not just writing code.\n\nThis 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.\n\nIf you're building your own micro SaaS, I'd love to hear how you structure your projects and what stack you're using.\n\nYou can also check out the project here:\n\n👉 [https://www.smarteyeapps.com/qr-menu](https://www.smarteyeapps.com/qr-menu)\n\nTags:", "url": "https://wpnews.pro/news/i-built-a-free-qr-menu-saas-with-laravel-12-react-here-s-what-i-learned", "canonical_source": "https://dev.to/smarteye_apps/i-built-a-free-qr-menu-saas-with-laravel-12-react-heres-what-i-learned-1h3l", "published_at": "2026-07-28 16:11:32+00:00", "updated_at": "2026-07-28 16:36:23.183890+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Laravel", "React", "Inertia.js", "Tailwind CSS", "Vite", "MySQL", "PHP"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-free-qr-menu-saas-with-laravel-12-react-here-s-what-i-learned", "markdown": "https://wpnews.pro/news/i-built-a-free-qr-menu-saas-with-laravel-12-react-here-s-what-i-learned.md", "text": "https://wpnews.pro/news/i-built-a-free-qr-menu-saas-with-laravel-12-react-here-s-what-i-learned.txt", "jsonld": "https://wpnews.pro/news/i-built-a-free-qr-menu-saas-with-laravel-12-react-here-s-what-i-learned.jsonld"}}