u/Academic_Ad5379

Hi! I was recently building 3D digital menu project + ordering system with dashboard and after finishing it I decided to present to real cafe or restaurant to I choose one and I want to visit it today.

Am kinda nervous cos I didn’t do this before so I want to know what to do, what to expect and what to avoid.

Hi! I’m currently building a restaurant menu ordering app where customers scan a QR code placed on their table, browse the menu, and place orders. Staff members can then see the orders grouped by table.

I ran into a session/security problem:

If a customer scans the QR code and later leaves the restaurant, they can still reopen the app and place orders remotely, which could create confusion for the staff.

My current approach is using JWT-based table sessions.

Current workflow:

1. Customer scans the QR code
2. Backend checks if a session token already exists in localStorage/cookies
3. If no token exists, create a new session token
4. If a valid token already exists, continue using it
5. Token is sent with every request
6. If the token expires, the user is asked to scan the QR code again

The issue is that if the customer simply refreshes or revisits the table URL later, a new token can still be generated even when they are no longer in the restaurant.

What would be the best way to ensure that new sessions are created only from an actual QR scan/table presence and not just by reopening or refreshing the link later?

I’m currently considering device fingerprinting and I already implemented it but Idk how it will actually help.

Hi! I’m currently building a restaurant menu ordering app where customers scan a QR code placed on their table, browse the menu, and place orders. Staff members can then see the orders grouped by table.

I ran into a session/security problem:

If a customer scans the QR code and later leaves the restaurant, they can still reopen the app and place orders remotely, which could create confusion for the staff.

My current approach is using JWT-based table sessions.

Current workflow:

1. Customer scans the QR code
2. Backend checks if a session token already exists in localStorage/cookies
3. If no token exists, create a new session token
4. If a valid token already exists, continue using it
5. Token is sent with every request
6. If the token expires, the user is asked to scan the QR code again

The issue is that if the customer simply refreshes or revisits the table URL later, a new token can still be generated even when they are no longer in the restaurant.

What would be the best way to ensure that new sessions are created only from an actual QR scan/table presence and not just by reopening or refreshing the link later?

I’m currently considering device fingerprinting and I already implemented it but Idk how it will actually help.

Backend tech stack: mongoDB, express js

Am currently building a project related to 3D models and I need a way to optimise the model as much as possible (1MB - 2MB) and also with the maximum quality and details.
So is there are any tools or techniques that can do that ?

Am currently building a project related to 3D models and I need a way to optimise the model as much as possible (1MB - 2MB) and also with the maximum quality and details.
So is there are any tools or techniques that can do that ?

Am currently building a project related to 3D models and I need a way to optimise the model as much as possible (1MB - 2MB) and also with the maximum quality and details.
So is there are any tools or techniques that can do that ?

I am currently working on 3d menu and I faced a bug where the models appear massive and I have to scale them down until 3% - 4% to their actual size and idk what am doing wrong.

here is my code:

import { useEffect, useRef } from 'react'
import '@google/model-viewer'


export default function ModelViewer({ 
src
, 
alt
 = '3D Model' }) {
  const mvRef = useRef(null)


  useEffect(() => {
    const mv = mvRef.current
    if (!mv) return


    mv.addEventListener('load', () => {
      mv.setAttribute('scale', `0.04 0.04 0.04`)
    })
  }, [])


  return (
    <
model-viewer
      
ref
={mvRef}
      
src
={
src
}
      
alt
={
alt
}
      
ar
      
ar-modes
='scene-viewer webxr quick-look'
      
ar-scale
='fixed'
      
camera-controls
      
auto-rotate
      
auto-rotate-delay
='500'
      
rotation-per-second
='12deg'
      
shadow-intensity
='3'
      
shadow-softness
='1.5'
      
exposure
='1.2'
      
environment-image
='neutral'
      
tone-mapping
='commerce'
      
camera-orbit
='0deg 75deg 2.5m'
      
min-camera-orbit
='auto auto 0.5m'
      
max-camera-orbit
='auto auto 5m'
      
min-field-of-view
='30deg'
      
max-field-of-view
='60deg'
      
style
={{ width: '100%', height: '100%' }}
    >
      {/* AR button */}
      <button
        
slot
='ar-button'
        
className
='absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-yellow-400 text-black font-bold px-8 py-3 rounded-full shadow-xl hover:bg-yellow-300 active:scale-95 transition-all'
      >
        📱 View in Your Room
      </button>


      {/* Shows when AR is not supported */}
      <div
        
slot
='ar-failure'
        
className
='absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/10 backdrop-blur text-white/60 text-sm px-5 py-2.5 rounded-full border border-white/20 whitespace-nowrap'
      >
        AR not supported — use Safari (iOS) or Chrome (Android)
      </div>
    </
model-viewer
>
  )
}

so I need help

I'm building a web-based AR food menu using React, Three.js and AR.js where customers can point their phone at a marker and see a 3D model of the dish pop up in augmented reality. No app install needed, runs entirely in the browser.

I'm looking for:

- Similar projects or repos I can learn from

- Tips on marker-based vs markerless AR for this use case

- Advice on getting better 3D food models (currently using GLB files)

- Any performance tricks for mobile browsers

I also want to scan real food items to use as the 3D models instead of downloaded assets. My questions on that:

- What's the best free or affordable app for scanning food into a 3D model? (Polycam, Scaniverse, Kiri Engine?)

- Any tips for getting a clean scan — lighting, background, turntable vs handheld?

- How do you handle shiny or transparent surfaces that scan badly?

- Best way to export as GLB and optimize it for web use?

Has anyone built something like this or done food photogrammetry for a real project? Would love to see examples and hear what worked or didn't.

Thanks!

I'm building a web-based AR food menu using React, Three.js and AR.js where customers can point their phone at a marker and see a 3D model of the dish pop up in augmented reality. No app install needed, runs entirely in the browser.

I'm looking for:

- Similar projects or repos I can learn from

- Tips on marker-based vs markerless AR for this use case

- Advice on getting better 3D food models (currently using GLB files)

- Any performance tricks for mobile browsers

I also want to scan real food items to use as the 3D models instead of downloaded assets. My questions on that:

- What's the best free or affordable app for scanning food into a 3D model? (Polycam, Scaniverse, Kiri Engine?)

- Any tips for getting a clean scan — lighting, background, turntable vs handheld?

- How do you handle shiny or transparent surfaces that scan badly?

- Best way to export as GLB and optimize it for web use?

Has anyone built something like this or done food photogrammetry for a real project? Would love to see examples and hear what worked or didn't.

Thanks!