Nabatati

Nabatati helps Arabic-speaking plant owners identify a plant from a photo, understand its health, and get actionable care guidance. The product is an installable progressive web app with RTL layout throughout, offline fallback, and optional cloud sync when Supabase is configured.

I designed and built the product end to end: UI flows, camera capture, on-device image compression, the diagnosis pipeline with schema validation, persistence (Supabase with a localStorage fallback), and the installable PWA shell. I also integrated multimodal AI analysis and a scoped “plant doctor” chat tied to each scan.

The UI is a Next.js 16 App Router client with React 19 and Tailwind CSS 4. Captured frames are compressed on a canvas before being sent to an orchestration layer (n8n) for multimodal analysis; responses are validated with Zod before they touch UI state. Supabase stores scan history when configured; otherwise scans live in localStorage so the demo still works without a backend. Service worker caching provides offline install and a fallback page when the network is unavailable.

• Arabic RTL and cursive script: layout, motion, and form controls had to respect direction without breaking Latin scientific names in diagnosis results — solved with deliberate `dir="auto"` on mixed-script strings and RTL-first component structure.
• Large camera photos on mobile: sending full-resolution images was slow and expensive — added client-side canvas compression with size targets before any network call.
• Untrusted model output: free-form JSON from AI providers needed hardening — every diagnosis path runs through Zod schemas with user-visible error states when validation fails.

Manual testing on mid-range Android phones and desktop Chromium for install prompts, offline mode, and camera permissions. Validation errors surface as recoverable UI states rather than silent failures. Reduced-motion and focus styles follow the same patterns as my portfolio. Performance focus: lazy routes for heavy flows and minimizing main-thread work during capture.

Shipped a public demo at nabatati.vercel.app with MIT-licensed source. The app runs fully client-side without backend credentials, which makes the live demo easy to verify. Next improvements would include automated tests around the Zod contracts and tighter bundle analysis for the camera flow.