Benefit:ON V2 is a React web app for finding youth discounts at cinemas, restaurants, shops, cultural venues and study stores. Users filter stores by query, category and distance, save favorites, view recent stores, and use Gemini recommendations and receipt analysis.

Implementation

The repository includes React screens, search and distance calculations, modals, bottom navigation, local favorites, image previews, Gemini calls, Vite builds and Vercel deployment settings.

Current status

This is a deployed, client-centric prototype. It has no user account, server database, catalog administration, server-side secret boundary or synchronized analysis history. User conversion, recommendation quality and accessibility outcomes are not measured.

1. Build and delivery boundary

index.tsx mounts App, while Vite turns React 19 and TypeScript into a browser bundle. Store images and static HTML ship in the same deployment and are delivered from Vercel. There is no server rendering or API route, so search, modals and AI actions execute after the browser receives the shell.

2. Presentation and state orchestration

App.tsx owns the source catalog, query, category, nearby mode, active view, modals, AI response, receipt state, favorites and recent stores. Header, MenuBar, StoreCard and Modal receive this state through props and callbacks. The flow is visible in one place, but async behavior and regression scope grow with that central component.

3. Discovery data path

STATIC_STORE_DATA in constants.tsx is the source catalog. An effect applies category and text filters; nearby mode also calculates Haversine distance and sorts the derived filteredStores. Discovery stays deterministic offline, while benefit changes require a new static build.

4. Personalization and AI path

Favorites, recent stores and receipt history use three localStorage keys. Recommendations send preference text and catalog context to Gemini, then map returned IDs back to known stores. Receipt input uses FileReader for preview and sends image bytes with a MIME type to obtain a structured analysis result.

5. Trust, failure and security boundaries

Denied geolocation becomes an error state or a Gangnam/Yongsan demo coordinate. Gemini output is expected as JSON, so malformed shapes and unknown IDs require filtering. Because VITE_API_KEY is injected into the client bundle, a production system needs a server proxy, secret management, request limits, input-size checks and an observable error contract.

6. Data and state ownership

constants.tsx owns the source catalog, App.tsx owns navigation and result state, and browser localStorage owns favorites, receipts and recent items. Cross-device consistency is missing because no server synchronization exists; retention and expiration also need explicit policy.

7. Performance bottlenecks and recovery

The broad state surface in one App component and full-catalog filtering increase render cost as data grows. Image lazy loading, memoized derived lists, cancellation and timeouts for Gemini are the next validation points; static catalog discovery remains available when the external API fails.

8. Observability, validation and debt

Toasts expose user-facing errors, but stage-level latency and failure telemetry are missing. Removing client secrets, defining receipt-data retention and splitting App state into domain hooks are the primary debts. Production outcomes have not been measured.

React and Vite as a single-page app

React and Vite make the catalog and modal-heavy interaction quick to assemble and deploy statically. The tradeoff is no route-level state, server rendering or trusted server execution boundary.

Static catalog as the source of truth

TypeScript constants make the demo reproducible without a database. Discovery remains available without an upstream service, but operators cannot update benefits immediately or retain change history.

Browser-local personalization

localStorage preserves favorites, recent views and receipts without building identity. It does not provide cross-device sync, user separation or a complete deletion policy.

Geolocation with demo coordinates

The browser API supports real nearby sorting, while Gangnam and Yongsan coordinates keep the feature demonstrable after permission denial. Results are straight-line estimates rather than travel time or live business availability.

Direct Gemini integration

Calling Gemini from the client validates recommendation and vision flows quickly. It leaves credential exposure, malicious requests, cost control and rate limiting outside an application server.

Core discovery scenarios

• Combine a query and category and verify only their intersection remains.
• Exercise allowed, denied and unsupported geolocation plus both demo locations.
• Open a store and verify recent views and favorites survive a reload.
• Confirm an empty query result removes stale cards and exposes a clear empty state.

AI and file scenarios

• Block empty preferences and map only known store IDs from a successful response.
• Exercise Gemini errors, empty recommendations, malformed JSON and unknown IDs.
• Test camera and gallery input, preview, loading, failure and retry states.
• Confirm successful receipt output is appended and restored after reopening the site.

Automated evidence

The repository defines dev, build and preview, but no unit, component or end-to-end test script is present. Cross-browser behavior, Core Web Vitals, recommendation accuracy and accessibility scores are not measured.

Known limits

• Store data and images are coupled to the static bundle.
• Personal state remains on the current browser.
• AI credentials and requests cross the client boundary.
• Receipt images have no production privacy, redaction or retention contract.
• AI-generated benefit claims require independent verification.

Completed

• Responsive store cards with query, category and nearby discovery
• Browser persistence for favorites, recent views and receipt history
• Gemini preference recommendations and image receipt analysis
• Demo coordinates for denied location access
• Production Vite build and public Vercel deployment

Priority improvements

• Move Gemini behind a proxy with secret, rate and payload protection
• Separate catalog repositories and UI state from App.tsx
• Add unit tests for search, distance and AI parsing plus modal E2E coverage
• Explain receipt privacy and disposal before upload
• Verify focus trapping, error announcements and keyboard interaction

Later work

• Managed benefit API with source and update timestamps
• Account-backed sync, export and deletion
• Recommendation reasoning, uncertainty and user feedback
• Production measurement for performance, failures and search success

Out of scope

Eligibility guarantees, payments, coupon issuance, receipt accounting and automated purchase decisions are outside this prototype. Users must confirm the latest policy with each provider.