DEV Community

Onah Sunday.
Onah Sunday.

Posted on

Table QR Ordering With Open AI for a Friend’s Kitchen

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

Qrder (say it like order, or QR-der) is a table QR ordering app for a friend’s restaurant.

Guests scan a QR on the table (or pick a table on the home page), see the menu, and order by tapping dishes or by speaking. Open-weight AI turns something like “two jollof and a zobo” into real menu lines. The app reads the order back, asks for a yes/no, and on yes sends it to the kitchen with the table number. Staff keep /admin open on a phone; new orders show up live. Need help / Buzz alerts their phone so they can walk to that table.

It solves a real floor problem: no waiter with a pad, no shouting across the room, no guest hunting for staff. The kitchen sees what was ordered and which table it came from.

Demo

Live app: https://qrder-ten.vercel.app/

Guest home (table QRs + table number): https://qrder-ten.vercel.app/
Table 3 menu: https://qrder-ten.vercel.app/?table=3
Kitchen board: https://qrder-ten.vercel.app/admin

Code

Qrder

Scan a table QR → order by menu or voice (open-weight AI) → kitchen phone buzzes. Built for a friend’s restaurant.

Stack

  • Next.js + TypeScript + Tailwind
  • MongoDB Atlas (optional locally — in-memory fallback)
  • Open-model order parsing via Groq-compatible API (gpt-oss / Llama; heuristic fallback)
  • Whisper STT (Groq) for voice orders
  • ElevenLabs TTS to read the order back and ask yes/no (browser speech fallback)
  • Deploy: Vercel

Quick start

cd qrder
pnpm install
cp .env.example .env.local
# fill AI_API_KEY, ADMIN_*, APP_URL, optional MONGODB_URI / ELEVENLABS_*
pnpm dev
Enter fullscreen mode Exit fullscreen mode

Open:

Set APP_URL / NEXT_PUBLIC_APP_URL to your public URL (ngrok or Vercel) so QR codes point at the right host.

Demo

…

Repo: https://github.com/sundayonah/qrder

How I Built It

Open-source AI is the ordering path, not a sidebar feature.

  • Speech → text: Groq-hosted Whisper (whisper-large-v3) transcribes the mic clip.
  • Text → menu IDs: chat completions against open-weight models, preferring openai/gpt-oss-20b (with Llama fallbacks). The model returns JSON { items: [{ id, qty }], notes } mapped only to the live menu. If the API is down, a local heuristic still maps dish names so the demo does not die.
  • Talk-back: ElevenLabs reads the parsed order and asks if that is correct. The guest answers yes (POST /api/orders) or no (“please order again”). If ElevenLabs is unavailable, the browser speechSynthesis API still speaks.

Stack: Next.js App Router, TypeScript, Tailwind, MongoDB Atlas for menus/orders (in-memory fallback without a URI), HMAC admin cookies, and QR codes built from APP_URL so one env change covers local ngrok vs production (https://qrder-ten.vercel.app/).

I built it over the weekend in a Cursor agent session: guest grid, admin kitchen, voice confirm, and wiring “yes” all the way to the kitchen poll.

Why Does Open Innovation Matter?

A closed restaurant-assistant API would lock the menu parser to one vendor and one prompt. Here the weights are open (gpt-oss / Llama). I can swap the Groq-compatible base URL, drop to a local matcher, or change the JSON contract without rewriting the floor UX.

That mattered for a friend’s kitchen: names like jollof, swallow, and zobo need a model that follows only the dishes they said, not a black box that “helpfully” adds every rice on the menu. Open models plus a tiny fallback meant the weekend build still works if the key or model id moves.

ElevenLabs is the voice layer on top of that open parse — not a replacement for it.

My Agent Session

Built with Cursor over the Hacktoberfest weekend. No DevRelay session ID embedded for this post.

Prize Categories

  • Best Use of MongoDB Atlas — menus and orders persist so the kitchen board survives restarts.
  • Best Use of ElevenLabs — TTS confirmation of the parsed order before it hits the kitchen.

Top comments (0)