Mobile OCR AI Web Frontend

I need a clean, modern, minimalist frontend that guides mobile users through four key moments: logging in, opening the phone camera from the browser, sending each capture to my backend for both OCR and AI image recognition, and finally displaying a running points balance that can be exchanged in a small reward catalogue.

The project is strictly front-end: I will expose REST/GraphQL endpoints for authentication, image upload/analysis, point bookkeeping and catalogue data. You wire the UI, handle state, and ensure a smooth hand-off of images taken with the mobile camera (desktop fallback is a plus but not essential). Feel free to recommend the stack—React + Next.js, Vue 3, or a similarly lightweight SPA framework are all acceptable as long as it stays performant on mobile.

Core deliverables
• Responsive single-page web app styled in a modern, minimalist theme
• Camera component that opens the device camera directly in mobile browsers and streams the captured image to my endpoint
• Async handling of OCR + AI results returned as JSON, displayed in a neat results card
• Simple email/password login & session handling (token or cookie)
• Point counter that updates in real time and a catalogue screen where points can be redeemed
• Build/webpack configuration and concise README so I can deploy in my CI pipeline

Acceptance criteria
1. Mobile Lighthouse score ≥ 85.
2. Camera opens within 1 s on iOS Safari and Android Chrome.
3. Image payload reaches backend ≥ 95 % of the time on a flaky 3 G simulation.
4. State persists across refresh with no extra log-in for 24 h.
5. Catalogue renders correctly on devices ≥ 360 px wide.

Share a link to one live project where you integrated camera input or heavy client-side media, and outline your proposed tech stack in the first reply so we can move quickly.