SEA Water / Localise · Sustainability & Consumer Awareness
AI-Powered Water Brand Scanner for Supply Chain Awareness
We built Localisewater, as a mobile-first web application for SEA Water / Localise that turns a bottle photo into a clear view of where that water came from and how far it travelled. Built with Next.js 16, React 19, TypeScript, Prisma, MySQL, and OpenAI GPT-4o Vision, the platform combines AI label recognition, a curated brand database, and geolocation-based distance calculation in an architecture the client fully owns and can extend without platform lock-in.
The Challenge
Bottled water carries an environmental story most consumers never see: source location, transport distance, and the footprint of moving water across borders. The challenge was to make that invisible journey visible through a frictionless mobile experience that could reliably interpret real-world bottle photos, match them to a maintained source database, and calculate distance to the user in real time.
Key questions:
- How do we recognize brands from messy real-world images? — Users scan bottles in uncontrolled conditions with glare, curved labels, partial framing, and inconsistent lighting, so recognition had to work beyond ideal product photography.
- How do we turn AI output into dependable user-facing results? — Vision models can infer likely brands, but the application still needed deterministic matching logic against a curated water brands dataset.
- How do we calculate relevance in the moment? — The value of the scan depends on combining source data with the user’s live location to show distance travelled immediately.
- How do we keep the experience mobile-native on the web? — Camera access, HTTPS enforcement, permissions, and geolocation all had to work smoothly inside a browser-first product.
- How do we give the client ownership of the system? — Beyond the public scanner, the client needed control over brands, settings, analytics, and future logic without depending on a third-party SaaS workflow.
Our Approach
We designed Localisewater as a mobile-first Next.js application that combines AI-assisted image understanding with owned business logic and structured source data. The stack was chosen to keep the experience fast for users while giving SEA Water a maintainable platform with full control over recognition rules, brand records, analytics, and administration.
AI-assisted recognition: We used OpenAI GPT-4o Vision to extract structured information from bottle photos, including likely brand cues, packaging context, and whether the image represents water at all. This reduced friction for users while creating a richer signal for downstream matching.
Deterministic brand matching: Instead of trusting model output blindly, we implemented a multi-factor scoring layer that compares AI-extracted attributes against a curated database of water brands. That made the final result more explainable, more resilient, and easier for the client to improve over time.
Owned data and admin workflows: We built a full admin environment for managing water brands, settings, and scan analytics. The client can update operational logic at the data layer, turning ongoing maintenance into owned intellectual property rather than external dependency.
Mobile-first delivery: The public experience was optimized around smartphone use, with camera capture, HTTPS requirements, geolocation, and shareable results designed into the core flow. Desktop users are redirected toward the intended device context instead of receiving a compromised experience.
Resilience and observability: Scan logging, analytics integration, settings overrides, and fallback data handling were built in from the start. That gives the team visibility into usage patterns while keeping the scanner operational under real-world conditions.
Metrics
1 core scan journey
Mobile-First Flow
The product reduces the experience to a single high-intent path: photo, recognition, match, and distance result.
AI + rule-based
Recognition Stack
GPT-4o Vision handles image interpretation while owned matching logic controls the final brand resolution.
Real-time
Distance Output
Each successful scan calculates source-to-user travel distance at the moment of interaction.
100% client-managed
Owned Admin Control
Brands, settings, and scan analytics can be maintained inside the client’s own platform without SaaS lock-in.
2 data paths
Data Resilience
The system supports both primary database access and CSV fallback storage for operational continuity.
End-to-end logging
Analytics Coverage
Public analytics and internal scan logging give the client visibility into usage, engagement, and product evolution.
Making Water Transport Visible Through an Owned Digital Product
Localisewater turns a simple bottle scan into an educational sustainability interaction. The product helps users understand that bottled water is not just a consumer good but a logistics chain, and it gives SEA Water a scalable platform to communicate that message through owned technology, owned data, and measurable user engagement.
A scan flow built for real-world usage
The core product journey is intentionally simple: capture a bottle photo, let the system analyze the label, match the result to the correct brand, and display how far that water has travelled from source to user. Under the hood, that required coordinating camera access, image submission, AI processing, geolocation, and result rendering into a flow that feels immediate on mobile.
We treated the browser as an application runtime, not just a content layer. That meant handling HTTPS-only camera requirements, permissions states, mobile UI constraints, and edge cases around image quality so the experience remained usable in the situations where people actually scan bottles.
AI where it adds value, rules where reliability matters
The recognition pipeline uses GPT-4o Vision to interpret bottle imagery and extract structured signals such as brand indicators, packaging characteristics, materials, colours, and water/non-water classification. This is where AI adds the most leverage: it turns unstructured camera input into usable product signals.
But the business-critical outcome does not depend on probabilistic output alone. We added a matching layer that scores candidates against the curated brand database, creating a more controlled system that SEA Water can refine as its dataset grows. That combination of AI interpretation and owned matching logic is what turns experimentation into durable product value.
A curated source-of-truth database the client controls
The product is not just a scanner. It is also a structured knowledge system containing water brand records, source locations, and configurable settings. With Prisma and MySQL as the data backbone, SEA Water can manage WaterBrand, ScanLog, ScanHistory, and Setting entities inside a platform they control.
This matters commercially as much as technically. Every new brand entry, correction, and matching improvement increases the value of the system itself. Instead of sending users through a generic AI demo, the client is building a proprietary operational dataset that becomes harder to replicate over time.
Distance calculation as the moment of impact
The most important user-facing output is not the brand name alone but the calculated distance between the water source and the person holding the bottle. We integrated geolocation with source data so each result answers the question users actually care about: how far did this water travel to reach me?
That transforms a technical pipeline into a communication tool. The result page makes the supply chain legible, shareable, and memorable, giving SEA Water a stronger way to drive sustainability awareness than a static campaign page ever could.
Admin tooling that protects long-term independence
We built an internal admin panel to manage brands, settings, and analytics so the team can evolve the product without developer intervention for every update. Settings are driven through a combination of data/settings.json and database overrides, cached and revalidated through application-level controls.
This is a core kbpm principle in practice: no lock-ins, no hidden logic, no dependency on external operators to maintain value. The client owns the system behavior, owns the source data, and owns the compounding value created by every scan.
Instrumentation for iteration, not guesswork
Localisewater was built with observability in mind. Scan activity is logged to the database, public traffic is tracked through Google Analytics, and the architecture includes explicit API routes for scanning, search, history, and administration.
That gives SEA Water a foundation for product iteration based on evidence. They can see what gets scanned, where friction occurs, and how the awareness tool performs over time, making the platform useful not just as a campaign asset but as an evolving digital product.
Architecture
- Next.js 16 App Router structures the product as a modern full-stack application with server components, client pages, and Route Handlers under
app/apifor scan, search, logging, and admin operations. - Prisma 6.9 + MySQL provide the owned persistence layer for brand records, scan logs, scan history, and system settings, keeping the client’s core logic and data portable and fully controlled.
- Settings merge strategy combines
data/settings.jsondefaults with database overrides viaunstable_cacheand revalidation tags to balance operational flexibility with performance.
AI Pipeline
- OpenAI GPT-4o Vision is used for structured image interpretation, extracting likely brand and packaging signals from arbitrary smartphone photos.
- Multi-factor scoring turns model output into deterministic matching against the curated water brand database, improving confidence and making the result pipeline easier to tune.
- Fallback CSV on Vercel Blob provides resilience when the primary database path is unavailable, reducing the risk of scanner downtime.
Frontend & UX
- React 19 + TypeScript 5 support a maintainable component architecture for camera capture, result rendering, brand directory, and admin tooling.
- Tailwind CSS 3.4 powers the responsive mobile-first UI, with supporting utilities such as
tailwind-mergeandclass-variance-authorityfor scalable styling patterns. - Radix UI and shadcn/ui patterns provide accessible interface primitives for dialogs, drawers, notifications, and interactive controls across public and admin views.
Security & Reliability
- Security headers include HSTS,
X-Frame-Options,X-Content-Type-Options, andReferrer-Policyto harden the application in production. - HTTPS redirect enforcement ensures camera and geolocation features operate within the browser security model required for mobile scanning.
- In-memory rate limiting protects the scan endpoint against abuse and helps keep AI-backed operations commercially sustainable.
Analytics & Operations
- Google Analytics tracks usage on the public product, giving the client visibility into adoption and engagement.
- Database scan logging captures internal usage data for reporting, analysis, and future product optimization.
- Admin management tools allow non-technical team members to update brand data and settings without introducing external platform dependency.
“We wanted more than a clever scanner. We needed a product that could make the supply chain behind bottled water visible, while giving us full control over the data and logic that make it valuable. The result is a tool we can grow, measure, and own ourselves.”
SEA Water / Localise — Product Team
More case studies
From Excel to Platform for Academic Research Operations
We designed and built a custom research operations platform for Academion, replacing fragile Excel-based workflows with an owned web application for academic institutions. Built with Laravel, Vue.js, Inertia.js, PostgreSQL, Laravel Nova, and Tailwind CSS, the system centralizes survey management, participant tracking, reporting, and administration in a scalable architecture that captures operational knowledge inside the product itself.
Booking infrastructure for Modern Tattoo Studio's
We built a multi-tenant booking platform for Blink Tattoo Platform that gives studios full control over scheduling, payments, and client communication in one owned system. The product was developed with Laravel 10, React 18, TypeScript, Inertia.js, MySQL, and Stripe Connect, using an event-driven architecture that synchronizes studio operations in real time across calendars, payments, and notifications without relying on fragmented third-party workflows.
